Different padding for desktop, tablet and mobile

  • verhoeckx

    (@verhoeckx)


    1 year, 7 months ago

    Hello WordPress Developers,

    If you look at the website Pink Hockey Nijmegen you will see that it looks fine on the desktop, but that it looks terrible on a tablet or a mobile phone. The reason is that that the padding of 14% at the left and right side is also applied to the tablet and the mobile view. How can I set a different padding for the tablet and mobile view (padding of 0px)? I hoped that by changing the view to tablet of mobile I could set a different padding, but that doesn’t seem to be that case. I expect responsiveness is at the core of the WordPress block editor, so there must be a way (without resorting to writing CSS-code)?

    Yours sincerely.

    • This topic was modified 1 year, 7 months ago by verhoeckx.
    • This topic was modified 1 year, 7 months ago by James Huff. Reason: redundant link removed

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator threadi

    (@threadi)

    1 year, 7 months ago

    Try this custom CSS:

    @media (max-width: 781px) {
     :root :where(body) { padding: 0 }
    }

    The theme you have chosen is responsible for the responsive view. This obviously sets unfavourable inner spacing here. If you have any questions about the theme, it is best to contact their support forum here: https://wordpress.org/support/theme/lovebird/

    Thread Starter verhoeckx

    (@verhoeckx)

    1 year, 7 months ago

    Thanks you very much!

    I hoped to achieve the same thing with just the Gutenberg block editor, but if that’s not possible than the only option is to add some CSS.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Different padding for desktop, tablet and mobile’ is closed to new replies.