Shopify themes, liquid, logos, and UX
Can I hide this advertisement below in mobile version? Desktop is fine but on mobile it looks terrible.
Thank you all!
DESKTOP
MOBILE
Solved! Go to the solution
This is an accepted solution.
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: 20/2;
padding: 0 2rem;
height: auto;
}
This is an accepted solution.
Hi @iwonder,
I do not think they will like it. Anyway, you can always hide them on mobile using this code below.
@media only screen and (max-width:750px) {
#shopify-section-template--16111507439847__1654786710591ef634 {
display: none !important
}
}
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
}
}
Thank you @made4Uo , it's a banner from Amazon, can I still use this type of media query?
Yes, but you have to call the banner, change the "advertisement-section" to the class or id associated to the element.
I appreciate your help. Thank you.
<div id="amznBanners_assoc_banner_placement_default_${slotNum}_div">
<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.
Forgot to mention... I am adding this code in base.css
Does this code have a class? This ID is dynamic
This is all it has.
<div id="amznBanners_assoc_banner_placement_default_${slotNum}_div">
<img id="amznBanners_assoc_banner_placement_default_${slotNum}_img" usemap="#amznBanners_assoc_banner_placement_default_${slotNum}_boxmap" src="https://.jpg">
<map name="amznBanners_assoc_banner_placement_default_${slotNum}_boxmap">
<area id="amznBanners_assoc_banner_placement_default_${slotNum}_privacybox" shape="rect" coords="(0,78,728,90)" href="http:.html" target="_top" rel="nofollow">
<area id="amznBanners_assoc_banner_placement_default_${slotNum}_a" shape="rect" coords="0,0,10000,10000" href="https://..." target="_top" rel="nofollow">
</map>
</div>
<script type="text/javascript">
amzn_assoc_ad_spec.isIframe = true;
amzn_assoc_ad_spec.linkCode = "ur1";
window.amznBannerAd(amzn_assoc_ad_spec).init();
var amazon_assoc_ir_f_call_associates_ads = function(map) {
var logTypeStr = "", foresterURL, json;
if(typeof JSON !== 'undefined') json = JSON.stringify(map);
else if(typeof amzn_assoc_utils !== 'undefined') json = amzn_assoc_utils.stringify(map);
else return;
if(typeof map.logType !== "undefined") logTypeStr = "&logType=" + map.logType;
// forester URLs are of format //<end_point>/<api_version>/<channel_id>/<channel_version>/<OPERATION>/
// Depending on operation, we either pass the data in the URI or we pass them as query parameters
// if operation is OP, data must be in query parameters while if operation is TOP,
// data must be in the URI itself
foresterURL = "//fls-eu.amazon-adsystem.com";
foresterURL = foresterURL + "?cb=" + (new Date()).getTime() + logTypeStr + "&p=" + encodeURIComponent(json);
(new Image()).src=foresterURL;
};
var amazon_assoc_ir_f_call = amazon_assoc_ir_f_call_associates_ads;
</script>
</body>
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
}
}
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;
}
Oh I see, so the banner stays there and the screen doesn't scroll to the length of the banner?
@iwonder Hard to tell what I am missing. This is what I see in my side.
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.
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.
Does it have something to do with javascript?
Can you try to open your website in incognito browser? For some reason the iframe is not rendering
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;
}
Looking better, I think we are getting there. 😄
Perhaps because its an iframe the image doesn't change size?
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;
}
This is an accepted solution.
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: 20/2;
padding: 0 2rem;
height: auto;
}
Thank you for your time @made4Uo .
I kept the aspect-ration at 100% and it shows like this, I guess it's the best we can do knowing that we can reduce the iframe image. Probably best, I don't know if Amazon will frown upon changing image sizes...
*can't...
This is an accepted solution.
Hi @iwonder,
I do not think they will like it. Anyway, you can always hide them on mobile using this code below.
@media only screen and (max-width:750px) {
#shopify-section-template--16111507439847__1654786710591ef634 {
display: none !important
}
}
Yes this is better, I'm going to hide it on mobile. Myself, I don't mind seeing some ads etc on desktop but on mobile it's bothersome.
Thank you for your time @made4Uo
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024