CSS app-related question

Highlighted
Tourist
10 0 2

Hi all,

I am using an app (Viral Loops) - and the issue is that the app widget is not appearing when holding an iPad horizontally.

Does anyone know where in Shopify code the below / attached is so I can remove the "display: none"?  Attaching picture has the code

  • Marked with green is the viral loops code for the widget
  • Marked with yellow is the CSS rule that hides the container for a specific resolution range affecting the iPad's horizontal but not vertical orientation

Thank you so much.

Keith

code issue.png

0 Likes
Highlighted

That code is probably inside a .css file that's being injected by the APP. 

You've to override the display:none; in your theme's css file.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
10 0 2

@OpenThinking thank you for the quick reply.  Do you mean override it in the "styles.scss.liquid" asset?  I can't find the specific code that is shown in the photo I attached, so struggling to find where / how to override it.

Thank you again. 

0 Likes
Highlighted

Exactly. In your styles.scss.liquid paste it at the very bottom 

copy that very long #s-60f ... ID and add display:block!important

display:block!important

 

if that doesn't work use Javascript:

<script>
const el = document.getElementById("s-60f"); // change s-60f with your ID.
el.style.display = 'block';
</script>

Put this code in the theme.liquid before the closing </body> tag.

 

If this works, please accept my solution and give me thumbs up! Thanks

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
10 0 2

@OpenThinking thank you again for your diligence here.

Unfortunately, that solution did not work.

The first option, to edit the styles.scss.liquid file - messed up the entire format of our password page (and did not change anything for the page with the widget/box).

The second option, pasted below in the theme.liquid, did not work either (nothing happened).  Note that I tried multiple iterationsof the "#s-60f", meaning I did the shorter version (#s-60f3ca33-3c55), the longer (below), etc.

Any other guidance?  Thank you again, I genuinely appreciate your efforts here!

<script>
const el = document.getElementById("#s-60f3ca33-3c55-4fc3-a38d-83e574159111");
el.style.display = 'block';
</script> 

0 Likes
Highlighted

please give me the URL of your store so I can take a better look at it.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
10 0 2

@OpenThinking thank you

Site is: www.cadiasleep.com

I just sent you a DM with the site password 

0 Likes
Highlighted

 

@media (max-width: 1199px) and (min-width: 992px) {
	#s-6056ec95-8c0e-4642-8eb0-c7f34e362c2c {display:block!important}
}

 

let me know if works. If it does, accept my answer and give me thumbs up.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
10 0 2

@OpenThinking Many thanks but still no luck - I'm sorry this is being so difficult!

0 Likes
Highlighted

No worries.

I don't know your setup but if you can remove the id=s-6056ec95-8c0e-4642-8eb0-c7f34e362c2c" from the div that will fix your problem.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes