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.

[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]

@rt5 when you are making your page there's a little switch to see the html code… switch to html, type in: <p> and then switch back to the normal view and add your image. It should work. As the notation under the solution says, it needs to be in rte (rich text?). But that should work for you.

[che_t3]

can i use this to make an image in a Page (im using a page as a promotional page and the image as a promotion but it doesnt seem to use the whole screen) i am trying to make the image full screen width if possible

[Eric-MyVKK]

Hi @tim,

You are so amazing. May I know how can I make all the pictures in my about us page to be full width?

We are using prestige Theme. And only want to make pictures in about us page to be full width instead of fixed wigth.

Thank you in advance!

Eric

[SaraSky]

Thank you!

[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

[DoubleDenim]

Can you please provide more information on exactly where this would be posted in one of the menu pages in the Debut theme? I am not very HTML or CSS savvy. 

[prispuddings]

Hi

I'm trying to do the same thing and make our image a full width image at the top of a blog, but can't seem to do it. PLease can you advise how to do this?

https://pris-puddings.myshopify.com/blogs/breakfast-recipes/white-chocolate-raspberry-muffins