Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #317294
    Mirjam
    Participant

    Hey, I want to build a single page site with different background colors. Therefore I use groups. An outer group with width “full” and an inner group with a self build css-class “test” (because all encapsulated elements stick to full width…):

    .test {
    max-width: 55rem;
    margin-left: auto;
    margin-right: auto;
    }

    Unfortunately – on small screens – the margin of this inner group is A LITTLE BIG bigger than in your general stanard. What can I do?

    Thank you very much for your help (I know this is more a general support than a theme question…)
    Mirjam

    #317295
    Mirjam
    Participant

    PS here is my try out: https://arne-kuehr.de/willkommen-2/

    #317297
    tikaram
    Keymaster

    @mirjam : I checked your site and it looks like you are referring to the padding rather than margin. If you would like to decrease the padding please try adding the following additional css.

    p.has-background {
      padding: 0.5rem;
    }

    Let me know if this helps you out.

    Regards,
    Tikaram

    #317855
    Mirjam
    Participant

    Hey Tikaram, thank you so much for your quick reaction!
    It took me some time to test it…

    No, I don’t mean the padding (thanks for the hint). I mean: If  I have the page on my phone (e.g.), the pink margin to the orange box is wider than the dark grey margin to the yellow standard box…

    How does it work? Thank you!
    https://arne-kuehr.de/willkommen-2/

     

    #317870
    Sakin
    Keymaster

    Hi Mirjam,

    You can add the following CSS in the “Appearance => Customize => Additional CSS” box:

    .has-background.alignfull {
      padding-left: 30px;
      padding-right: 30px;
    }

    Regards,
    Sakin

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘margins’ is closed to new replies.