Minimal theme - full width Custom HTML section

anniemittry
Tourist
10 0 4

Hi there,

 

I have a custom HTML section on my homepage with an image. I'd like to make the image full width on desktop and mobile. Can someone help me figure out what code is needed to do this?

 

Website: annieryan.net

PW: pot

Screenshot below - I'd like to make the blue image full width.

Screen Shot 2021-11-16 at 9.17.38 PM.png

 

Thanks in advance!

Annie

Replies 7 (7)
KetanKumar
Shopify Partner
24919 2497 9033

@anniemittry 

yes please confirm this look!

KetanKumar_0-1637211023309.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
anniemittry
Tourist
10 0 4

@KetanKumar Yes, that's perfect!!

KetanKumar
Shopify Partner
24919 2497 9033

@anniemittry 

thanks for confirm yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-section-163712508506f9f402 {
    position: relative;
    width: 100vw;
    left: -20vw;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
anniemittry
Tourist
10 0 4

Hi @KetanKumar - thank you, that almost worked, but the image doesn't fully extend and is off center. Any fixes?

 

Screen Shot 2021-11-20 at 12.14.36 PM.png

KetanKumar
Shopify Partner
24919 2497 9033

@anniemittry 

its bigger screenshot doesn't work code it can be done change backcode

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
anniemittry
Tourist
10 0 4

I'm not sure I understand. Should I change the code? Or is there no fix?

KetanKumar
Shopify Partner
24919 2497 9033

@anniemittry 

yes, its fix to backend code and customization

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing