Announcement

Collapse
No announcement yet.

Any CSS wizards here?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    Yeah, I did a #page overfow x hidden, which fixed it, but it just shouldn't be there in the first place!

    Comment


      #17
      Originally posted by charlesr View Post
      Yeah, I did a #page overfow x hidden, which fixed it, but it just shouldn't be there in the first place!

      The offending class is ast-row, it has a -20px margin on the left/right, so the width of that element is 100% + 40px and that's causing your space. You could either add 20px horizontal padding to the ast-container element which would counter the -20px margin, or as you've discovered, you can just hide the overflow.

      As for why it's there, it's part of a bootstrap-style grid system, see here for an explanation https://uxplanet.org/how-the-bootstr...s-a1b04703a3b7

      The ast-container class should have 20px horizontal padding, possibly it was removed to make the images go to the edges of the screen? The problem is it's then broken the way the grid works.

      It's always better to solve the problem by removing the cause, rather than trying to fix it by adding additional styles. As you only have one column, a grid isn't needed, so a better way to solve the issue would just be to remove all of the ast-container, ast-row and ast-col classes.
      Last edited by ZipZap; 12-11-2021, 01:51.

      Comment


        #18
        [MENTION=13392]ZipZap[/MENTION] Yeah, that all makes sense, but I have no idea how the code got there. It's a standard theme with no page builder and even removing all custom css doesn't help. Another site I have with the same software doesn't have the same issue. It's driving me insane

        Comment

        Working...
        X