Custom CSS affecting layout unexpectedly on mobile

  • Unknown's avatar
    crazyreadsite · Member ·

    Hi everyone,

    I’m running into a CSS issue on my WordPress site [https://areaofirregularshapescalc.com/]and could use some guidance.

    I added some custom CSS under Appearance → Customize → Additional CSS to adjust spacing and improve the desktop layout. Specifically, I reduced padding around sections and adjusted the container width.

    Here’s part of what I applied:

    .site-content {
    max-width: 1200px;
    margin: 0 auto;
    }

    .wp-block-group {
    padding: 20px 40px;
    }

    On desktop, everything looks fine.

    However, on mobile:

    • Some sections overflow horizontally.
    • There’s a slight horizontal scroll.
    • The navigation menu spacing looks compressed.
    • A few buttons extend beyond the screen width.

    I suspect the fixed padding or max-width might be interfering with responsive styles, but I’m not sure what’s overriding what. I haven’t edited the theme files directly — this is all via Additional CSS.

    Has anyone run into something similar? Should I be using media queries here, or is there a better approach to modifying spacing without breaking mobile layout?

    Thanks in advance!

  • Unknown's avatar
    james3265166 · Member ·

    The horizontal scrolling and compressed layout on your site are caused by fixed padding and width values that do not scale down for smaller screens. To fix this without losing your desktop design, you should wrap your custom styles in a CSS Media Query—specifically using the rule $$@media (min-width: 992px)$$—which ensures your 1200px container and 40px padding only apply to desktop monitors. By defining separate, flexible rules for mobile that utilize percentage-based widths and reduced padding, you can eliminate the horizontal overflow and ensure your calculator’s buttons and navigation menu remain fully functional and correctly scaled on all mobile devices.

Log in or create an account to reply