Solved

Make Custom HTML wider on mobile

printsbyhjr
Excursionist
26 1 1

Hi There,

 

My custom HTML looks tiny on mobile and perfect on web, is there anyway I can make it larger on mobile?

 

Hard to see the difference in the screenshots

 

Screenshot 2024-05-28 at 6.41.51 PM.pngScreenshot 2024-05-28 at 6.42.24 PM.png

Accepted Solution (1)

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

Hi,

 

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

 

<style>


@media (max-width: 800px){
  iframe.visme {
    transform: scale(1.5);
}
}

  
</style>

 

shopify.head.jpg

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 3 (3)

BrainStation23
Shopify Partner
334 54 51

Hi @printsbyhjr 
Can you please clear it , what portion do you went to make larger  on mobile ,
Also please provide your store URL so that we can look on it.

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
printsbyhjr
Excursionist
26 1 1

Hi Brain Station

 

What do you mean clear it?

 

I want to make the cow diagram which is a custom embedded html url is https://taylorrdmeats.co.nz/collections/beef

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

Hi,

 

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

 

<style>


@media (max-width: 800px){
  iframe.visme {
    transform: scale(1.5);
}
}

  
</style>

 

shopify.head.jpg

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites