Barberry Theme Header Image not Responsive

Highlighted
Tourist
25 0 3

Hello, I am trying to figure out why the header is not responsive when previewed on different devices. The other section of the homepage is working fine but the main hero image is getting cut out. I have a preview URL like here: https://8cma4rbsigfce4uz-15125894.shopifypreview.com 

Is there a source code or ccs code that I can implement? Please help. 

0 Likes
Highlighted
Shopify Partner
2317 504 655

Hey @matthewpineda 

add code assets/theme.scss.liquid bottom of the file

.container-section {padding: 380px 0px 380px 0px !important;}
@media only screen and (max-width: 774px) {
.container-section {padding: 204px 0px 0px 0px !important;}
.section__bground {background-size: contain;}
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Tourist
25 0 3

Thank you! It worked great but unfortunately, it added more space to all the headers in the sections below. Do you know any CSS code that can counter that? 

0 Likes
Highlighted
Shopify Partner
2317 504 655

Hello , @matthewpineda 

please add CSS and send a screenshot for me I can try to solve your problem.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
25 0 3

Here are a couple of screenshots both in desktop view & mobile view. Please see attached. Screen Shot 2020-07-12 at 7.49.32 AM.pngScreen Shot 2020-07-12 at 7.49.38 AM.png

0 Likes
Highlighted
Shopify Partner
2317 504 655

Hey @matthewpineda

please remove previous or old css class and this new css class 

add code assets/theme.scss.liquid bottom of the file

#shopify-section-1591392685152 .container-section {padding: 380px 0px 380px 0px !important;}
@media only screen and (max-width: 774px) {
#shopify-section-1591392685152 .container-section {padding: 204px 0px 0px 0px !important;}
.section__bground {background-size: contain;}
}


Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
25 0 3

This worked perfectly! Thank you very much. 

1 Like