Responsive Hero Image For Mobile

Hi there, 

I'm currently in the process of redesigning a site using Sytist:

https://www.ianpedlowphotography.com/sept15/

Sytist has been installed in the /sept15/ directory, the site currently uses WordPress for other pages, but I will eventually move Sytist to the root directory (I see there's a FAQ on how to do this) and remove WordPress. 

My main question relates to responsive design, if you could help I'd appreciate it. I have "hero" images at the top of each top level page (see screenshot attached for an example). They don't display well on mobile (being landscape oriented), they are clipped in awkward places. Is there any way (maybe I need a media query?) for this hero section to show a different image on mobile?

As well as that, is there any way to remove the space left (seen on the right of the image on the screenshot) for the scroll bar on the main content of the website on mobile? I've tried some custom css options, but nothing has worked. The headers and footers are full width, but content isn't.

Thanks,

Gareth

The photos in the billboards in the page designer fill the design element so the sides do get cropped on a smaller screen.

Hi Tim,

Thanks for your response, I've managed to get around this by adding two billboard images, one landscape and one portrait. I've controlled the visibility of either image with a css media query, using the randomly generated id as selector.

For the scroll bar on the right, is there anything that can be done to remove the white space left for the bar? The header and footer appear as full width, but not the main content?

Thanks,

Gareth

If you have a horizontal scroll, it is most likely something you have added to the addtional CSS of your theme causing it.

There's no issue with horizontal scroll. There is a white line (I'm assuming it's the scrollbar gutter) down the entire length of the page on mobile, see screenshot above. 

It's not the end of the world if it's there, but I'd prefer if it wasn't. I've tried scrollbar-gutter settings in css, with no results.

This is because of the class that sets the 100VW takes off 9 pixels for the scroll bar to keep from a horizontal scroll. It seems the behavior only on mobile has changed and now it is adding a space. It didn't before the last I messed with that. And doesn't do it on a resized browser on the computer.

You can resolve this by adding this to the additional CSS section of your theme: 

body { overflow-x: clip !important; }

.width100vw { width: 100VW !important; } 

@media (max-width: 800px) {
    .width100vw { width: 100VW !important; } 
}

Hi Tim,

Sorry for the delay in responding. This worked, thanks for your help!

I've moved Sytist to the root, some of our images are still pointing to the old directory, is there any way to refresh the links for all images?

I've fixed the top level pages by re-uploading these images. I just don't want this to affect any galleries that might be live at the moment.

It will only be anything uploaded with the page designer. You can either re-upload the photos as you did, or you would need to make replace changes directly in the database. If you need instructions, let me know.