Need help fixing margins on mobile

[NadiaCrisisEquipped]

Hello!

I’m not sure why the margins (on mobile version) are so different throughout my site. Would you be able to help me set the same margin size for my entire website?

here are some screenshots to show you an example.

On my shop/ product pages: (I added the black lines)

On one of my pages: (as you can see, the margin is smaller than the product/ shop page)

And when you do any search (using the search feature on the site) there are no margins and the text is going off the screen:

Would you be able to help me diagnose and resolve this issue?

Thanks for your time and help

Nadia

[ruenel]

Hi Nadia,

Thank you for the very detailed post information. When you do a search you are getting a different layout because the search results layout structure has been modified. You may changed it and added a custom CSS code. I have investigated it and that is caused by this custom CSS code:

.search-results article, body.archive article {
    float: left;
    width: 42% !important;
    transform: none !important;
    margin: 1% 2% !important;
}

To get this resolved, please find this custom CSS block:

@media (max-width: 768px) and (min-width: 320px){
  .search-results article, body.archive article {
    width: 100% !important;
    transform: none !important;
  }
}

You will need to update it and set the margin to 0 auto like this:

@media (max-width: 768px) and (min-width: 320px){
  .search-results article, body.archive article {
    width: 100% !important;
    transform: none !important;
    margin: 0 auto !important;
  }
}

Be advised that this is beyond the scope of our support. The codes above are example to get you started with the changes. You have to maintain the code when there are updates to the theme and the plugins.

Thank you for your understanding.

[NadiaCrisisEquipped]

Hello! I tried what you suggested but it doesn’t seem to have worked. Any other ideas?

[tristup]

Hi Nadia,

It is the isotop structure which is adding a margin of -1rem to the container and that is the cause of this issue, you just need to set 0 to get rid of this problem. Please find the sample code below, please add the following code to Theme Options > CSS.

@media (max-width: 768px) and (min-width: 320px){
    .x-iso-container
    {
        margin: 0 !important;
    }
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks

[NadiaCrisisEquipped]

Thanks so much! It worked

[tristup]

Hi Nadia,

Glad that we are able to help you.

Thanks