How can I hide an ad in the mobile version of Dawn?

Store Design
1

Can I hide this advertisement below in mobile version? Desktop is fine but on mobile it looks terrible.

Thank you all!

DESKTOP

Screenshot 2022-06-09 194452.png
Screenshot 2022-06-09 194452.png878Ă—228 70.9 KB

MOBILE

Screenshot 2022-06-09 194653.png
Screenshot 2022-06-09 194653.png536Ă—195 33.1 KB

2

Hi @iwonder ;

You need to use the media query. I cannot give you the exact code since I do not have your website, but check the code below for reference.

@media only screen and (max-width: 481px) {
.advertisement-section {
display: none !important
}
}
3

Thank you @made4Uo , it’s a banner from Amazon, can I still use this type of media query?

4

Yes, but you have to call the banner, change the “advertisement-section” to the class or id associated to the element.

5

I appreciate your help. Thank you.

<img id="amznBanners_assoc_banner_placement_default_${slotNum}_img"

I’ve tried this:

@media only screen and (max-width: 481px) { .“tried on both ids above” { display: none !important } }

And this one:

@media screen and (min-device-width: 320px) and (max-device-width: 749px) { .“tried on both ids above” { display: none; } }

But still look the same.

Thank you for your time.

6

Forgot to mention… I am adding this code in base.css

7

Does this code have a class? This ID is dynamic

8

This is all it has.

9

Hi @iwonder ,

Try this code.

  1. Go to Admin page > Online store > themes > Actions > Edit code
  2. Open the base.css under the Asset folder then add the code below.
@media only screen and (max-width: 481px) {
div[id^="amznBanners_assoc_banner_placement_default"][id$="_div"]  {
display: none !important
}
}
10

Hi @iwonder ,

We can’t really change the CSS of the elements that has been rendered by an iframe but this is still doable. The code will adjust to the size of the screen instead. I didn’t think that you really want it to be hidden on mobile screen. Please follow the instructions below.

  1. Go to Admin page > Online store > themes > Actions > Edit code
  2. Open the base.css under the Asset folder then add the code below.
#shopify-section-template--16111507439847__1654786710591ef634 iframe {
    width: 100%;
    max-width: 728px;
}
11

Oh I see, so the banner stays there and the screen doesn’t scroll to the length of the banner?

12

@iwonder Hard to tell what I am missing. This is what I see in my side.

made4Uo_0-1654883522356.png
made4Uo_0-1654883522356.png971Ă—196 1.97 KB

13

on mobile version it shows the badge like this. It’s a strange one this isn’t it. I guess that’s why some people stick with adsense etc. Maybe I’ll see if I can get a mobile size version instead.

Screenshot 2022-06-10 185346.png
Screenshot 2022-06-10 185346.png572Ă—197 40.3 KB

14

Hmmm. Weird on why I am not seeing the image. I can adjust the aspect-ratio of the iframe but I just need to see the image.

15

Does it have something to do with javascript?

16

Hi @iwonder ,

I am trying to do this blindly, but change the previous code to this. Hopefully it will fix the issue.

#shopify-section-template--16111507439847__1654786710591ef634 iframe {
    width: 100%;
    max-width: 728px;
    aspect-ratio: 16/2;
    padding: 0 2rem;
    height: auto;
}
17

Can you try to open your website in incognito browser? For some reason the iframe is not rendering

18

Screenshot 2022-06-10 190958.png
Screenshot 2022-06-10 190958.png650Ă—196 33.3 KB

19

Looking better, I think we are getting there. :grinning_face_with_smiling_eyes:

Perhaps because its an iframe the image doesn’t change size?

20

Yes. It would not. Try to play the aspect-ratio (see in bold). You can try “20/2”. Sorry, I am just seeing blank ad.

#shopify-section-template–16111507439847__1654786710591ef634 iframe { width: 100%; max-width: 728px;

aspect-ratio: 16/2;

padding: 0 2rem;

height: auto;

}