BROOKLYN THEME - DIFFERENT SHOPIFY BANNER IMAGE ON DESKTOP AND MOBILE

[Zucker]

Hey guys! How are you?

I currently inserted a code that would make it possible to show a banner for mobile and another for desktop version.

I found this tutorial here, in case you are interested: https://www.mojoin.com/show-shopify-banner-image/. This tutorial is said for the debut theme, but I did it in Brooklyn and it went well.

It consists of creating two different sections for each version of the banner. If the user is in the mobile version, the desktop banner will not appear and the same in reverse.

I did everything correctly and managed to succeed with the code. Only one detail has not been correct yet, and that is why I am coming to ask for your help.

The banners were not adjusted correctly. I would like to leave them filling the entire space. Desktop version \/

Mobile version \/

Where in this code do I make the change to correct this?

If anyone can help me, I will be very grateful!

[Hardik29418 · Accepted solution]

@Zucker 
Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-1621363350a69113b4 .container-full .img-responsive,
#shopify-section-1621363825204ea7a5 .container-full .img-responsive {
    width: 100%;
}

[Hardik29418]

Hello, @Zucker 

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

[Zucker]

Hello, @Hardik29418 !

Website link: www.zuckerdesign.com.br

password: awpust

Thanks for the help!

[Hardik29418 · Accepted solution]

@Zucker 
Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-1621363350a69113b4 .container-full .img-responsive,
#shopify-section-1621363825204ea7a5 .container-full .img-responsive {
    width: 100%;
}

[Zucker]

Thank you very much, @Hardik29418 ! 

This solved it perfectly!

Thank you for your support with shopify!

[Hardik29418]

@Zucker  Thank you for the update.

[Zucker]

Hi again, @Hardik29418!

I have one more request for you, if you can help me I will be grateful!

I would like to reduce the white space that exists between the top menu and the banner.

The intention is to be able to view the entire banner along with the top menu.

Or do you think that just by reducing the size of the banner, I can fully show it?

Thank you again for your attention!

[Hardik29418 · Accepted solution]

@Zucker 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media only screen and (max-width: 750px) {
#shopify-section-1621363350a69113b4 {
    display: none;
}
}
#shopify-section-1621363825204ea7a5 {
margin-top: 0px !important;
}

[Zucker]

Thank you again, @Hardik29418 !!!

I appreciate your work!!

[sahil2311]

Hey, worked well. I am still struggling to remove the top margin [white space above the image], both on laptop and mobile. Can you please help me with that? I am on Brooklyn theme.