HTML code on the page displays in mobile only

[BarreCode]

Hi There, 

I have an integration with a software using HTML code inserted in the page.

For some reason, this page is loading only in mobile formatting. 

Oddly, at exactly 150% zoom on chrome, it will show in the desktop view. Anything higher or lower goes to mobile.

Here's the page in question:

https://barrecode.co/pages/chicago-pricing

Here's screenshots of the mobile view and the desktop view that displays ONLY at 150%

 

THANK YOU

[deepaksharma]

Hello @BarreCode  

can you share the code with me here so I can modify it for you?

[BarreCode]

Thank you SO MUCH for your time and reply. 

THIS IS THE HTML CODE ON THE PAGE:

<div data-mariana-integrations="/buy/48717"></div>

THIS IS THE JAVA SCRIPT IN THEME.LIQUID:

<script>
(function () {
// Set tenant name here
var TENANT_NAME = 'thebarrecode.sandbox';

var d = document;
var sA = ['polyfills', 'js'];

for (var i = 0; i < sA.length; i++) {
var s = d.createElement('script');
s.src='https://' + TENANT_NAME + '.marianaiframes.com/' + sA[i];
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
}
})();
</script>
<noscript>
Please enable JavaScript to view the
<a href="https://marianatek.com/?ref_noscript" rel="nofollow">
Web Integrations by Mariana Tek.
</a>
</noscript>

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I have check an see page-width only 726px, you can change It full with or  bigger by add code below in file base.css

.page-width{
   max-width: 100% !important;
}

You can change  100% to param other, ex: 1140px.

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[BarreCode]

I'm super confused! Now that I look in the base.css, there are SO MANY page width codes and I do not know what should be there or why anything is there, or why I should put your code in?

[PageFly-Noah]

Hi @BarreCode  The codes in base.css are the combined code of the theme so there will be many codes. If you don't want to put it in base.css, you can put that code in the theme.liquid file and above tag </head>.Because when the page loads, it will go to theme.liquid first

[BarreCode]

That seemed like it did the trick! THANK YOU!

[PageFly-Noah]

Oke thank you. Have a nice day !

[BarreCode]

Actually, that seems to have made my contact-us forms go a little haywire and they now stretch as WIDE as the page. There's one at the bottom of my home page and one on this page: https://barrecode.co/pages/support

[BarreCode]

Your fix did not have the intended effect. Now all my text and forms stretch right to the edge of the page. 

[PageFly-Noah]

Hi @BarreCode  iam sorry about that, You can try add code it again:

.section-template--15547592573030__main-padding{
   max-width: 100% !important;
}