Designing Responsive WordPress Pages with HTML and CSS
In this article, we'll explore how developers can design responsive WordPress pages using HTML and CSS, providing practical tips for both new and experienced developers.
I’ve been thinking a lot about this lately. For years, responsive design has been our go-to solution for crafting web experiences that adapt across devices. But with foldable screens, rollable displays, and dynamic viewports becoming more common, it feels like our old approach is starting to crack under the pressure.
Foldable devices don’t just resize — they reshape. They transform the way we interact with screens. Flipping, folding, and stretching make fixed breakpoints feel rigid and outdated. It’s becoming clear that if we want to create seamless, future-proof designs, fluid design is the way forward.
Let’s start with a quick refresher:
Responsive design adapts to fixed breakpoints, resizing layouts for specific screen sizes.
Fluid design focuses on flexibility. Instead of reacting just to predefined sizes, it adapts continuously to any screen shape or size, no matter how it stretches, folds, or rotates.
Adaptive design is a honorable mention and it consists in having separate layouts designed for each device. Although it still has some use-cases this is to be avoided generally, especially from a SEO perspective as mentioned here:
Serve the same HTML code on the same URL regardless of the users’ device (for example, desktop, tablet, mobile, non-visual browser), but can display the content differently based on the screen size.
For years, responsive design worked beautifully because we were designing for predictable devices. But with foldables (and what’s probably coming next) predictability is no longer on the table.
Foldable screens are introducing design scenarios we haven’t faced before:
Dual states: A foldable phone isn’t just one device but two. Closed, it’s a compact phone. Open it and it becomes a small tablet. Your layout has to work perfectly in both states, as well as during the transitions in between.
Dynamic viewports: The user might interact with your site on one panel, spread it across two, or partially fold the screen to multitask. Unlike fixed-width breakpoints, fluid layouts adapt naturally to these continuous transitions. To be fair, this used to also happen on desktop where resizing the browser window is common practice.
New behaviors: Users are already finding creative ways to interact with foldable (think multitasking apps side-by-side or “tent mode” for media). Your designs need to flex and adapt without breaking.
Moving from responsive to fluid starts in the design phase. Here are some practical steps to rethink how you approach layouts:
Start with the box model
Most websites are structured around rectangular containers, whether it’s buttons, images, or blocks of text. In design tools like Figma, think about how elements will live within these boxes and adjust dynamically:
This approach not only makes your designs more fluid but also simplifies the handoff to developers or even help you to build them yourself (one example that comes to mind is the Figma to Webflow plugin workflow)
Leverage auto-layout in Figma
Figma’s auto-layout feature is a must-use for fluid design. It lets you create designs that automatically resize, stack, or rearrange based on available space. Some tips:
Plan for micro-interactions
Foldables thrive on transitions, and your designs should anticipate these moments:
Prioritize content hierarchy
Fluid design relies on flexible stacking, but not all content is created equal. Start by asking:
For example, in a hero section, your headline might remain prominent while the image scales down or becomes a background element. Plan these shifts during the design phase to ensure a smooth user experience.
Text is fluid, but only up to a certain point. Think about a paragraph squished into a sidebar. Not so easy to read, right? Maybe text heavy layouts should re-consider fluidity, or maybe include hard-stop rules like adding “ch” units as a min-width on a paragraph.
Once you’ve nailed the design, it’s time to bring it to life with CSS. Some key techniques to consider
1. Think in percentages, not pixels
Instead of fixed sizes, use percentages or relative units like em
or vw
. For example:
width: 50%;
max-width: 40ch;
This ensures your containers scale naturally while staying within logical boundaries.
2. Use modern CSS tools
Properties like clamp()
, min()
, and max()
give you even more control over scaling. For example:
font-size: clamp(1rem, 2vw, 2.5rem);
This dynamically adjusts font sizes based on screen width while staying within your chosen limits.
🚧Update 10.01.2025 — Proceed With Caution!🚧
One reader pointed out a possible violation of the WCAG Success Criterion 1.4.4 while using the clamp() function! And he is absolutely right! You should always check your designs adhere to the WCAG. One of my resolutions for 2025 is to actually get more up to date with these standards for accessibility.
Anyway, long story short, should you avoid using the clamp() function? No, not really. Here is a useful resource that can help you make sure your parameters are set up right and don’t result in a red flag at your next accessibility audit. It’s a clamp() calculator born from the fantastic collaboration between these three extraordinary gentlemen: Maxwell Barvian, Zach Barvian and Adrian Roselli. At the bottom of the page there is also a link to documentation on how to achieve the same result with a Tailwind plugin (how great is that?).
*Here is a great article with more context on the subject. Give it a read if you have the time. It’s very interesting. Or not, you do you.*
3. Grid and flexbox for layouts
CSS Grid and Flexbox are ideal for fluid layouts. With a single line like flex-grow: 1;
, you can make elements automatically adjust to available space. Grid adds even more precision, letting you define dynamic rows and columns.
4. Test transitions
Add smooth transitions to create a polished experience. For example, when a screen folds or expands, use transition
properties to make content rearrangements feel natural and seamless.
Foldable devices are just the beginning. Rollable displays, wearable tech, and even augmented reality interfaces are already on the horizon. Imagine designing for a display that rolls out from a smartwatch to a tablet, or a car dashboard that adapts to passengers. These aren’t sci-fi concepts anymore; but real possibilities.
Fluid design equips you to handle these emerging formats by focusing on adaptability, not constraints. It’s about designing systems that respond to whatever comes next because, let’s face it, the screens of tomorrow will be anything but predictable.
It’s no longer enough to design for a checklist of devices. Instead, start designing for flexibility, adaptability, and user needs. By thinking in terms of content flow, hierarchy, and interaction, you can create experiences that feel seamless on any screen. Even the ones we haven’t imagined yet.
Fluid design isn’t just a technical shift, it’s a mindset. It’s about letting go of rigid frameworks and embracing the beauty of uncertainty. The future of design is flowing and dynamic so let’s design to keep up with it.
English isn’t my first language, so to ensure my ideas are communicated clearly and efficiently, I use AI as a helpful writing assistant. However, every sentence in my articles is carefully curated, revised, and refined multiple times to reflect my own knowledge, beliefs, and insights. Rest assured, this isn’t a pile of AI-generated slop — it’s my genuine voice, polished for your reading experience! 😊
Originally published at medium.com
Cristian Ghita
Freelance CX & Brand Design Consultant / Art Director / Based in Europe
In this article, we'll explore how developers can design responsive WordPress pages using HTML and CSS, providing practical tips for both new and experienced developers.
Why did we bother building all these fancy web interfaces, when all we ever needed was a text box?
Did you visit a website and think, “I could build something cooler than that”? Yes, we have all been there. However, if you don’t have a strategy ready to develop your idea into a real, working website, that first spark of inspiration will