Mobile Responsiveness (Pictures)

[jbowerman]

I think the picture responsiveness is normal and acceptable but my client is asking to see more of the main page full width background photos (family photo at top and family on beach) on mobile like they do on desktop. Not sure it’s possible to do and keep enough behind the buttons and the angled transitions between sections? Any mobile trickery to add in the CSS so they can see more of the photos they have chosen to represent them on mobile?

Thoughts or help?

Thanks,
~Jim

[rad]

Hi Jim,

Thanks for reaching out.

Would you mind providing some screenshot of what they are seeing? I checked and they are still full-width and the layers like button and other element are still overlaying the background. Or is it the height?

Thanks!

[jbowerman]

Sorry if I didn’t explain that very well. The client is unhappy that they only see part of the pictures they have chosen while on mobile as compared to desktop. … So my question was, is there anyway to give them more of their photo and still have enough to flow behind the buttons?

That make more sense?
Thanks!

[friech]

Hi @jbowerman,

Thank you for the clarification, yes it is possible to force fit the background-image on mobile view by adding background-size: 100% 100%; on the style field of the Section. However, that won’t look good as the images will look squeeze.

My take would be is to switch a background-image when the page is viewed on mobile, use an image that is more portrait oriented for mobile, and keep the current landscape one for the desktop view.

@media (max-width: 767px) and (orientation: portrait) {
	#x-section-1 {
		 background-image: url('PORTRAIT IMAGE URL HERE') !important;
	}
}

Add this on the Page > CSS, so it will only affect the home page’s first section.

Hope it helps,
Cheers!