Make Image Full Width in Debut Theme

[SplashandCo]

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!

[tim · 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.

[SaraSky]

Thank you!

[SplashandCo]

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?

[tim]

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.

[SplashandCo]

Okay I see, much more complicated than it looks. Thank you!

P.s. Just sent you an email :)

[rt5]

Can you explain where to place this code for use?

[SplashandCo]

@rt5 If you go to Online Store and click 'Action' next to your theme and select 'Edit Code'. Then in your code, go to Assets > 'theme.scss.liquid', paste the code at the end of your existing code and click Save.

[rt5]

Ok, I input the code per directions, but it does not seem to work for me??

Are there any other setting I ned to ensure for this to work? i.e. image type, size, placement etc?

Thanks

[Amy_Dunis]

Hi Splash and Co, how were you able to figure this out for the home page? 

I'd really like to make the Custom Content section images full width. Can't figure it out though!

Tah

Amy