Different Banner Sizes on Mobile vs PC - Dawn Theme

Store Design
,
1

Hey guys,

The link to my site:

www.moomoosteas.com

PW: fohtea

So I have 2 different image banner sizes - I want to use one on mobile and one on PC. If you go to my page you’ll see where I want to implement this in 2 places:

1.) Under my “About Us” section

2.) Under my “Contact” section

So the way I have it set up is on both pages you’ll see 2 identical banners there, just different sizes currently. The top banner on both pages is the one I want on the PC site. The second banner (the larger banner) is what I want on the mobile site. Both of them are listed there simply so you can see the location and determine the CSS to make this happen using the actual images. Havent redrawn the smaller resolution image so it is still blurry, but just want to get the CSS down to make this happen.

Thanks!!!

2

@Answer_Seeker10 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

If it helps you, please like and mark it as the solution.

Best Regards :blush:

1 Like
3

Hi @Answer_Seeker10

Please add this CSS code to Custom CSS of each section.

Add this to Custom CSS of the section you want to display on mobile only

@media (min-width: 750px) {
.banner { display: none; }
}

And this code for desktop section

@media (max-width: 749px) {
.banner { display: none; }
}
4

Thank you very much BSS, worked like a charm!!! Much appreciated!!!