How to remove sides margin and padding in mobile GLOBALLY

Support
#1

I’m observing a lot of important sites removes the margins in mobile.

But how to do it globally?

I guess you probably already know: I’m observing it seems related to the classes: x-container max width

Thanks

Carlos

#2

Hi Carlos,

Thanks for writing in! You can set a custom media query to overwrite mobile CSS. For example, you can add the following CSS into your X -> Theme Options -> CSS area and change the values accordingly.

@media(max-width:480px){
  .x-container.max.width {
    margin: 0;
  }
}

Hope that helps.

#3

Thanks for your helping. I have used your code to evolve the solution:

/* Remove side margins in mobile globally */
@media(max-width:480px){
  .x-container.max.width, .entry-title {
    margin-left: 10px!important;
    margin-right: 5px!important;
    padding-left: 0px!important;
    padding-right: 0px!important;
    width: calc(100% - 15px);
  }
}

I have found an issue I’m not able to solve: the URL seems broken in mobile:

It also seems broken. Maybe it’s because calc? (Just guessing):

Any idea about how to fix it?

Thanks

Carlos

#4

Hi Carlos,

Please add this code to the Global CSS:

a, li {
    word-break: break-all;
}

Hope this helps.

#5

Finally, I’m using:

a, li {
    word-break: break-word;
}

I would find that solution without your help. Thanks!

Carlos

#6

You’re most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.