Ad

Shopify Page Displays Differently On Mobile Than Desktop

- 1 answer

Built a Shopify landing page a while back, and on desktop it looks fine, however, when it's viewed on mobile, everything looks zoomed in. I know this most likely stems from the fact that the page in question was built from scratch with Shopify's code editor (so everything is HTML with inline CSS), but I'm struggling to figure out how to optimize it for mobile. Below is the code for the entire landing page.

<meta charset="utf-8" />
<div class="container" style="display: grid; grid-template-columns: repeat(12, 1fr);">
  <div class="content" style="grid-column: span 5; padding-top: 50px;">
    <p style="font-size: 50px; font-family: 'Ubuntu', sans-serif;"><strong>E&amp;C's Brand Ambassador Program</strong></p>
    <p style="font-size: 40px;"><span>Do you enjoy sharing how much you love your Heavenly Hunks?</span></p>
    <p style="font-size: 23px;"><span>If so, things are getting pretty serious between us and we'd like to take the next step. We typically don't like labels but hunk ambassador has a nice ring, don't you think?</span></p>
    <p style="font-size: 23px;"><span>Enjoy exclusive perks such as:</span></p>
    <ul>
      <li style="font-size: 23px;"><strong>Free Product</strong>: We will satisfy your Heavenly Hunks cravings.</li>
    </ul>
    <ul>
      <li style="font-size: 23px;"><strong>Insider information</strong>: Provide input and taste test new flavors.  Be in the know about new releases and seasonal products</li>
    </ul>
    <ul>
      <li style="font-size: 23px;"><strong>Discount codes  and perks for your network: </strong>We will create special promo codes for your friends, family and followers offering a discount when they buy from us online. <br /><br /></li>
      <li style="font-size: 23px;"><strong>Bragging rights: </strong>Association with a fast growing brand, with a positive story and message!</li>
    </ul>
  </div>
  <div class="form" style="grid-column: span 7; padding-left: 20px; transformx: scale(0.6);"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd7ZZat96_IBMo8eiOrCWFvS0jkZdQKXJXBY1EucosaQ7ZOcQ/viewform?embedded=true" width="640" height="1620" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe></div>
</div>
<img src="https://user-assets-unbounce-com.s3.amazonaws.com/7f3b837c-ab0b-44ad-9174-023129a4e0b5/4de43676-3a0a-485c-a45d-d87af9c7ed96/screen-shot-2018-10-08-at-1-45-11-pm.original.png" width="100%" />

Thanks for any help.

Ad

Answer

Don't you have any media query? I would have a separate css file, where you can also add the media query, like:

@media (max-width: 780px) {
 //Code, that will take place if screen is little
} 

Also, you could add the

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

And, besides, if this is full code, where are html head and body tags?

Ad
source: stackoverflow.com
Ad