Hi
I have a parallax background in a row on the home page of my site which looks fine but when you view it on a phone only the centre of the image shows and the bit I want to see is hidden on the left. The row is full width and I have messed around with padding but have had no success. Is there some custom css that will solve this problem?
Thanks in advance for your assistance.
G
Parallax row not showing correctly in mobile view
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Gokeefe,
Do you have a public URL where we can take a look at what’s going on?
Hi Alex
Please go to wagsdoggybags.ca and view it on a cell phone to see what I mean.
Hi Gokeefe,
Sorry for the delay.
CSS backgrounds must maintain the height of the container they’re applied to regardless of resolution. Even if it means that the browser must clip the sides of the images off to ensure it maintains the height. This is where you’re having issues.
Please open the hero widget and head over to the widget styles sidebar. Open the Layout settings group and set a much lower (or dynamic) mobile padding amount. Then please open the Design and Layout settings group in the widget settings and remove the hard height (consider switching to vh or vmax which will change depending on the size of the viewport). How does that look?
Woo hoo! Thank you so much, that looks much better.