I’m developing a WordPress site using a custom theme and need to implement responsive design. The goal is to match the mobile mockups from design files so the site works well across different screen sizes.
Current Approach:
Right now I’m adding CSS rules through the WordPress Customizer’s Additional CSS area. I inspect the rendered HTML elements and write media queries based on what I see in the browser dev tools.
Is using the Additional CSS section the proper method for implementing responsive design in a WordPress custom theme? Should I be modifying the theme files directly instead?
Skip the Additional CSS section and work directly in theme files. I wasted months debugging conflicts between the customizer and my main stylesheet - the cascading order becomes a nightmare when you mix both. Make a mobile.css file in your theme directory and enqueue it through functions.php. Keeps your responsive stuff organized and separate from base styles. I go mobile-first, then add tablet and desktop breakpoints. For your table - forget trying to make that many columns work on phones. Grab a responsive table plugin or switch to cards for mobile. I’ve had way better luck showing table rows as stacked cards for data like yours. Working in theme files gives you full control over both PHP output and CSS styling in one place.
Mobile tables are a nightmare no matter where you put your CSS. Been there way too many times.
Skip the media query headaches and automate the responsive stuff instead. Build a workflow that turns table data into mobile cards based on screen size.
I did this last month with research data that looked terrible on phones. Set up automation to detect viewport and completely restructure the content. No more CSS battles.
The responsive transformation runs automatically every time. Data pulls from WordPress, gets restructured for different devices, and displays perfectly.
Don’t waste time on Additional CSS vs theme files. Just automate the responsive behavior and let it handle itself.
Skip the Customizer’s Additional CSS for custom themes. Put your responsive CSS straight in the theme’s stylesheet instead. Additional CSS works for quick fixes, but it’s a nightmare to maintain when you’re building full responsive layouts. I always create separate SCSS files for different breakpoints and compile them into style.css. Way better for version control and debugging. Btw, looking at your table - you’ll need to restructure that HTML for mobile anyway. Tables are awful on small screens. Switch to divs with CSS Grid or Flexbox instead. Theme files let you change both the structure and styling together, which you’ll need.
yea, i think modifying theme files is better for full control! the customizer is nice for quick stuff, but if you want a solid responsive layout, going into the files will help you nail it down better.