Create different padding on mobile vs desktop

[ignaciosantiago]

Hi,

I had a custom layout for my posts, and I am giving a 40px left and right padding on “the content”.

The problem is that in mobile is too much padding (I would like only 10px). How do I set this in the page builder?

Ex. https://mensandbeauty.com/quemar-grasa-abdominal/

[tristup]

Hi Ignacio,

Thanks for reaching out.
You need to adjust the media screen size in the CSS code, please try the following code into the Element CSS of the Row.

@media (max-width: 480px)
{
    $el.x-row
    {
       padding:40px 10px 0px 10px !important;
    }
}

You can also find the details on the custom media query breakpoints in the following articles:

1. https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
2. https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

Thanks

[ignaciosantiago]

@tristup

@media (max-width: 480px)
{
    $el.x-row
    {
       padding:40px 10px 0px 10px !important;
    }
}

You can also find the details on the custom media query breakpoints in the following articles:

Thanks @tristup, Ill try.

[ignaciosantiago]

@tristup

@media (max-width: 480px)
{
    $el.x-row
    {
       padding:40px 10px 0px 10px !important;
    }
}

I had added the code, but I don´t see any changes

[tristup]

Hi Ignacio,

You need to add the CSS code into the Customize > Element CSS of the specific Row.

Hope it helps.
Thanks

[ignaciosantiago]

You are correct. Thanks.

[prakash_s]

Hello @ignaciosantiago,

Glad that we were able to help you. Please feel free to reach us if you have any more concerns regarding our theme and theme settings.

Thanks

[ignaciosantiago]

One more thing.

The breadcrumbs are not showing correctly in the mobile version. What can I do?

[tristup]

Hi Ignacio,

You need to adjust the font size for breadcrumbs to fit into the smaller devices.

@media (max-width: 480px)
{
    .x-crumbs-list-item 
    {
        font-size:8px !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 really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[ignaciosantiago]

Thanks again.

Is there another way to do it, instead of making the font smaller?

[prakash_s]

Hello @ignaciosantiago,

I checked your given page URL, it seems that you have added padding on the breadcrumbs section that reducing the space.

You can use this custom CSS code so that it gets more space to align.

@media (max-width: 480px)
{
  .e45111-1.x-section {
  padding-left:0;
  padding-right:0;
  }
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks