Make Image Full Width in Debut Theme

Solved
Shopify Partner
7 0 3

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!

0 Likes

Success.

Shopify Partner
2522 25 549

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Excursionist
11 1 3

Thank you!

1 Like
Shopify Partner
7 0 3

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?

0 Likes
Highlighted
Shopify Partner
2522 25 549

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Shopify Partner
7 0 3

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

 

P.s. Just sent you an email :)

0 Likes
Shopify Partner
2 0 0

Can you explain where to place this code for use?

0 Likes
Shopify Partner
7 0 3

@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.

1 Like
Shopify Partner
2 0 0

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

0 Likes
Tourist
13 0 0

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

0 Likes