Hi All,
Can anyone assist me in making the images I've placed on the top of my pages full width? I've been able to make the images on the home page full width but can't work out how to do it for the other pages.
One page in particular is the 'Styling Services' page.
Preview link here: https://1pes4j3kwz77gblj-1898479665.shopifypreview.com
Thanks!
Solved! Go to the solution
This is an accepted solution.
Try this CSS code:
.rte p:first-of-type img { width: 100vw; margin-left: calc( 50% - 50vw); max-width: 100vw; }
The selector a bit tricky -- it applies to the image inside first paragraph in the .rte element.
That did the trick! Thanks so much @tim One more quick question, how would I go about adjusting the height of this image so that it's a similar height to the first image on the homepage?
Well, that's a more complex question, because the frontpage section has fixed image height (different for wide and narrow screens), but the width is variable, so the image is cropped as you change the window width.
The image on the "Services page" is output with its natural fixed aspect ratio, so it scales, not cropped when you change the window size.
Replicating the frontpage behaviour will require significant change to the way the page is done.
User | Count |
---|---|
412 | |
199 | |
144 | |
56 | |
43 |