Mobile front page friendly

Support Area Forums Selfie Mobile front page friendly

This topic contains 8 replies, has 3 voices, and was last updated by  Bill Robbins 2 years, 5 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
URL to the page in question: http://
  • Author
    Posts
  • #28356

    james lee
    Participant

    Hi

    Is there a way we have option to position which part to be seen in the mobile phone. Right now it just cuts off right and left and only shows the middle of the picture. Some photos the focus is on the left or right.

    If not is there a way a user can move around the photo instead of being fixed and cutting off the right and left of the photo?

    Thank you
    James

    #28363

    Bill Robbins
    Moderator

    Good Morning James,

    Excellent point. Mobile devices can end up with extreme aspect ratios especially compared to more typical photography sizes. That can lead to lots of cropping on the left/right or top/bottom depending on the device and the image.

    One way around that is to set the entire image to always be visible on smaller screens. Here’s how to do that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      @media only screen and (max-width: 767px) {
      
      	.window {
      		background-size: contain;
      		background-position: center center;
      		background-repeat: no-repeat;
      	}
      
      }
      
    3. Update your settings.

    That should make the entire image visible on screens smaller than 768 pixels wide.


    It’s a good idea to have a way to include a mobile hero image. I will include an option for that in the next update to the theme. That way you can still have the entire space filled, it’ll just be with an image that’s better suited to the cramped quarters there.

    Let me know if you have any questions or trouble,
    Bill

    #28382

    james lee
    Participant

    Hi

    Is there a way to decrease the space between each photos in the mobile?

    #28383

    james lee
    Participant

    or when it detects a mobile device it auto puts in landscape mode since in landscape mode the pictures works well.

    #28384

    Bill Robbins
    Moderator

    Hey James,

    I ended up making an update to the theme this morning. It adds in a separate uploader for a mobile image. It will be used when the screen size is less than 768 pixels wide.

    If you haven’t tried updating yet, give that a shot and see if it doesn’t give a bit more flexibility. You’ll probably want to take out the snippet from earlier while you test the mobile images out.

    Let me know how it goes,
    Bill

    #28388

    james lee
    Participant

    Just updated it but when you put the phone in landscape the top is cutoff.

    #28389

    Bill Robbins
    Moderator

    If you have a full screen background image, there will always be some cropping. Depending on the layout of the image and the size of the browser window, it will either crop top/bottom or left/right.

    The closer the browser window is to the aspect ratio of the image, the less cropping there will be.

    The only way to ensure the entire image is shown is to change it similar to the snippet I posted earlier. There will be letter boxing there, but the whole image should be there.

    With the mobile one, I would try to keep the main focus of the image in the middle of the image. Give it some buffer inside the image so that when cropping occurs, nothing vital is lost.

    #28418

    pablo talhouk
    Participant

    Great update Bill!I added some mobile images with bigger text size inside for mobile and works perfect.
    A question, it will be better, to upload some smaller images, for faster loading of the web, on mobile devices? Would you recommend a size like 768px x 460px?

    #28421

    Bill Robbins
    Moderator

    Hey Pablo,

    I’m glad that worked out well for you. Great question too. You can do that. It might speed things up just a bit. The main intention was purely cosmetic, but it might make things a bit speedier too.

    Have a great day,
    Bill

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Mobile front page friendly’ is closed to new replies.