Home › Web Design › Responsive Design
RESPONSIVE DESIGN
Responsive Design: Principles, Layouts, Breakpoints & Best Practices
Responsive design helps websites adapt their layouts, content and interactions across desktop, tablet and mobile screens while keeping the experience usable and consistent.
This guide covers the whole subject: the viewport and breakpoints, media queries, fluid layouts, Flexbox and Grid, responsive images and typography, navigation, forms, testing and how it all maps onto Elementor.
- Desktop, tablet and mobile explained in context
- Short, copyable CSS examples
- Practical testing workflow and checklist
THE BASICS
What Is Responsive Design?
Responsive web design is an approach where a website’s layout and interface adapt to the available viewport size and device context, so content stays readable and usable rather than simply shrinking.
In practice it combines several techniques: flexible layouts that reflow, media queries that apply different CSS at different widths, breakpoints where the layout changes, responsive images that avoid overflowing or over-downloading, flexible typography, adjusted spacing, adaptive navigation and components that behave differently depending on space.
A shrunken desktop layout with tiny text isn’t responsive in any useful sense. The test is whether someone can read, navigate and complete tasks comfortably at that size — including with touch instead of a mouse.
Responsive design involves
- Flexible, fluid layouts
- CSS media queries and breakpoints
- Responsive images and media
- Flexible typography and spacing
- Adaptive navigation patterns
- Touch-friendly interaction
- Components that change behaviour
COMPARISON
Responsive vs Non-Responsive Website Design
Fixed-width layouts aren’t automatically broken — a simple page can still be readable on a phone. Problems appear when the design assumes more width than the viewport has, which is when pinching, zooming and sideways scrolling start.
MECHANICS
How Does Responsive Web Design Work?
The browser reports the current viewport width. Your CSS decides what to do with it: which rules apply, how containers size themselves, how many columns a grid has and how components behave. The content stays the same; its presentation changes.
The main tools are media queries for conditional rules, flexible units instead of fixed pixel widths, Flexbox and CSS Grid for layouts that reflow, plus responsive image and typography techniques. Together they let one page serve widths you never explicitly designed for.
CONTEXTS
Designing for Desktop, Tablet and Mobile
These are useful design contexts rather than strict device categories — a narrow desktop window can be smaller than a tablet. Most sites need fewer distinct layouts than people expect; what matters is that the design works across the whole range in between.
Desktop
Large viewport with plenty of horizontal space. Multi-column layouts, wider containers, hover interactions and more visible navigation.
Tablet
Medium viewport. Column counts reduce, spacing tightens, and interaction is usually touch-based despite the larger screen.
Mobile
Small viewport. Content stacks into one column, navigation compresses, and every control needs to work under a thumb.
VIEWPORT
What Is the Viewport?
The viewport is the visible area of a web page in the browser — not the physical screen. Resizing a desktop window changes the viewport without changing the device.
Mobile browsers historically assumed pages were designed for desktop and rendered them at a wide virtual width, then zoomed out. The viewport meta tag tells the browser to use the device’s actual width instead, which is why responsive styles otherwise appear to do nothing on a phone.
The tag is necessary but not sufficient: it enables responsive behaviour, it doesn’t create it. The CSS still has to adapt.
<meta name="viewport" content="width=device-width, initial-scale=1">
Wider → two columns when cards stay readable
Wider still → three columns
Beyond that → cap the container width
Illustrative — decide changes by where your layout stops working.
BREAKPOINTS
What Are Responsive Breakpoints?
A breakpoint is a viewport width at which your layout rules change. The most reliable way to choose them is content-driven: widen the browser slowly and note where the design starts to look wrong — lines get too long, cards get too narrow, a grid leaves awkward gaps. Those points are your breakpoints.
Values such as 320px, 480px, 768px, 1024px and 1200px are commonly cited and appear in many frameworks, but they’re illustrative conventions, not standards. Chasing specific devices is a losing game as new sizes appear; designing around your own content lasts longer. Most sites need only a few breakpoints.
MEDIA QUERIES
CSS Media Queries in Responsive Design
A media query applies CSS only when a condition is true. The example reads: when the viewport is 768 pixels wide or narrower, reduce the container’s padding to 1rem. Anything outside the braces applies everywhere.
Queries can use min-width (apply from this width upwards, the mobile-first direction) or max-width (apply up to this width). They can also respond to other conditions, such as a user’s reduced-motion preference. Keep the number of queries manageable — each one is a rule someone has to maintain.
@media (max-width: 768px) {
.container {
padding: 1rem;
}
}MOBILE-FIRST
What Is Mobile-First Design?
Mobile-first means designing and writing base styles for small screens, then adding rules that enhance the layout as more space becomes available. In CSS that usually means min-width queries layering on top of a simple default.
The discipline is useful because limited space forces content prioritisation and simpler layouts. It also supports progressive enhancement and often means phones download less of the desktop-only complexity.
Mobile-first is not mobile-only. Desktop still gets a full, deliberate layout — it’s just designed afterwards, using the extra space on purpose rather than by default.
APPROACHES
Mobile-First vs Desktop-First Design
Both approaches can produce a good responsive site; they differ mainly in the order of decisions and how the CSS is layered. Desktop-first tends to accumulate more overrides, while mobile-first requires deciding priorities earlier. The right choice depends on the project, team and content.
FLUID LAYOUTS
Fluid Layouts in Responsive Design
A fixed width stays the same regardless of the viewport, which is where horizontal scrolling comes from. A fluid width is expressed as a proportion and fills what’s available. A max-width container combines both: fluid up to a comfortable limit, then it stops growing.
Units matter here. px is absolute and predictable; % is relative to the parent; rem scales with the root font size and respects user preferences; em scales with the element’s own size; vw and vh relate to the viewport. Each suits different jobs — rem for type, % or fractions for layout, px for hairlines and small fixed details — and none is universally correct.
CONTAINERS
Responsive Containers and Content Width
Most sites wrap content in a container with a max-width, auto margins to centre it, a fluid width below that limit and responsive padding so text never touches the screen edge. Consistent gutters keep sections aligned down the page.
The reason for capping width is readability: text lines that run the full width of a wide monitor are tiring to follow. A container isn’t about restricting the design — it’s about keeping line length comfortable while everything else stays flexible.
FLEXBOX
Flexbox and Responsive Web Design
Flexbox arranges items along one axis and is well suited to rows that need to reflow. The key properties are flex-direction (row or column), flex-wrap (allow items onto new lines), justify-content and align-items (distribution and alignment), gap (spacing between items) and flex-basis (an item’s preferred size).
In the example, each card wants at least 260px and can grow. On a wide screen three sit in a row; as space shrinks they wrap to two, then one — without a single media query. Combining flex-wrap with a sensible basis handles many responsive layouts on its own.
.cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
flex: 1 1 260px;
}.grid {
display: grid;
gap: 24px;
grid-template-columns:
repeat(auto-fit, minmax(240px, 1fr));
}CSS GRID
CSS Grid and Responsive Layouts
Grid works in two dimensions, which makes it a natural fit for card grids and page-level structures. grid-template-columns defines the columns, gap the spacing, and minmax() sets a minimum and maximum track size.
The pairing of auto-fit with minmax() is the useful trick: it creates as many columns as fit while keeping each at least 240px wide, collapsing to fewer columns automatically. auto-fill behaves similarly but keeps empty tracks. Flexbox and Grid aren’t rivals — most layouts use both.
TYPOGRAPHY
Responsive Typography
Text needs adjusting as much as layout. Font size, line height, the heading scale, paragraph width and letter spacing all affect whether text stays comfortable. Headings sized for a wide screen frequently overflow or dominate a phone.
Two approaches are common. Breakpoint-based sizing sets explicit sizes at each breakpoint — predictable and easy to reason about. Fluid typography using clamp() scales smoothly between a minimum and maximum: here, never below 2rem, never above 4rem, tracking 5vw in between. Tune the values to your own type scale rather than copying them.
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}img {
max-width: 100%;
height: auto;
}IMAGES
Responsive Images
Two rules prevent most image problems: max-width: 100% stops an image exceeding its container, and height: auto keeps the proportions intact.
Beyond that, srcset offers the browser several versions of an image and sizes tells it how much space the image will occupy, so a phone can download a smaller file. The picture element goes further, allowing different crops or modern formats such as WebP or AVIF for browsers that support them.
Always set width and height attributes so the browser reserves space and the page doesn’t jump as images arrive.
ASPECT RATIO
Responsive Image Aspect Ratios
Consistent ratios keep grids tidy. Without them, cards in a row end up different heights and hero images crop unpredictably as the viewport changes.
aspect-ratio lets a container hold a shape — 16/9 or 4/3 — regardless of width, and object-fit decides how the image fills it: cover crops to fill, contain fits the whole image inside. Together they give predictable cards, hero images, product shots and banners, and because space is reserved in advance, content stops shifting as images load.
NAVIGATION
Responsive Navigation Design
Navigation changes more than any other component. On desktop it’s usually horizontal, with visible links and dropdowns. On mobile it compresses behind a menu button that expands a touch-friendly list.
Collapsing navigation makes prioritisation unavoidable: what stays visible, what moves inside, what drops to the footer. Whatever pattern you choose, keep labels clear, give touch targets room, ensure the menu is reachable and operable by keyboard, keep focus states visible inside the opened menu and indicate the current page. Deeper coverage in website navigation.
FORMS
Responsive Form Design
Paired fields that sit side by side on desktop should stack on mobile; cramming two inputs into a narrow screen makes both hard to use. Inputs generally work best at full container width on small screens.
Keep labels visible above fields rather than relying on placeholders, give the submit button a comfortable size and full width where it helps, space fields so adjacent taps don’t misfire, and show error messages beside the field concerned. Choosing appropriate input types brings up the right mobile keyboard, which removes real friction.
TOUCH
Responsive Buttons and Touch Interaction
Fingers are less precise than cursors, so controls need adequate size and, just as importantly, separation from neighbouring controls. Accessibility guidance does set minimum target sizes, and it’s worth checking the current WCAG criteria rather than relying on numbers passed around informally.
Hover doesn’t exist on touch, so anything revealed only on hover needs an alternative. Focus states must stay visible for keyboard users, and buttons should give immediate feedback when tapped — without a visible response, people tap again.
Touch considerations
- Comfortable target size for fingers
- Clear separation between controls
- No essential content behind hover
- Visible focus states retained
- Immediate feedback on tap
- Full-width buttons where helpful
CARD GRIDS
Responsive Cards and Grid Layouts
Card grids are where responsive behaviour is most visible: four columns become two, then one. The right column count isn’t fixed — it depends on available width, how much content each card holds, whether titles still read well, how the cards are interacted with and what the design is trying to emphasise. Three narrow columns of dense text serve nobody.
TABLES
Making Tables Responsive
Tables assume horizontal space, which small screens don’t have. Three approaches are common: wrap the table in a container that scrolls horizontally on its own, so the page itself never scrolls sideways; stack each row into a card with labels repeated beside each value; or show fewer columns on small screens, keeping the essential ones.
Stacked rows usually read best for comparison content, while scrolling suits dense data where relationships between columns matter. Whichever you pick, the rule is absolute: a table must never cause page-level horizontal overflow.
MEDIA
Responsive Videos and Embedded Content
Embedded players and iframes often arrive with fixed dimensions, which is a common cause of mobile overflow. The fix is to let the container control the width and hold the aspect ratio, with the iframe filling it at 100% width and height.
Apply max-width: 100% to embeds as a safety net, and remember that third-party embeds bring their own scripts and weight — a consideration for mobile connections as much as layout.
ICONS & SVG
Responsive Icons and SVG Graphics
SVG scales cleanly at any size because it’s drawn from coordinates rather than pixels, which makes it well suited to responsive interfaces. A correct viewBox is what allows that scaling; without it, sizing behaves unpredictably.
Icons can be sized and coloured with CSS, so they inherit text size and theme colours. Accessibility depends on the role: a decorative icon beside a text label should be hidden from assistive technology, while a meaningful icon acting alone — a close button, say — needs an accessible name. Keep inline SVG simple; complex illustrations are better as separate files.
SVG checklist
- Include a correct viewBox
- Size with CSS, not fixed attributes
- Let icons inherit colour where possible
- Hide decorative icons from screen readers
- Give standalone icons an accessible name
- Keep inline SVG small
SPACING
Responsive Spacing
Spacing that feels generous on a wide screen often wastes half a phone screen. Section padding usually reduces noticeably on mobile, container gutters shrink but never to zero, card gaps tighten and paragraph spacing stays roughly constant because it serves readability rather than composition.
A spacing scale — a defined set of steps used everywhere — makes this manageable; fluid spacing with clamp() can smooth the transitions. There’s no universally correct system: what matters is that it’s deliberate and consistent.
UI/UX
Responsive UI/UX Design
Responsive design is a usability concern as much as a layout one. Stacking content into one column turns layout into a ranking — whatever comes first gets seen. Navigation hides behind a control, so discovery changes. Interaction becomes touch-based, forms get harder, and visual hierarchy has to survive without side-by-side comparison.
Error and loading states matter more on mobile, where connections are less reliable. Every one of these is a UX decision expressed through responsive rules — see UI/UX design for the wider discipline.
ACCESSIBILITY
Responsive Design and Accessibility
The two overlap without being the same thing. A layout can adapt perfectly and still be inaccessible. What responsive work should protect: readable text at every size, sufficient contrast, full keyboard access including inside collapsed menus, visible focus states, practical touch targets, support for zoom without breaking, content reflow in a single column without loss of information, accessible forms and semantic HTML underneath.
Reflow and zoom are specifically addressed by accessibility guidance, which makes responsive layouts part of accessible design rather than separate from it. This is an introduction to the overlap, not a compliance assessment — see website accessibility.
Preserve across every size
- Readable text without zooming
- Sufficient contrast
- Keyboard access in collapsed menus
- Visible focus states
- Practical touch targets
- Support for browser zoom
- Reflow without losing content
- Accessible form labels
SEO
How Responsive Design Supports SEO
Responsive sites serve one URL and one set of content to every device, which keeps content consistent, avoids splitting signals across separate mobile URLs and simplifies internal linking. Because search engines primarily crawl the mobile version of pages, content that’s hidden or missing on mobile is effectively missing.
Mobile usability, clear page structure and reasonable performance all contribute to page experience. None of this means responsive design determines rankings — relevance, content quality, technical health and competition matter more. It removes obstacles rather than creating advantage. See our website SEO guides.
A conceptual relationship, not a ranking formula.
PERFORMANCE
Responsive Design and Website Performance
A responsive layout doesn’t make a site fast. If a phone downloads the same enormous hero image, the full font set and every desktop script, it simply displays a heavy page in one column.
Performance-conscious responsive work considers image delivery per device, font loading, how much JavaScript and CSS each context needs, layout complexity, third-party embeds and the reality of mobile networks. Conceptually this touches LCP (how soon the main content renders), INP (how quickly the page responds to input) and CLS (whether things shift while loading). Responsive design, mobile usability and performance are related but distinct — see website speed.
Responsive performance factors
- Appropriately sized images per device
- Font families and weights loaded
- Scripts sent to every context
- CSS size and layout complexity
- Third-party embeds
- Variable mobile network conditions
IMAGE DELIVERY
Optimizing Images for Different Devices
Start with correct dimensions — no image should be served far larger than it will ever display. Apply sensible compression and use modern formats such as WebP or AVIF where supported, with a fallback.
srcset and sizes then let the browser choose the best file for the current viewport and screen density. Lazy loading defers images below the fold, but the main hero or LCP image should load immediately. Most CMS platforms generate several sizes automatically; the common mistake is uploading an enormous original and letting CSS shrink it, which saves nothing.
BEST PRACTICES
Responsive CSS Best Practices
Use Flexible Layouts
Prefer layouts that adapt to available space over fixed arrangements.
Avoid Unnecessary Fixed Widths
Fixed dimensions are the most common cause of horizontal overflow.
Use Content-Based Breakpoints
Let the layout tell you where it breaks, rather than chasing devices.
Make Images Flexible
Constrain images to their containers and preserve their ratios.
Use Responsive Typography
Keep text readable and headings proportionate at every size.
Test Real Content
Placeholder text hides the problems long titles and real copy create.
Consider Touch
Design controls for fingers, not just for pointers.
Test Edge Cases
Unusual widths, long words and empty states expose weaknesses.
PITFALLS
Common Responsive Design Mistakes to Avoid
Designing Only for One Screen Size
A layout built for one width rarely survives the others.
Excessive Fixed Widths
Fixed pixel widths on containers and media force overflow.
Horizontal Page Overflow
Usually caused by one wide element; find it rather than hiding it.
Tiny Mobile Text
Text scaled down to fit becomes unreadable.
Oversized Images
Huge files slow mobile visitors and break containers.
Desktop Navigation on Small Screens
Cramped menus are hard to read and harder to tap.
Unusable Forms
Side-by-side fields and small inputs frustrate mobile users.
Poor Touch Spacing
Controls too close together cause mis-taps.
Ignoring Long Content
Long headings and words break layouts that assumed short ones.
Testing Only One Device
Your phone isn't representative of your whole audience.
Overusing Breakpoints
Too many rules become impossible to maintain.
Hiding Important Content on Mobile
Hidden content is effectively missing for many visitors.
Excessive Mobile Overrides
Piles of overrides signal a structural problem in the base CSS.
Ignoring Accessibility
Responsive changes can quietly break keyboard and focus behaviour.
Ignoring Performance
Adapting the layout without adapting the payload helps nobody.
TESTING
How to Test a Responsive Website
Testing at three fixed widths isn’t enough — problems hide between breakpoints. Resizing slowly is the fastest way to find them.
Resize the Browser
Drag slowly through widths, not just at breakpoints.
Test Real Devices
Emulators miss touch behaviour and real performance.
Check Navigation
Open, close and keyboard-navigate every menu.
Check Content
Look for clipping, overlap and unreadable text.
Check Forms
Test inputs, keyboards, validation and buttons.
Check Images
Watch for overflow, distortion and bad crops.
Check Performance
Review loading on a throttled connection.
Check Accessibility
Test keyboard, zoom and focus visibility.
Test Edge Cases
Long headings, long words and unusual widths.
CHECKLIST
Responsive Website Checklist
A review list covering layout, typography, images, navigation, forms, buttons, cards, tables, video, accessibility and performance. It’s a reference rather than an automated testing tool — copy it into your own tracker.
- Desktop layout works
- Tablet layout works
- Mobile layout works
- No horizontal overflow
- Navigation works
- Buttons are usable
- Forms are usable
- Images scale correctly
- Typography remains readable
- Cards adapt correctly
- Tables are usable
- Videos fit the container
- Focus states remain visible
- Content is not unintentionally hidden
- Touch interactions are practical
- Performance is considered
- Accessibility is considered
[ ] Desktop layout works [ ] Tablet layout works [ ] Mobile layout works [ ] No horizontal overflow [ ] Navigation works [ ] Buttons are usable [ ] Forms are usable [ ] Images scale correctly [ ] Typography remains readable [ ] Cards adapt correctly [ ] Tables are usable [ ] Videos fit the container [ ] Focus states remain visible [ ] Content is not unintentionally hidden [ ] Touch interactions are practical [ ] Performance is considered [ ] Accessibility is considered
EXAMPLE
A Practical Responsive Website Layout
One page, three presentations. On desktop, a two-column content section and a four-card grid; on tablet, two cards per row and content that may stack; on mobile, everything in a single column with compact navigation. The header, hero, CTA and footer stay in the same order throughout — only their arrangement changes. Actual layouts depend on your content and goals.
IMAGE PLACEHOLDER
Responsive layout comparison across desktop tablet and mobile
Recommended ratio: 16:9 — replace this container with an Image widget.
ELEMENTOR
Responsive Design in Elementor
Elementor exposes most style controls per device, so the same setting can differ on desktop, tablet and mobile. Rather than relying on version-specific menu names, the concepts to work with are: container widths and how children size themselves, flex direction and wrapping, gaps, padding and margin per breakpoint, per-device typography, image sizing, and visibility controls that hide or show elements at particular sizes.
Elementor also lets you adjust its breakpoint values. Change them deliberately, since everything built earlier assumes the previous ones. Custom CSS remains available for cases the controls don’t cover, but needing a lot of it usually points to a structural problem worth fixing first.
Per-device controls to check
- Container and child widths
- Flex direction and wrapping
- Gaps between items
- Padding and margin
- Typography sizes
- Image sizing behaviour
- Visibility settings
ELEMENTOR PRACTICE
Elementor Responsive Best Practices
Use Containers Properly
Build with real parent and child containers rather than nesting to compensate for layout problems.
Avoid Fixed Widths
Percentage or flexible widths let sections adapt; fixed pixels cause overflow.
Control Padding Responsively
Generous desktop spacing usually needs reducing on tablet and mobile.
Check Typography
Large desktop headings often need smaller mobile sizes to avoid clipping.
Test Images
Confirm images neither overflow nor crop out their important content.
Use Flex and Grid Responsibly
Let cards rearrange and wrap instead of forcing a column count.
Test Every Breakpoint
Desktop settings don't automatically produce sensible mobile results.
WORKFLOW
Responsive Web Design Workflow
The process loops rather than finishing: testing sends you back to rules, and new content exposes assumptions.
Understand Content
Identify the information and functionality the page needs.
Define Layout Structure
Plan containers, sections and components.
Design Mobile Constraints
Decide what's essential when space is limited.
Expand for Larger Screens
Use extra space deliberately, not automatically.
Define Responsive Rules
Decide how each component changes and where.
Build
Implement with flexible layouts and few, purposeful breakpoints.
Test
Check the full range of widths and real devices.
Optimize
Improve performance, usability and accessibility.
Iterate
Fix what testing reveals, then test again.
MOBILE-FIRST EXAMPLE
Example of Mobile-First Layout Thinking
Mobile
One-column content, compact navigation, large readable text and stacked cards. Only what matters most is above the fold.
Tablet
Two-column content where it helps, expanded navigation, moderate spacing and two cards per row.
Desktop
Multi-column layout, fully expanded navigation, larger visual areas and a more horizontal composition.
Notice what doesn’t change: the content and its priority order. Mobile-first is about deciding what matters, then using extra space to present it more richly — not designing two different websites.
PRINCIPLES
Essential Responsive Design Principles
Flexibility
Layouts should adapt to available space rather than assume it.
Content Priority
Important content stays accessible at every size.
Readability
Text remains comfortable to read on any screen.
Consistency
Components stay recognisable as they change shape.
Usability
Interactions remain practical with touch or pointer.
Accessibility
Responsive changes never remove accessible behaviour.
Performance
Don't send unnecessarily heavy resources to every device.
Maintainability
Responsive rules stay understandable and manageable.
APPROACHES
Responsive vs Adaptive Web Design
Responsive design adapts continuously through flexible rules. Adaptive design serves predefined layouts for selected screen contexts. In practice the line blurs: most responsive sites make discrete decisions at breakpoints, and adaptive implementations usually include flexible elements. Neither is universally better — the choice depends on your requirements and how you deliver pages.
USER EXPERIENCE
Why Responsive Design Matters for User Experience
People reach websites from desktops, laptops, tablets and phones — and from browser windows at every width in between, sometimes side by side with another app. Screen size isn’t a property of the visitor; it’s a property of the moment.
Responsive design keeps that moment workable: text stays readable, navigation remains usable, interactions suit the input method, content stays discoverable, forms remain completable and visual hierarchy survives the change in shape. Without it, some visitors get a version of your site that technically loads but practically doesn’t work.
Contexts a single design must serve
- Large desktop monitors
- Laptops and split windows
- Tablets in both orientations
- Phones of many sizes
- Zoomed-in browser views
- Touch and pointer input
CONTEXT
Responsive Design by Website Type
General considerations — actual behaviour depends on each project’s content and requirements. Landing page design has its own particular constraints.
Business Websites
Keep service information, navigation and contact routes accessible at every size.
E-commerce Websites
Product browsing, filters, cart and checkout all need to work under a thumb.
Blogs
Prioritise reading comfort, line length, navigation and related-content discovery.
Landing Pages
Maintain hierarchy and keep the CTA visible without scrolling past the point of decision.
Portfolio Websites
Preserve visual impact while adapting galleries and case study layouts.
SaaS Websites
Support product explanation, onboarding steps and interface previews on small screens.
TOOLING
Tools for Testing Responsive Websites
Tool categories rather than rankings — no single tool covers everything, and real devices remain the final check.
Browser Developer Tools
Resize, inspect layouts, throttle the network and simulate devices.
Device Emulators
Quick checks across common viewport sizes and densities.
Real Devices
The only reliable way to judge touch, performance and rendering quirks.
Performance Tools
Measure loading behaviour and Core Web Vitals on mobile conditions.
Accessibility Testing Tools
Check contrast, focus order, zoom and reflow.
Browser Testing
Verify behaviour across different browsers and versions.
Elementor Responsive Controls
Preview and adjust per-device settings while building.
CODE
Responsive CSS Examples
Three short examples covering flexible images, a conditional rule and fluid type. They’re educational starting points — no snippet makes a site responsive on its own, and values should be adjusted to your design.
img {
max-width: 100%;
height: auto;
}@media (max-width: 768px) {
.container {
padding: 1rem;
}
}h1 {
font-size: clamp(2rem, 5vw, 4rem);
}NEXT TOPICS
Continue Learning Website Design
Website Design Basics
Learn the fundamentals of layouts, typography, colour, spacing and structure.
UI/UX Design
Learn how interface design and user experience affect usability.
Landing Pages
Learn how focused page structures support specific user goals.
Website Navigation
Learn how navigation and information architecture help people move through a site.
Website Accessibility
Learn how to build interfaces more people can use.
Website Design Trends
Explore current design approaches and how to evaluate them.
FAQ
Responsive Design: Frequently Asked Questions
Short answers to the questions people ask most about responsive web design.
Build Better Responsive Websites
Learn how to create flexible, usable website layouts that adapt across desktop, tablet and mobile experiences.