Mobile Home Page Looks Bad

Hi Tim,

I'm wondering why the photos on my home page for Chiha.com on the mobile version look terrible. They're totally chopped off and often don't even see the subject in the photo.

Obviously I picked photos that look great formatted for desktop. Is there a way to have a different version of my homepage strictly for mobile? Or to at least reposition the photos for mobile version?

What can I do? I don't want to just 'pick a photo that works for both'

Edited by

You are using a full-screen billboard in which the photo fills the container / viewing area. So yes, portions will be cropped when viewing on mobile because the ratio of the screen the photo is filling is different.

Something you can try is go to Design -> Edit My Theme, click additonal CSS in the left menu and add this code

@media (max-width: 800px) {
#neatbbslides { height: 50VH !important; }
}

This will make it so it only fills the top half of the screen on mobile (or when the screen resolution is under 800 pixels wide).

Edited by

Ok... a little better but why is there that white gap between the photo and the footer? Can I eliminate that? And how do I make the studio name bigger/fill the screen more with less gap between the name and the menu bar??

Edited by

The white gap is where content would normally display. But since there is no content, it is just blank. I tried everything I could think of to change that just for the home page but I don't have a solution for you.

For the logo on mobile, you can replace the code I posted above with the following

@media (max-width: 800px) {
#neatbbslides { height: 50VH !important; }
#header img { margin-top: 24px; }
}

You may have to adjust the 24 pixel value above.

Edited by

Is there a way to have just the home page background color black?
How do I add a tag line under my main logo?

Edited by

Site Content -> Manage Home Page

Click the Video section and in the video embed area add this code to make the background black
<style>
html,body,#page-wrapper,#main_container { background: #000000; }
</style>

How do I add a tag line under my main logo?
Design -> Header & Footer and type it in under your logo.

Edited by

Ok I tried to fix the same mobile formatting issue of the homepage on Pierre.com with the additional css but it didn't quite work- it made the photos fit better when looking vertical, but still chopped off a little... why? And now when I switch back to horizontal mode on my phone the container's height is tiny and the photos are chopped off in a skinny rectangle.... why!!

Additionally, I'm trying to fix the SAME formatting issue on the Bar Mitzvah page where I'm using the advanced page designer with a full page slideshow. The slideshow fits neither vertically nor horizontally on mobile. Even the row styling is set to 'fit screen width' why!!!

Edited by