My HTML Page not optimized on Shopify for PC

Let me explain it to you exactly. As you can see in the image I sent, the entire page is squeezed in the middle and is displayed with incorrect dimensions. Although the first word is written as “Harvex,” half of the “H” is missing. So, it is compressed from the left and right as padding. How can we fix this? Support says " i see all of page and this page hasn’t a problem." Can any coders help me?

Hi,

I can help you fix this. Based on what I see, the issue might be caused by extra padding or a max-width limit on the container. Here’s what you can try:

  1. Check your CSS and look for any padding, margin, or max-width properties applied to the container.

  2. If you’re using a custom theme or builder, ensure the layout settings aren’t restricting the width.

  3. Add this CSS as a quick test:

    body, .container {
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    }

  4. Test it on different screen sizes and browsers to confirm it’s consistent.

Let me know if you need more help!

I create this HTML website to Framer. So this HTML page didn’t have CSS code, i try your suggestion on CSS in Shopify, it’s not working. I’ll share you this HTML website. Can you look quickly and just say me what is the problem brother? Thanks a lot.

https://we.tl/t-GBA2v6iZ46

Hi there,

Since this is a Framer HTML site with no CSS, the issue might be inline styles causing the compression.

  1. Check the HTML for style=“padding” or style=“margin” attributes.

  2. Add a CSS file and link it:

    HTML

    “”

    Add this CSS:

    body, .container { padding: 0; margin: 0; max-width: 100%; overflow-x: hidden; }

  3. Use your browser’s Developer Tools (F12) to inspect elements causing the issue.

Let me know if you need more help!