Reducing left/right padding on mobile

  • Resolved giorgos236

    (@giorgos236)


    3 years, 6 months ago

    Hi there,
    I would like to reduce the left and right padding on pages (not posts) when users are using a mobile device. Could you please point me to the right css adjustment?

    Another question: Is it possible to reduce the vertical spacing between two widgets placed in the footer? In essence reduce the padding between top and middle row for footer widgets?
    Thank you,
    George

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • hannah

    (@hannahritner)

    3 years, 5 months ago

    Hey,
    Thanks for reaching out!
    1. You can use this css to reduce the content padding on mobile:

    @media (max-width: 768px) {
.content-container.site-container {
    padding: 0 10px;
}
}

    2. Try adding this to your css:

    @media (max-width: 768px) {
.site-top-footer-inner-wrap {
    grid-row-gap: 0;
}
}

    Hope that helps!

    Best,
    Hannah

    Thread Starter giorgos236

    (@giorgos236)

    3 years, 5 months ago

    Hi Hannah,
    Thank you for the response. Which css files specifically do I edit to add this content?
    And do I add both code snippets to the same css file? Does the order matter?
    Sorry, I am new at this.
    Thank you,
    George

    photoMaldives

    (@photomaldives)

    3 years, 5 months ago

    Hi @giorgos236
    I’m not on the support team, just a happy Kadence user like you, and I spotted your question.
    The easiest way to add CSS is to use the WP Customizer >>
    > How to Easily Add Custom CSS to Your WordPress Site
    > How to Add Custom CSS
    Hope that helps, and good luck !

    hannah

    (@hannahritner)

    3 years, 5 months ago

    Hi @giorgos236,
    Apologies for not clarifying. Both css snippets can be added to your custom css box in Appearance > Customize > Additional CSS.

    Best,
    Hannah

    Thread Starter giorgos236

    (@giorgos236)

    3 years, 5 months ago

    Hi Hannah,
    It worked like a charm, thank you.
    George

    Thread Starter giorgos236

    (@giorgos236)

    3 years, 5 months ago

    Hi Hannah,
    Following up on that question for padding and margins, is it possible to define a custom page width? Under the Default Page Layout option, I can choose between Narrow and Normal but what about if I want something inbetween? Can I also add some custom code to the Additional CSS option to make that happen?
    Thank you again,
    George

    hannah

    (@hannahritner)

    3 years, 5 months ago

    Hey,
    Yes, if you want something inbetween you would need to use custom CSS. If you specify the widths you’re wanting I would be happy to help with that.

    Kindly,
    Hannah

    Thread Starter giorgos236

    (@giorgos236)

    3 years, 5 months ago

    Hannah,
    Any width would work as I need to test different values to identify the optimal one. Maybe try 1000px?
    Thank you,
    George

    hannah

    (@hannahritner)

    3 years, 5 months ago

    Hey George,
    You can use css like this:

    .content-width-narrow .content-container.site-container, .content-width-narrow .hero-container.site-container {
    max-width: 1000px;
}

    Hope it’s helpful!

    Best,
    Hannah

    Thread Starter giorgos236

    (@giorgos236)

    3 years, 3 months ago

    Hannah,
    Thank you, it worked great!
    George

    hannah

    (@hannahritner)

    3 years, 3 months ago

    Happy to help!

    Best,
    Hannah

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Reducing left/right padding on mobile’ is closed to new replies.