Страница Shopify отображается по-другому на мобильном телефоне, чем на рабочем столе

Question

Некоторое время назад создал целевую страницу Shopify, и на рабочем столе она выглядит хорошо, однако при просмотре на мобильном устройстве все выглядит увеличенным. Я знаю, что это, скорее всего, связано с тем, что рассматриваемая страница была создана с нуля с помощью редактора кода Shopify (так что все это HTML со встроенным CSS), но я изо всех сил пытаюсь понять, как оптимизировать его для мобильных устройств. Ниже приведен код всей целевой страницы.

<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%" />

Спасибо за любую помощь.

Answer 1

У вас нет медиа-запроса? Я хотел бы иметь отдельный файл CSS, где вы также можете добавить медиа-запрос, например:

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

Также вы можете добавить

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

И, кроме того, если это полный код, где HTML-теги head и body?