how to centre the home page image for iPhone or other mobile devices

kenji

Hi all,
i have a set of images loaded randomly for my home page. It loads beautifully for desktop screen (almost, my logo jump when you move the page up or down) when I open it on my iPhone, it's off centre. I already asked smugmug, they said they couldn't do anything about it. squarespace can centre image for different device., i have to crop some images to fit for iPhone, but, they look wired on desktop now.,
here is my web site: http://www.kennphoto.com
you will know what i mean when you see it on your smartphone and desktop

thanks for you help
ken

denisegoldberg

very interesting. It appears that if you use a background image that it isn't (fully) resized based on the device or window size.

It's probably not the look you are after, but if you instead place an image on your homepage using a single photo content block it will be resized based on the device. This option does not give you an edge-to-edge photo.

It is possible to use CSS to change your site based on device sizes. A starting point can be seen at Change Features for Mobile or Tablet Browsers. I don't know what element you would need to target to change the background photo though; hopefully someone else will jump in with that information.

mattbramstedt

Kenji, The full screen imagery on your homepage looks amazing. Great photos! Is this set up as a full screen slideshow? Did you have to do any customizations? Interested to know how you accomplished this. I would like to have a full image on my homepage that bleeds to the edge and under my title, but then to still have the capability to scroll down to see more info. I currently have the basics set up on my site, but am not pleased with how much space the site title and menu take up or how the image is not edge to edge on mobile devices. Thanks!

denisegoldberg

@mattbramstedt said:
would like to have a full image on my homepage that bleeds to the edge and under my title, but then to still have the capability to scroll down to see more info.

I wonder if this tutorial would help - https://portal.photom.me/portal/how-to-add-a-full-screen-header-to-your-smugmug-site/.