Solved

Hide things in mobile version - Dawn

iwonder
Explorer
76 0 10

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

 

 

MOBILE

 

Screenshot 2022-06-09 194653.png

 

 

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
Accepted Solutions (2)
made4Uo
Shopify Partner
3804 713 1124

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;

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

made4Uo
Shopify Partner
3804 713 1124

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
}
}
Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 24 (24)

made4Uo
Shopify Partner
3804 713 1124

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
}
}
Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

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

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
made4Uo
Shopify Partner
3804 713 1124

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

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.

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
iwonder
Explorer
76 0 10

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

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
made4Uo
Shopify Partner
3804 713 1124

Does this code have a class? This ID is dynamic

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

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>

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
made4Uo
Shopify Partner
3804 713 1124

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
}
}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
made4Uo
Shopify Partner
3804 713 1124

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;
}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

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

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
made4Uo
Shopify Partner
3804 713 1124

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

made4Uo_0-1654883522356.png

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

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

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
made4Uo
Shopify Partner
3804 713 1124

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. 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

Does it have something to do with javascript?

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
made4Uo
Shopify Partner
3804 713 1124

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
made4Uo
Shopify Partner
3804 713 1124

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;
}
Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

Screenshot 2022-06-10 190958.png

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
iwonder
Explorer
76 0 10

Looking better, I think we are getting there. 😄

 

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

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
made4Uo
Shopify Partner
3804 713 1124

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;

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
made4Uo
Shopify Partner
3804 713 1124

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;

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

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...

 

Screenshot 2022-06-10 195815.png

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
iwonder
Explorer
76 0 10

*can't...

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★
made4Uo
Shopify Partner
3804 713 1124

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
}
}
Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
iwonder
Explorer
76 0 10

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 

On a league of their own.
______________________________
Made4Uo ★★★★★ / LitCommerce ★★★★★ /
LitExtension ★★★★★
suyash1 ★★★★★