Mobile front page friendly
Support Area › Forums › Selfie › Mobile front page friendly
- This topic has 8 replies, 3 voices, and was last updated 8 years, 12 months ago by Bill Robbins.
-
AuthorPosts
-
April 1, 2015 at 02:42 #28356james leeParticipant
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
JamesApril 1, 2015 at 09:26 #28363Bill RobbinsModeratorGood 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:
- Go to your theme options page and choose the Advanced tab.
- 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; } }
- 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,
BillApril 1, 2015 at 17:52 #28382james leeParticipantHi
Is there a way to decrease the space between each photos in the mobile?
April 1, 2015 at 17:55 #28383james leeParticipantor when it detects a mobile device it auto puts in landscape mode since in landscape mode the pictures works well.
April 1, 2015 at 18:01 #28384Bill RobbinsModeratorHey 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,
BillApril 1, 2015 at 18:50 #28388james leeParticipantJust updated it but when you put the phone in landscape the top is cutoff.
April 1, 2015 at 18:56 #28389Bill RobbinsModeratorIf 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.
April 2, 2015 at 09:04 #28418pablo talhoukParticipantGreat 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?April 2, 2015 at 09:28 #28421Bill RobbinsModeratorHey 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 -
AuthorPosts
- The topic ‘Mobile front page friendly’ is closed to new replies.