BROOKLYN THEME - DIFFERENT SHOPIFY BANNER IMAGE ON DESKTOP AND MOBILE

Solved
Zucker
Excursionist
21 0 4

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 \/

foto forum 1.png

 

Mobile version \/

foto forum 2.png

 

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

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

 

Accepted Solutions (2)

Accepted Solutions
AlexEffron
Shopify Partner
2468 387 1038

This is an 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%;
}

View solution in original post

AlexEffron
Shopify Partner
2468 387 1038

This is an 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;
}

View solution in original post

Replies 9 (9)
AlexEffron
Shopify Partner
2468 387 1038

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
Excursionist
21 0 4

Hello, @AlexEffron !

Website link: www.zuckerdesign.com.br

password: awpust

 

Thanks for the help!

 

 

AlexEffron
Shopify Partner
2468 387 1038

This is an 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%;
}

View solution in original post

Zucker
Excursionist
21 0 4

Thank you very much, @AlexEffron ! 

This solved it perfectly!

Thank you for your support with shopify!

Zucker
Excursionist
21 0 4

Hi again, @AlexEffron!

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.

 

WhatsApp Image 2021-05-27 at 13.15.34.jpeg

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!

 

AlexEffron
Shopify Partner
2468 387 1038

This is an 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;
}

View solution in original post

Zucker
Excursionist
21 0 4

Thank you again, @AlexEffron !!!

I appreciate your work!!

sahil2311
New Member
1 0 0

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.

sahil2311_1-1637840858690.png