• Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free
  • English (US)

Responsive design

  • Overview: CSS layout

Responsive web design (RWD) is a web design approach to make web pages render well on all screen sizes and resolutions while ensuring good usability. It is the way to design for a multi-device web. In this article, we'll help you understand some techniques that can be used to master it.

Precursor to responsive design: mobile web design

Before responsive web design became the standard approach for making websites work across different device types, web developers used to talk about mobile web design, mobile web development, or sometimes, mobile-friendly design. These are basically the same as responsive web design — the goals are to make sure that websites work well across devices with different physical attributes (screen size, resolution) in terms of layout, content (text and media), and performance.

The difference is mainly to do with the devices involved, and the technologies available to create solutions:

  • We used to talk about desktop or mobile, but now there are many different types of device available such as desktop, laptop, mobile, tablets, watches, etc. Instead of catering for a few different screen sizes, we now need to design sites defensively to cater for common screen sizes and resolutions, plus unknowns.
  • You should still use the techniques discussed in this article to serve mobile users a suitable experience, as there are still constraints such as battery life and bandwidth to worry about.
  • User experience is also a concern. A mobile user of a travel site might just want to check flight times and delay information, for example, and not be presented with a 3D animated globe showing flight paths and your company history. This can be handled using responsive design techniques, however.
  • Modern technologies are much better for creating responsive experiences. For example, responsive images/media technologies now allow appropriate media to be served to different devices without having to rely on techniques like server-side sniffing.

Introducing responsive web design

HTML is fundamentally responsive, or fluid . If you create a web page containing only HTML, with no CSS, and resize the window, the browser will automatically reflow the text to fit the viewport.

While the default responsive behavior may sound like no solution is needed, long lines of text displayed full screen on a wide monitor can be difficult to read. If wide screen line length is reduced with CSS, such as by creating columns or adding significant padding, the site may look squashed for the user who narrows their browser window or opens the site on a mobile device.

A layout with two columns squashed into a mobile size viewport.

Creating a non-resizable web page by setting a fixed width doesn't work either; that leads to scroll bars on narrow devices and too much empty space on wide screens.

Responsive web design, or RWD, is a design approach that addresses the range of devices and device sizes, enabling automatic adaption to the screen, whether the content is viewed on a tablet, phone, television, or watch.

Responsive web design isn't a separate technology — it is an approach. It is a term used to describe a set of best practices used to create a layout that can respond to any device being used to view the content.

The term responsive design , coined by Ethan Marcotte in 2010 , described using fluid grids, fluid images, and media queries to create responsive content, as discussed in Zoe Mickley Gillenwater's book Flexible Web Design .

At the time, the recommendation was to use CSS float for layout and media queries to query the browser width, creating layouts for different breakpoints. Fluid images are set to not exceed the width of their container; they have their max-width property set to 100% . Fluid images scale down when their containing column narrows but do not grow larger than their intrinsic size when the column grows. This enables an image to scale down to fit its content, rather than overflow it, but not grow larger and become pixelated if the container becomes wider than the image.

Modern CSS layout methods are inherently responsive, and, since the publication of Gillenwater's book and Marcotte's article, we have a multitude of features built into the web platform to make designing responsive sites easier.

The rest of this article will point you to the various web platform features you might want to use when creating a responsive site.

Media Queries

Media queries allow us to run a series of tests (e.g. whether the user's screen is greater than a certain width, or a certain resolution) and apply CSS selectively to style the page appropriately for the user's needs.

For example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 80rem wide. The CSS for the .container selector will only be applied if these two things are true.

You can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes. The points at which a media query is introduced, and the layout changed, are known as breakpoints .

A common approach when using Media Queries is to create a simple single-column layout for narrow-screen devices (e.g. mobile phones), then check for wider screens and implement a multiple-column layout when you know that you have enough screen width to handle it. Designing for mobile first is known as mobile first design.

If using breakpoints, best practices encourage defining media query breakpoints with relative units rather than absolute sizes of an individual device.

There are different approaches to the styles defined within a media query block; ranging from using media queries to <link> style sheets based on browser size ranges to only including custom properties variables to store values associated with each breakpoint.

Find out more in the MDN documentation for Media Queries .

Media queries can help with RWD, but are not a requirement. Flexible grids, relative units, and minimum and maximum unit values can be used without queries.

Responsive layout technologies

Responsive sites are built on flexible grids, meaning you don't need to target every possible device size with pixel perfect layouts.

By using a flexible grid, you can change a feature or add in a breakpoint and change the design at the point where the content starts to look bad. For example, to ensure line lengths don't become unreadably long as the screen size increases you can use columns ; if a box becomes squashed with two words on each line as it narrows you can set a breakpoint.

Several layout methods, including Multiple-column layout , Flexbox , and Grid are responsive by default. They all assume that you are trying to create a flexible grid and give you easier ways to do so.

With multicol, you specify a column-count to indicate the maximum number of columns you want your content to be split into. The browser then works out the size of these, a size that will change according to the screen size.

If you instead specify a column-width , you are specifying a minimum width. The browser will create as many columns of that width as will comfortably fit into the container, then share out the remaining space between all the columns. Therefore the number of columns will change according to how much space there is.

You can use the columns shorthand to provide a maximum number of columns and a minimum column width. This can ensure line lengths don't become unreadably long as the screen size increases or too narrow as the screen size decreases.

In Flexbox, flex items shrink or grow, distributing space between the items according to the space in their container. By changing the values for flex-grow and flex-shrink you can indicate how you want the items to behave when they encounter more or less space around them.

In the example below the flex items will each take an equal amount of space in the flex container, using the shorthand of flex: 1 as described in the layout topic Flexbox: Flexible sizing of flex items .

Note: As an example, we have built a simple responsive layout above using flexbox. We use a breakpoint to switch to multiple columns when the screen grows, and limit the size of the main content with max-width : example , source code .

In CSS Grid Layout the fr unit allows the distribution of available space across grid tracks. The next example creates a grid container with three tracks sized at 1fr . This will create three column tracks, each taking one part of the available space in the container. You can find out more about this approach to create a grid in the Learn Layout Grids topic, under Flexible grids with the fr unit .

Note: The grid layout version is even simpler as we can define the columns on the .wrapper: example , source code .

Responsive images/media

To ensure media is never larger than its responsive container, the following approach can be used:

This scales media to ensure they never overflow their containers. Using a single large image and scaling it down to fit small devices wastes bandwidth by downloading images larger than what is needed.

Responsive Images, using the <picture> element and the <img> srcset and sizes attributes enables serving images targeted to the user's viewport and the device's resolution. For example, you can include a square image for mobile, but show the same scene as a landscape image on desktop.

The <picture> element enables providing multiple sizes along with "hints" (metadata that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. Using <picture> along with max-width removes the need for sizing images with media queries. It enables targeting images with different aspect ratios to different viewport sizes.

You can also art direct images used at different sizes, thus providing a different crop or completely different image to different screen sizes.

You can find a detailed guide to Responsive Images in the Learn HTML section here on MDN.

Other useful tips:

  • Always make sure to use an appropriate image format for your website images (such as PNG or JPG), and make sure to optimize the file size using a graphics editor before you put them on your website.
  • You can make use of CSS features like gradients and shadows to implement visual effects without using images.
  • You can use media queries inside the media attribute on <source> elements nested inside <video> / <audio> elements to serve video/audio files as appropriate for different devices (responsive video/audio).

Responsive typography

Responsive typography describes changing font sizes within media queries or using viewport units to reflect lesser or greater amounts of screen real estate.

Using media queries for responsive typography

In this example, we want to set our level 1 heading to be 4rem , meaning it will be four times our base font size. That's a really large heading! We only want this jumbo heading on larger screen sizes, therefore we first create a smaller heading then use media queries to overwrite it with the larger size if we know that the user has a screen size of at least 1200px .

We have edited our responsive grid example above to also include responsive type using the method outlined. You can see how the heading switches sizes as the layout goes to the two column version.

On mobile the heading is smaller:

A stacked layout with a small heading size.

On desktop, however, we see the larger heading size:

A two column layout with a large heading.

Note: See this example in action: example , source code .

As this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. They can be used to tweak any element to make it more usable or attractive at alternate screen sizes.

Using viewport units for responsive typography

Viewport units vw can also be used to enable responsive typography, without the need for setting breakpoints with media queries. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw , it will always relate to the size of the viewport.

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone .

There is a solution, and it involves using calc() . If you add the vw unit to a value set using a fixed size such as em s or rem s then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

Note: See an example of this in action: example , source code .

The viewport meta tag

If you look at the HTML source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

This viewport meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

Why is this needed? Because mobile browsers tend to lie about their viewport width.

This meta tag exists because when smartphones first arrived, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 980 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad.

By setting width=device-width you are overriding a mobile device's default, like Apple's default width=980px , with the actual width of the device. Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, but the device is saying it is 980px wide, that user will not see your narrow screen layout.

So you should always include the viewport meta tag in the head of your documents.

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are using. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

  • Touch events provide the ability to interpret finger (or stylus) activity on touch screens or trackpads, enabling quality support for complex touch-based user interfaces.
  • Use the pointer or any-pointer media queries to load different CSS on touch-enabled devices.
  • CSS-Tricks Guide to Media Queries

Enjoy 2 months of free hosting with an annual WordPress plan. 30-day money-back guarantee.

The Beginner’s Guide to Responsive Web Design (Code Samples & Layout Examples)

With an internet increasingly accessed from mobile devices, it’s no longer enough to have a static website design that only looks good on a computer screen.

Not to mention, you also have to consider tablets, 2-in-1 laptops, and different smartphone models with different screen dimensions when coming up with a design.

So slapping your content into a single column and calling it quits isn’t going to cut it.

With responsive web design , you can make sure your website looks its best on cell phones, tablets, laptops, and desktop screens.

And that improvement in user experience means higher conversions and business growth.

This guide will give you everything you need to know about responsive website design, including definitions, a step-by-step walkthrough, examples, and more.

What Is Responsive Web Design?

Responsive design is an approach to web design that makes your web content adapt to the different screen and window sizes of a variety of devices.

For example, your content might be separated into different columns on desktop screens, because they are wide enough to accommodate that design.

If you separate your content into multiple columns on a mobile device, it will be hard for users to read and interact with.

Responsive design makes it possible to deliver multiple, separate layouts of your content and design to different devices depending on screen size.

Responsive Web Design vs Adaptive Design

The difference between responsive design and adaptive design is that responsive design adapts the rendering of a single page version. In contrast, adaptive design delivers multiple completely different versions of the same page.

responsive adaptive design

They are both crucial web design trends  that help webmasters control how their site looks on different screens, but the approach is different.

With responsive design, users will access the same basic file through their browser, regardless of device, but CSS code will control the layout and render it differently based on screen size. With adaptive design, there is a script that checks for the screen size, and then accesses the template designed for that device.

Why Responsive Design Matters

If you’re new to web design, development , or blogging , you might wonder why responsive design matters in the first place.

The answer is simple. It’s no longer enough to design for a single device. Mobile web traffic has overtaken desktop and now makes up the majority of website traffic , accounting for more than 51% .

Mobile, tablet, desktop market share

When over half of your potential visitors are using a mobile device to browse the internet, you can’t just serve them a page designed for desktop. It would be hard to read and use, and lead to bad user experience.

But that’s not all. Users on mobile devices also make up the majority of search engine visits .

Mobile search traffic

Finally, over the last few years, mobile has become one of the most important advertising channels. Even in a post-pandemic market, mobile ad spending is growing 4.8% to $91.52 billion.

Whether you choose to advertise on social media or use an organic approach like YouTube SEO , the vast majority of your traffic will come from mobile users.

If your landing pages aren’t optimized for mobile and easy to use, you won’t be able to maximize the ROI of your marketing efforts. Bad conversion rates will lead to fewer leads and wasted ad spend.

Are WordPress Sites Responsive?

Whether or not WordPress sites are responsive depends on the theme of your WP site. A WordPress theme  is the equivalent of a template for a static website and controls the design and layout of your content.

If you use a default WordPress theme, like Twenty Twenty , the design is responsive, but since it’s a single-column design, you might not realize it when looking at it on different screens.

If you use another WordPress theme, you can test if it’s responsive or not by comparing how it looks on different devices or using Chrome Developer Tools.

The Building Blocks of Responsive Web Design

In this section, we’ll cover the underlying foundation for responsive website design and its different building blocks.

CSS and HTML

The foundation of responsive design is the combination of HTML and CSS , two languages that control the content and layout of a page in any given web browser.

html vs css

HTML mainly controls the structure, elements, and content of a webpage. For example, to add an image to a website , you have to use HTML code like this:

You can set a “class” or “id” that you can later target with CSS code .

You could also control primary attributes such as height and width within your HTML, but this is no longer considered best practice.

Instead, CSS is used to edit the design and layout of the elements you include on a page with HTML. CSS code can be included in a <style> section of a HTML document, or as a separate stylesheet file .

For example, we could edit the width of all HTML images at the element level like this:

Or we could target the specific class “full-width-img” by adding a period in front.

You can also control the design beyond just height, width, and color . Using CSS like this is how you make a design responsive when you combine it with a technique called media query.

Media Queries

A media query is a fundamental part of CSS3 that lets you render content to adapt to different factors like screen size or resolution.

media queries - responsive web design

It works in a similar way to an “if clause” in some programming languages , basically checking if  a screen’s viewport is wide enough or too wide before executing the appropriate code.

If the screen is at least 780 pixels wide, “full-width-img” class images will take up 90% of the screen and be automatically centered by equally wide margins.

Fluid Layouts

A fluid layout is an essential part of modern responsive design. In the good old days, you would set a static value for every HTML element, like 600 pixels.

A fluid layout relies instead on dynamic values like a percentage of the viewport width.

fluid layout - responsive web design

This approach will dynamically increase or decrease the different container element sizes based on the size of the screen.

Flexbox Layout

While a percentage-based layout is fluid, many designers and web developers felt it was not dynamic or flexible enough. Flexbox is a CSS module designed as a more efficient way to lay out multiple elements, even when the size of the contents inside the container is unknown.

A flex container expands items to fill available free space or shrinks them to prevent overflow. These flex containers have a number of unique properties, like justify-content, that you can’t edit with a regular HTML element.

flexbox justify

It’s a complicated topic, so if you want to use it in your design, you should read CSS Tricks’ flexbox guide .

Responsive Images

The most basic iteration of responsive images follows the same concept as a fluid layout, using a dynamic unit to control the width or height. The sample CSS code we covered earlier already accomplishes this:

The % unit approximates to a single percentage of the width or height of the viewport and makes sure the image remains in proportion to the screen.

The problem with this approach is that every user has to download the full-sized image, even on mobile.

To serve different versions scaled for different devices, you need to use the HTML srcset attribute in your img tags, to specify more than one image size to choose from.

WordPress automatically uses this functionality for images included in posts or pages.

When you’re attempting to create a responsive design for your website, the loading speed should be a top priority .

Pages that load in 2 seconds have an average 9% bounce rate , while pages that take 5 seconds lead to a 38% bounce rate.

Your approach to responsiveness must not block or delay your page’s first render any more than it needs to.

There are several ways you could make your pages faster. Optimizing your images , implementing caching , minification, using a more efficient CSS layout, avoiding render-blocking JS , and improving your critical rendering path are all great ideas you should consider.

Kinsta customers have access to a quick and easy way to accomplish this by using the   code minification feature that is built right into the MyKinsta dashboard , allowing customers to enable automatic CSS and JavaScript minification with a simple click.

You could also try to implement Google AMP for your mobile pages, but in our Google AMP case study , our mobile leads dropped by a whopping 59%.

Common Responsive Breakpoints

To work with media queries, you need to decide on the “responsive breakpoints” or screen size breakpoints. A breakpoint is the width of the screen where you use a media query to implement new CSS styles.

Common screen sizes

  • Mobile: 360 x 640
  • Mobile: 375 x 667
  • Mobile: 360 x 720
  • iPhone X: 375 x 812
  • Pixel 2: 411 x 731
  • Tablet: 768 x 1024
  • Laptop: 1366 x 768
  • High-res laptop or desktop: 1920 x 1080

If you choose a mobile-first approach to design, with a single column and smaller font sizes as the basis, you don’t need to include mobile breakpoints — unless you want to optimize the design for specific models.

mobile first - responsive web design

So you can create a basic responsive design with just two breakpoints, one for tablets and one for laptops and desktop computers.

Bootstrap’s Responsive Breakpoints

As one of the first, and most popular, responsive frameworks, Bootstrap led the assault on static web design and helped establish mobile-first design as an industry standard.

As a result, many designers to this day still follow Bootstrap’s screen-width breakpoints.

bootstrap responsive breakpoints

They use media queries to target landscape phones (576px), tablets (768px), laptops (992px) and extra large desktop screens (1200px).

How to Make Your Website Responsive

Now that you’re familiar with the building blocks, it’s time to make your website responsive.

Set Your Media Query Ranges (Responsive Breakpoints)

Set your media query ranges based on the unique needs of your design. For example, if we wanted to follow the Bootstrap standards for our design, we would use the following media queries:

  • 576px for portrait phones
  • 768px for tablets
  • 992px for laptops
  • 1200px for large devices

Size Layout Elements with Percentages or Create a CSS Grid Layout

The first and most important step is to set up different sizes for different layout elements depending on the media query or screen breakpoint.

The number of layout containers you have will depend on the design, but most websites focus on the elements listed below:

  • Wrapper or Container

common website layout

Using a mobile-first approach , you can style the main layout elements like this (with no media query for the basic styles for mobile phones):

In a percentage-based approach, the “float” attribute controls which side of the screen an element will appear on, left, or right.

If you want to go beyond the basics and create a cutting-edge responsive design, you need to familiarize yourself with the CSS flexbox layout and its attributes like box-sizing  and flex .

Implement Responsive Images

One way to make sure that your images don’t break is merely using a dynamic value for all pictures, as we covered earlier.

But that won’t reduce the load placed on your mobile visitors when they access your website.

Make sure you always include a srcset that with different sizes of your photo when you add images to your pages.

Doing this manually can be quite time-consuming, but with a CMS like WordPress , it automatically happens when you upload media files .

Responsive Typography For Your Website Text

The main focus of responsive web design is on the responsiveness of the layout blocks, elements, and media. Text is often treated as an afterthought.

But for a truly responsive design, you should also adjust your font-sizes appropriately to match screen size.

The easiest way to do so is to set a static value for font-size, like 22 px, and adapt it in each media query .

2 scatter plot font size opt

You can target multiple text elements at the same time by using a comma to separate each one.

Test Responsiveness

First, you want to test whether your site is mobile-friendly with Google’s mobile-friendly test . Simply enter the URL of your website and click the “test URL” button to get the results.

Google’s Mobile-Friendly Test

Don’t worry if it takes a while to fetch your site. That doesn’t reflect your page loading speed.

If you followed the steps outlined in this article, it should say that you have a mobile-friendly website.

Then you want to test your site on multiple screen sizes with a tool like Chrome developer tools .

Press CTRL + Shift + I on Windows computers, or Command + Option + I on Macs to open the relevant device view. From here, you can select the mobile device or tablet of your choice to test the responsiveness of your design.

Testing responsive layouts in Chrome

There are a couple of questions you want to answer when going through this process.

  • Does the layout adjust to the correct amount of columns?
  • Does the content fit well inside the layout elements and containers on different screens?
  • Do the font sizes fit each screen?

CSS Units and Values for Responsive Design

CSS has both absolute and relative units of measurement. An example of an absolute unit of length is a cm or a px. Relative units or dynamic values depend on the size and resolution of the screen or the font sizes of the root element.

PX vs EM vs REM vs Viewport Units for responsive design

  • PX – a single pixel
  • EM – relative unit based on the font-size of the element.
  • REM – relative unit based on the font-size of the element.
  • VH, VW – % of the viewport’s height or width.
  • % – the percentage of the parent element.

A new web designer or developer should probably stick with pixels for text because they are the most straight-forward unit of length in CSS.

But when setting the width and max-width of images and other elements, using % is the best solution. This approach will make sure the components adjust to the screen size of every device.

Responsive Design Examples

Below we will cover a few examples of responsive web design from different industries — and learn from what they do right and wrong.

1. Online Newspaper: New York Times

nyt responsive design

On desktop, the NYT layout reminds you of a traditional newspaper, crowded with visuals and different rows and columns of content. There seems to be a separate column or row for every category of news.

On mobile, it conforms to the single-column standard and also adjusts the menu to be in the accordion format to be easier to use.

2. Blog: The Art of Non-Conformity

chris guillebeau responsive design 2

Chris Guillebeau’s blog “The Art of Non-Conformity” has been going strong for over a decade. While the design isn’t the most cutting edge, it’s responsive and adapts the two-column sidebar and main content layout to a single-column design on mobile devices.

3. Ecommerce: Amazon

amazon responsive design 1

Amazon is a global leader in ecommerce for a reason, their user interface is perfectly fluid across all devices.

Their tablet layout simply removes some of the white space and adds a scrollable section of icons to fit more content into a smaller package.

Their mobile layout brings it into a single column, focusing on the essentials, like recent purchase history, rather than the different section link icons from their main homepage.

4. Video Site: YouTube

youtube responsive design

YouTube on mobile, tablet, and laptop

The core of YouTube’s homepage design is a flexible grid of videos that are relevant to each user. On tablets, the number of columns in each row goes down to three. On mobile, it’s reduced to a single-column design.

The mobile version also moves the main menu to the bottom of the screen, closer to the thumbs of their smartphone users. This simple move improves navigation and UX.

5. Online Magazine: Wired

wired responsive design

Wired’s approach to responsive web design is focused on implementing a single-column layout on all smaller screens, starting with tablets.

It’s a basic layout but makes it easier to draw user attention to top stories and their CTA to subscribe .

There are a lot of different elements that go into responsive web design. Without a basic understanding of HTML and CSS, it can be easy to make mistakes.

But through familiarizing yourself with the different building blocks, analyzing the examples with web dev tools, and testing as you go using the sample code, you should be able to make your website responsive without any major issue.

If that sounds too much to achieve, you can always either hire a WordPress developer or simply make sure your theme is already responsive.

how to make your html responsive

Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter .

Related Articles and Topics

how to make your html responsive

16 Fastest WordPress Themes (Based on Thorough Testing)

how to make your html responsive

What Is the Average Web Developer Salary? Here’s What Data Says

  • Digital Marketing
  • Web Development

Gravatar for this comment's author

I like to design my responsive websites with breakpoints that are based on the content of the website rather than on device sizes. For example, sometimes 4 columns need to change to 2 columns at a width when the 4 columns become too narrow to read. That width may not correspond to a specific device breakpoint. This is also true of font sizes. Sometimes you need to adjust a font size when it starts being unreadable which may be at a width that is not based on a device breakpoint. Creating breakpoints based on design/content rather than devices gives the reader, the consumer of the content, a better experience.

Gravatar for this comment's author

Thanks a lot for this awesome article. Your ideas are absolutely fantastic. Really helpful for the beginners for web design .

Gravatar for this comment's author

Great examples have been mentioned here..!! Mobile responsive design… Its became a new trend as mobile users are increasing day-by-day. Yes it is good to optimize our site for mobile users for better user experience..

Gravatar for this comment's author

Very enriching article! Just want I was looking for!

Gravatar for this comment's author

Wow one clear, near and on point article about responsive design. Thank you so much

Gravatar for this comment's author

Unfortunately Chrome DEV tools doesn’t account for viewport size, but only for screen size. So if the simulated mobile screen in the DEV tools is using “pixel merging”, say it simulates 1 pixel out of 4 real device pixels, setting the real device pixel size in the Chrome DEV tools will not give you the real view on that mobile screen. So before testing for a phone with a certain resolution, you should check what is the viewport size for that phone screen, and use it instead of the device resolution, to be able to simulate that screen accurately in the Chrome DEV tools.

Leave a Reply Cancel reply

By submitting this form: You agree to the processing of the submitted personal data in accordance with Kinsta's Privacy Policy , including the transfer of data to the United States.

You also agree to receive information from Kinsta related to our services, events, and promotions. You may unsubscribe at any time by following the instructions in the communications received.

DZone

  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
  • Manage My Drafts

Modernizing APIs : Share your thoughts on GraphQL, AI, microservices, automation , and more for our April report (+ enter a raffle for $250!).

DZone Research Report : A look at our developer audience, their tech stacks, and topics and tools they're exploring.

Getting Started With Large Language Models : A guide for both novices and seasoned practitioners to unlock the power of language models.

Managing API integrations : Assess your use case and needs — plus learn patterns for the design, build, and maintenance of your integrations.

  • The Best Programming Languages for Kids
  • Optimization Frontend App by Performance Testing
  • Elevating Web Design: The Art and Science of CSS Nesting and the Cascade
  • Demystifying the ‘Class’ Attribute in HTML: A Comprehensive Guide With Examples
  • Mastering Spring: Synchronizing @Transactional and @Async Annotations With Various Propagation Strategies
  • How To Use LangChain4j With LocalAI
  • Top 5 Trends for Data Streaming With Kafka and Flink in 2024
  • Disaster Recovery and High Availability Solutions in SQL Server

Using CSS/HTML to Make a Responsive Website in 3 Easy Steps

Jean-Baptiste Jung user avatar

Join the DZone community and get the full member experience.

Today, a website must not look good only on a desktop screen, but also on tablets and smartphones. A website is responsive if it is able to adapt to the screen of the client. In this article, I’ll show you how to easily make a website responsive in three easy steps.

1 – The layout

When building a responsive website, or making responsive an existing site, the first element to look at is the layout. When I build responsive websites, I always start by creating a non-responsive layout, fixed at the default size. For example, CatsWhoCode.com default width is 1100px. When I’m pleased with the non-responsive version, I add media queries and slight changes to my code to make the code responsive. It’s way easier to focus on one task at a time.

When you’re done with your non-responsive website, the first thing to do is to paste the following lines within the <head> and </head> tags on your html page. This will set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching.

It’s now time to add some media queries. According to the W3C site , a media query consists of a media type and zero or more expressions that check for the conditions of particular media features. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. In other words, media queries allows your website to look good on all kinds of displays, from smartphones to big screens.

Media queries depends of your website layout, so it’s kinda difficult for me to provide you a ready to use code snippet. However, the code below is a good starting point for most websites. In this example, #primary is the main content area, and #secondary the sidebar.

By having a look at the code, you can see that I defined two sizes: The first have a maximum width of 1060px and is optimized for tablet landscape display. #primary occupies 67% of its parent container, and #secondary 30%, plus a 3% left margin.

The second size is designed for tablet portrait and smaller sizes. Due to the small sizes of smartphones screens, I decided to give #primary a 100% width. #secondary also have a 100% width, and will be displayed below #primary .

As I already said, you’ll probably have to adapt this code a bit to fit the specific needs of your website. Paste it on your site .css file.

Once done, let’s see how responsive your layout is. To do so, I use this awesome tool created by Matt Kersley.

A responsive layout is the first step to a fully responsive website. Now, let’s focus on a very important aspect of a modern website: medias, such as videos or images.

The CSS code below will ensure that your images will never be bigger than their parent container. It’s super simple and it works for most websites. Please note that the max-width directive is not recognized by older browsers such as IE6. In order to work, this code snippet have to be inserted into your CSS stylesheet.

Although the technique above is efficient, sometimes you may need to have more control over images and display a different image according to the client display size.

Here is a technique developed by Nicolas Gallagher . Let’s start with the html:

As you can see, we used the data-* attribute to store replacement images urls. Now, let’s use the full power of CSS3 to replace the default image by one of the specified replacement images if the min-device-width condition is matched:

Impressive, isn’t it? Now let’s have a look to another very important media in today’s websites, videos.

As most websites are using videos from third parties sites such as YouTube or Vimeo, I decided to focus on the elastic video technique by Nick La . This technique allows you to make embedded videos responsive.

And now, the CSS:

Once you applied this code to your website, embedded videos are now responsive.

3 – Typography

The last step of this tutorial is definitely important, but it is often neglected by developers when it comes to responsive websites: Typography.

Until now, most developers (including myself!) used pixels to define font sizes. While pixels are ok when your website has a fixed width, a responsive website should have a responsive font. Indeed, a responsive font size should be related to its parent container width, so it can adapt to the screen of the client.

The CSS3 specification included a new unit named rems . They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems .

As rems are relative to the html element, don’t forget to reset html font size:

Once done, you can define responsive font sizes as shown below:

Please note that the rem unit is not recognized by older browers, so don’t forget to implement a fallback.  That’s all for today – I hope you enjoyed this tutorial!

Published at DZone with permission of Jean-Baptiste Jung , DZone MVB . See the original article here.

Opinions expressed by DZone contributors are their own.

Partner Resources

  • About DZone
  • Send feedback
  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone
  • Terms of Service
  • Privacy Policy
  • 3343 Perimeter Hill Drive
  • Nashville, TN 37211
  • [email protected]

Let's be friends:

  • Responsive Design

Learn Responsive Design

A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone. Go back

Welcome to Learn Responsive Design!

A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.

Introduction

Find out where responsive design came from.

Media queries

Adapt your designs to different screen sizes using CSS media queries.

Internationalization

Prepare your designs for different languages and writing modes.

Macro layouts

Design page layouts using a choice of CSS techniques.

Micro layouts

Build flexible components that can be placed anywhere.

Make your text legible and beautiful, no matter where it appears.

Responsive images

Give your visitors the most appropriate images for their devices and screens.

The picture element

Exercise more creative control over your images.

Use SVG for scalable responsive iconography.

Adapt your designs to match user preferences such as a dark mode.

Accessibility

Ensure that your website is available to everyone.

Interaction

Prepare your pages for different input mechanisms; mouse, keyboard, and touch.

User interface patterns

Consider some common UI elements that adapt to different screen sizes.

Media features

A round-up of all the ways that media features let you respond to devices and preferences.

Screen configurations

Prepare your content for devices with multiple screens.

Conclusion and next steps

Further resources to help you take your next steps.

how to make your html responsive

10 best practices for responsive web design

Whether you’re redesigning or starting from scratch, our 10 tips on responsive web design will help you create a site that shines on any device.

how to make your html responsive

As mobile devices have become the primary way people experience the web, responsive site designs are now the norm.

The good news is you no longer need extensive knowledge of HTML, CSS, or other complicated coding languages to build a responsive website. You're good to go as long as you have a savvy visual web development platform to build with. 

Whether you’re running a responsive redesign project or starting from scratch, these tips will help you build a site that works seamlessly on various screen sizes and different devices. But first, let’s understand what a responsive website is and how it works.

What is a responsive website?

We consider a website design responsive when there’s a consistent desktop to mobile experience. A responsive website will modify its appearance and interactive elements depending on the device and screen size used to view it. At the core of these sites is a modern design methodology known as  responsive web design (RWD) that adapts pages to the user’s screen dimensions.

RWD uses CSS to offer varied style attributes — like font, images, and menus — based on the device, screen size, orientation, colors, and other features of the viewing device. CSS also facilitates optimal use of a device's viewport (the visible area available on a screen) and media queries, allowing web pages to modify depending on the viewport width and website layout.

Let’s jump into the 10 best practices you can incorporate to optimize your website’s responsive design. 

1. Pay attention to your navigation

Adopting responsive web design has a huge impact on site navigation. Let’s take a look at  Microsoft’s website from 2007 : 

A screenshot of Microsoft’s desktop website from 2007, with light blue background font, a large image advertising Window’s Server 2008, and a navigation box on the right side.

All of the website’s pages fit into the navigation on the right-side navigation, the font in the bottom right corner is low-contrast and tough to read, and the graphics are clunky.

Now, consider Microsoft’s website in 2022:

 A screenshot of Microsoft’s 2022 desktop website, with a promotion for a Surface Pro 9 dominating the screen and a series of navigation links across the top left of the screen

And since you're designing for smaller mobile screens, your design needs to work within these new limitations.

A screenshot of the mobile view of Microsoft’s 2022 website, which boasts the same advertisement as the desktop version and a hamburger menu in the top left corner.

When Microsoft’s site transfers to a mobile device, the ad is optimized for the screen size and the navigation turns into a hamburger menu for ease of use. 

You’ll generally only have room for 4-5 core links in your navigation which affects your site’s  entire content strategy and information architecture. Be sure those links represent the places people are most likely to look for, then offer opportunities to dig deeper.

Try to simplify your navigational choices and use icons paired with text , in-page links, collapsible menus, and dropdowns to get people where they need to go. You can also improve your navigation by making the core pages easy to navigate. Use alt text for images, pick fonts that are widely available and easy to read, and use inclusive language .

But what about sidebars? Well, those can be tricky. Desktops give us a ton of horizontal space to work with, making it relatively easy to throw extra links in a sidebar. But responsive design requires designers to create the simplest path for someone to take without distractions. Eliminating sidebars is one way to accomplish this.

A screenshot of Creation Processes’ desktop home page

Don’t make your site’s visitors scroll too much. Remember that long-scrolling pages make getting back to the navigation bar a pain. Instead, use a simple sticky navigation bar fixed to the bottom or top of the screen or include a back-to-top button. For one-hand friendliness, go with bottom navigation on mobile.

2. Plan your content organization before you design

Designing a website without a strong sense of its content structures is like picking out a frame before you’ve created a painting. You need to know how you’ll organize the content to see the bigger picture.

Content and design flourish when developed in tandem. Both elements give each other meaning, so it’s important to organize your content clearly. Let’s look at an example from Arobase Creative .

An image of an interactive infographic with a light-pink and blue color combination.

As you can see, the designers at Arobase Creative have blended content and design together in a well-organized infographic. They could have used bullet points or paragraphs for the text but chose to enhance the content with complementary colors and sans serif text . This is a great example of organizing content in a way that’s comprehensible, attractive, and easy on the eyes. Plus, the creativity of the design shows they know what they’re doing.

Content organization is more than just copying and pasting blocks of text to see where they’ll fit on a page. Instead, view your content as the story you’re trying to tell your audience. That’s precisely what Arobase Creative has done.

Make a list prioritizing the messages you want to convey, and figure out how these ideas flow from one to the next. Use responsive infographics — bonus points if they’re interactive — to make large pieces of information easy to digest, or take inspiration from high-quality templates when designing. You can create your navigation bar to lead your audience through the website so that the overall user experience is seamless and enjoyable for the visitor. 

3. Start your design with mobile in mind

More than half of the internet’s global traffic comes from mobile phones . These devices are leading the market, regardless of their brand or operating system. 

They’re also becoming more powerful and can handle responsive web designs quite well. It’s easier to whip your phone out of the pocket and scroll through a few web pages than open your laptop, sign in, and open a browser.

Keeping this in mind, ensure you design your website with a person using a mobile phone at the forefront of your user demographic. This means making your website mobile-first and prioritizing the use of the max width of space available, making navigation simple and easy to use with breakpoints, and uploading pictures with high resolution that still allow fast loading speeds.

The mobile version of your website doesn’t need to be a fixed width, either. A mobile-friendly website can use adaptable CSS media queries, multiple templates, and frameworks that usually require code. Webflow does all the heavy lifting for you so that you don’t have to break a sweat over mobile optimization . 

4. Add call-to-action buttons

A mobile screenshot of a page on quickoption.com displaying a bright green ‘Download Now’ button

A call-to-action (CTA) is a crucial component of any webpage. Links and buttons with a call to action serve as waypoints, instructing users where to go next. People could find it difficult to understand how and where they must make a purchase or join a program without clear CTAs.

Your CTA button should pop out from the page in color, style, size, and shape. Generally, circular, square, and rectangular elements are the most recognizable . Getting too creative with the shape of your buttons can confuse someone on the site, so stick with familiar forms. Your button size also affects how people can recognize or click it, so make sure it’s finger-friendly for touchscreen devices. Add generous space around important buttons and text links to limit misclicks. 

When it comes to color, try not to use too many to avoid overwhelming your visitors. Choose 2-3 from your brand’s color palette for the site, and use something bright to draw attention to your CTA. Drop shadows, gradients, and other dimension-lending stylistic additions can also guide people toward clicking the buttons you want them to click.

5. Use only the words you need

Desktops allow for more text, but that isn't always a good thing. With mobile devices, you must work within the confines of smaller screens. This means writing economically, ensuring that every word helps move your story forward.

Use crisp copy that conveys your website’s purpose, and use typography wisely . Keep fonts cohesive with your brand identity and limit font combinations to avoid overwhelming anyone trying to read the site.

how to make your html responsive

Discover the processes and tools behind high-performing websites in this free ebook.

6. Typography matters even more on smaller screens

Most people are pressed for time and don't have the mental capacity or patience to learn everything about your company. This is why website readability is essential. Use typography in a way that lets visitors consume as much information as they can in the shortest time possible. If you’re looking for fonts we recommend these 10 Google fonts .

Use a highly legible font, especially for vital bits of text like navigation labels. Tiny type on any screen is hard to read, so use larger font sizes to improve readability. Something in the range of 16px for body copy should be easy to read on desktop and mobile. Increase or decrease size depending on the font’s design (though we’d recommend using the em unit of measurement instead, starting at 1 to 1.25em).

Spacing is also an important factor on smaller screens. Too much will leave your text floating in space, and too little will stack your words like pancakes. Ensure your line height is set to an appropriate amount. Usually, something in the 1.25 to 1.5 range will work well, but individual typefaces vary, so it’s better to experiment first.

Throughout the design process, check your text on different devices to see how your line height affects the text’s presentation.

When designing with mobile in mind, remember that a larger font may push the essential content you want someone to read further down on a page. Consider all the other design methods in your toolkit to add drama: vary font weights, use all caps or all lowercase, or add color to differentiate content sections from other elements on the page.

7. Embrace negative space

Negative space, often known as white space , is essentially the section of a website's layout that is left vacant. All the elements on a screen need some breathing room, which is what negative space provides. A full screen of loud graphics and large text might overwhelm someone trying to find simple information and drive them away from your content.   

You walk a fine line when creating a responsive design using negative space. Yes, you want to take a minimalistic approach to content and navigation — but negative space should enhance the website’s visuals while increasing the readability and user experience for a visitor. 

You also don’t want to omit anything vital. Use negative space to create breaks in your design and highlight those areas of content you don’t want anyone to miss.

8. Create and test a responsive prototype

Knowing how your designs translate to different screens is essential. It's also crucial to understand how it functions during real-world use.

Static prototypes will take you part of the way, but eventually, you’ll need a functional prototype to help you understand how the site will work and feel. Test your prototype on the actual devices to ensure the website works without any problems.

This will save you time and hassle — and spare you snarky tweets reporting that your site’s “broken” on mobile. Using a visual web development platform can help streamline this process. 

9. Stick to the fast lane with responsive images

Keep your website moving with images that load quickly on every device. To do this, you'll need responsive images that help you increase your web pages' loading speeds. A website's capacity to load quickly is becoming an increasingly important component of SEO , user experiences, and bounce rate. If it’s taking too long, someone might leave the site to find their information somewhere that loads quicker.

A common problem with responsive design is that while images visually scale on smaller devices, they’re still 3MB in size and slow load times to a crawl. Responsive images are a powerful and effective way to work around this.

A series of six graphics in decreasing order of size showing the silhouette of a wolf howling.

10. Power your layouts with flexbox

Flexbox is a CSS3 layout module that ensures your layout’s responsiveness translates fluidly to different devices. This is important because Flexbox helps create responsive websites without having to resort to complex code and attributes in CSS. It takes the pain out of building creative layouts like split screens, sidebars, and hero covers and lets you create popular design patterns like equal-height modules and Z-pattern feature lists in a snap.

To use flexbox , simply give a parent container the display setting of “flex,” then select how the children within that container distribute themselves. It’s relatively simple in principle but allows for robust flexibility.

Responsive design has changed the web for the better

The vast space allotted to desktop designs often used to lead to unnecessary graphics and content detracting from a site’s core message. Now, the popularity of mobile devices and tablets overhauled how we design and navigate websites. 

Ultimately, how we design and interact with a website depends on the device we view it on. Responsive design lets us strip away what we don’t need so everyone finds what they need faster. 

Designing a website doesn’t have to be difficult, and you don’t have to know code, either — all you need is a tutorial and some inspiration. Once you’ve conquered the learning curve, you’ll be making tons of beautiful websites in no time.

Subscribe to Webflow Inspo

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Related articles

how to make your html responsive

The guide to responsive web design in 2024

Your go-to resource for understanding responsive web design and how to do it well.

how to make your html responsive

How to successfully design for mobile web

Creating a mobile-responsive website helps you reach users where they are. Read tips for designing for mobile web and crafting content for smaller screens.

how to make your html responsive

A guide to mobile-first design: 5 best practices for designing for mobile

Discover why mobile-first design is essential for present and long-term success and how to create mobile-friendly layouts for improved user experiences.

how to make your html responsive

Navigation bar design best practices

Follow these best practices for navigation bar design and learn about the principles of usability, feasibility and accessibility for web design.

how to make your html responsive

New feature: Responsive images

Webflow now automatically scales and optimizes inline images for every device, at every resolution. Find out why — and how — we did it.

how to make your html responsive

8 email marketing best practices

Email remains one of the best and most effective ways to communicate with customers. Make sure you're communicating right with these 8 tips.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Transforming the design process at

  • Interactions
  • Localization
  • Figma to Webflow Labs
  • DevLink Labs
  • Feature index
  • Accessibility
  • Webflow vs WordPress
  • Webflow vs Squarespace
  • Webflow vs Shopify
  • Webflow vs Contentful
  • Webflow vs Sitecore
  • Careers We're Hiring
  • Merch store
  • Accessibility statement
  • Terms of Service
  • Privacy policy
  • Cookie policy
  • Cookie preferences
  • Freelancers and agencies
  • Marketplace
  • Libraries Beta
  • Hire an Expert
  • Made in Webflow
  • Become an Expert
  • Become a Template Designer
  • Become an Affiliate

Popular Tutorials

Popular examples, learn python interactively.

  • CSS Introduction
  • Include CSS in a Webpage
  • CSS Essential Concepts

Combinators & Selectors

  • CSS Selectors
  • CSS Pseduo Class Selector
  • CSS Pseduo Element Selector
  • CSS !important
  • CSS Units: em, px, rem etc.
  • CSS Font Family
  • CSS Font Size
  • CSS Font Weight
  • CSS Font Stretch
  • CSS Text Color
  • Use Custom Fonts in CSS

Text Formatting

  • CSS Text Decoration
  • CSS Text Transform
  • CSS Text Spacing
  • CSS Text Shadow
  • CSS Text Align
  • CSS Text Align Last
  • CSS Vertical Align
  • CSS Direction
  • CSS Background
  • CSS Background Color
  • CSS Background Image
  • CSS Background Repeat
  • CSS Background Attachment
  • CSS Background Size
  • CSS Background Clip
  • CSS Background Origin
  • CSS Background Position
  • CSS Opacity/Transparency

CSS Gradients

  • CSS Gradients (Linear Gradient)
  • CSS Radial Gradient
  • CSS Borders
  • CSS Border Style
  • CSS Border Width
  • CSS Border Color
  • CSS Border Shorthand
  • CSS Border Image
  • CSS Border Radius
  • CSS Box Model
  • CSS Height/Width
  • CSS Box Sizing
  • CSS Padding
  • CSS Outline
  • CSS Box Shadow

Display and Position

  • CSS Display
  • CSS Position
  • CSS z-index
  • CSS Overflow

CSS Float Layout

  • CSS clear float
  • CSS Creating Layout Using float
  • CSS calc() Function

CSS Flexbox

  • CSS Flex (Flexbox)
  • CSS Flex Container
  • CSS Flex items
  • Creating Responsive Layouts using Flexbox
  • CSS Grid Container
  • CSS Grid Item
  • Create an image gallery using CSS Grid

CSS Responsive Design

Responsive web design.

  • CSS Media Query: @media
  • Mobile First Design

CSS Transition, Transform, and Animations

  • CSS 2D Transform
  • CSS 3D Transforms
  • CSS Transitions
  • CSS Animations

Styling Elements

  • CSS Buttons Styling
  • CSS Forms Styling
  • CSS Tables Styling
  • CSS Lists Styling
  • CSS Icons Styling
  • CSS Img Styling

CSS Projects

  • Technical Documentation Page
  • Portfolio Site

Responsive web design is an approach to web development aimed at creating websites that adapt and respond to different screen sizes and devices.

The primary goal of responsive design is to provide an optimal and consistent user experience across a wide range of platforms, including desktop computers, laptops, tablets, and smartphones.

The following diagram shows how responsive web design allows the layout to adapt to various user devices without compromising user experience.

CSS Layout in Various Devices

  • CSS Media Queries

Media queries are CSS rules that apply specific styles and layout adjustments based on various conditions, such as screen size, resolution, orientation, or other device characteristics.

Media queries are essential for creating responsive and adaptive web designs that look and function optimally across different devices and screen dimensions.

Let's look at an example.

Here, the CSS enclosed in a media query will be applied only when the minimum width of the device is 768px.

  • Responsive Column Layout

Column layout refers to the arrangement of content on a webpage in multiple columns. This allows us to organize and present information in a structured and visually appealing manner.

There are several column layout configurations: 3-column, 2-column, and 1-column layouts.

Let's see how we can make responsive column layouts.

Browser Output

CSS Responsive Three Column Layout

In the above example, the flex property allows us to create three column layouts.

This type of layout is generally used for desktops and laptops to arrange different types of content in different columns.

For example, a three-column layout might be used in a news website to display headlines in one column, featured articles in another, and advertisements in the third.

Now, using flex properties and media queries, we can change the above three-column layout to a two-column layout.

CSS Responsive Two Column Layout

The above CSS styles change the three-column layout to a two-column layout for tablets and smaller devices.

Finally, for mobile devices with smaller widths, we can set the following styles to achieve a single-column layout.

CSS Responsive Single Column Layout

In this way, media queries are used to create a responsive web layout for the various devices.

Table of Contents

  • Introduction
  • HTML Tutorial
  • HTML Exercises
  • HTML Interview Questions
  • HTML Attributes
  • HTML Examples
  • HTML Cheat Sheet
  • HTML Color Picker
  • HTML Formatter
  • HTML Projects

Related Articles

  • Solve Coding Problems
  • HTML Introduction
  • HTML Editors
  • HTML Basics
  • HTML Comments
  • HTML Elements
  • HTML Heading
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Quotations
  • HTML Colors
  • HTML Images
  • HTML Favicon
  • HTML Tables
  • HTML Ordered Lists
  • HTML Unordered Lists
  • HTML Description Lists
  • HTML Block and Inline Elements
  • HTML Iframes
  • HTML File Paths
  • HTML Layout
  • HTML Computer Code Elements
  • HTML5 Semantics
  • HTML Entities
  • HTML Symbols
  • HTML Emojis
  • HTML Charsets
  • HTML URL Encoding

HTML Responsive Web Design

  • HTML5 Video

HTML Graphics

  • SVG Tutorial

HTML Tutorial References

  • HTML Tags - A to Z List
  • HTML Attributes Complete Reference
  • HTML Global Attributes
  • HTML5 Complete Reference
  • HTML5 MathML Complete Reference
  • HTML DOM Complete Reference
  • HTML DOM Audio/Video Complete Reference
  • SVG Element Complete Reference
  • SVG Attribute Complete Reference
  • SVG Property Complete Reference
  • HTML Canvas Complete Reference

HTML Responsive Web Design refers to the changes in web pages to automatically resize, hide, show, shrink, and expand various HTML elements. These changes will depend on the devices and the screen sizes of the device. The web pages will automatically adjust according to the screen size used.

In this article, we will demonstrate how we can create HTML responsive web design so that it will adjust according to the screen size of the device used.

Table of Content

  • Using HTML Viewport meta tag for Responsive Web Design
  • Using Responsive Images
  • Using Responsive Texts
  • Using CSS media Queries
  • Using Responsive Layouts

Approach 1: Using HTML Viewport meta tag for Responsive Web Design

HTML Viewport represents the area of display or screen visible to the user. It varies from device to device. This approach set the available screen width as the 100% width of the web pages and adjusts content accordingly to make it responsive.

Example: In this example, we will use the HTML viewport meta tag for responsive pages.

Approach 2: Using Responsive Images

Responsive images are just a part of responsive websites. Images that can change their dimensions, scaling them up or down, according to the browser width, are  responsive images . Images should be responsive to improve users’ experience on various devices of different sizes.

Example: In this example, we will use the image width property to occupy 100% of the screen width.

Approach 3: Using Responsive Texts

In this approach, we will define font sizes in terms of %, vw, vh, etc to get the responsive size of texts. This approach will auto-adjust the text size up to a certain limit and when the limit is reached it will start justifying the content to set it within the available width.

Example: This example demonstrates Responsive Web Design by making Responsive Texts.

Approach 4: Using CSS media Queries

The  Media query  in CSS is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types. The breakpoint specifies for what device-width size, the content is just starting to break or deform.

Media queries can be used to check many things:

  • width and height of the viewport
  • width and height of the device
  • Orientation

Example: In this example, we will use screen size in a media query to make the webpage responsive according to different breakpoints.

Output: Background color and font size transition for width less than 800px.

Note: Sometimes, this method doesn’t show the correct output on Google Chrome.

Approach 5: Using Responsive Layouts

The responsive layout module of CSS includes the following properties.

Using flexbox property

In this approach, we will use CSS display property to make the page responsive. Display layouts like flexbox, inline, blocks, and grids can be used to make the design responsive. CSS flexbox property auto adjusts the content (no. of columns in a row) according to the screen width as shown in the output gif.

Example: In this example, we will use display type flexbox to show adjust items automatically according to the screen size.

Using CSS Grids

This approach uses a CSS display grid to create a 2D layout along with other grid options. It allows us to decide the number of columns we want to keep and instead of rearranging the columns like Flexbox, it adjusts the content within individual column elements.

Example: In this example, CSS Grid layout is used to arrange contents in 2D form, i.e., rows and columns.

Using CSS MultiColumn

It is similar to grids. CSS MulotiColumn allows developers to choose the properties like no. of columns, width, gap, etc. for each column. These values remain unchanged but the content inside the columns adjusts.

Example: This example uses CSS MultiColumn for content division into a specific number of columns.

Please Login to comment...

  • HTML-Questions
  • Web Technologies

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

I Tried 10 Responsive Web Design Tools to See if They’re Worth It (2024 Results & Recommendations)

Published: February 12, 2024

Of all the pieces in a web designer’s tech stack, one that has quickly become indispensable is responsive design tools. Armed with one of these, you can get ahead of questions from stakeholders about why a website doesn’t look right on certain screen sizes, and ensure any design you’re working on is built to be responsive right from the start.

woman using a responsive web design tool on a laptop

I design websites mostly for small businesses that want a simple and straightforward way to communicate their offerings in their local area. The thing about most small businesses these days is that a huge majority of their traffic comes from mobile searches. So responsive design is absolutely paramount and top of mind.

Free Download: 77 Examples of Brilliant Web Design

There are numerous times I’ve been handed an existing website that can barely load on mobile and, if it does load, is almost totally unusable. Not only does this have visitors bouncing straight off the site to find a competitor, but it can damage first impressions of a company or brand.

So, when I’m working with developers on rebuilding a client site, I take a mobile-first approach and make sure that responsiveness is built into the design right from the start. Below, I’ve collected a list of responsive design tools I tested this year, along with a couple of familiar favorites that I regularly turn to.

Table of Contents

What are responsive design tools?

Evaluating responsive design tools, the software management tools i tested, so, are responsive design tools worth it.

Responsive design tools are apps or software for web developers and designers to help ensure the sites they are building will work seamlessly on multiple screen sizes and devices. Responsive design has become a pivotal part of web design as users are accessing sites on an increasingly diverse range of viewports.

There are different types of responsive design tools, and, depending on their structure, they offer different ways to build or test design responsiveness. Most base their functionality on easily building responsive grid systems, managing media queries, and other flexible layout elements.

Whether users are accessing your site on a smartphone, desktop monitor, laptop, or tablet, responsive web design tools help ensure a seamless user experience across all devices.

There are a lot of reasons to incorporate responsive design tools into your dev stack.

First, search engines like Google take mobile-friendliness into account when ranking websites in organic search results as part of their “mobile first” policy. So, responsive design contributes to driving traffic to the website.

Aside from that, responsive design affects a whole host of user engagement and retention metrics that, once you get users to your site, influence whether they stay, how long or how much they engage, and whether you can convert them.

In May 2023, data from Similarweb showed that 65.47% of all internet traffic was generated from mobile devices. Conversion rates are typically lower on mobile devices, but it’s entirely possible that’s a symptom of poor user experience rather than lower intent, because mobile draws the highest numbers of both new (65%) and returning (745) visitors to websites .

I mainly work with small businesses to redesign their websites. It started with a family member’s side gig and a website that needed a facelift. The results were far better than I expected, so I started investing time in upgrading some of the websites for my own side projects.

Fast forward a couple of years, and I now work with a couple of clients at a time on a referral basis to upgrade their online presence. The most common complaint I hear? “The website is terrible on mobile.”

I’ve tried a lot of different web design tools over the years, especially early on when I was getting to grips with the basics, and mostly worked on a trial-and-error basis. But tools for quickly and easily ensuring websites are optimized for mobile quickly became a regular and important part of my process.

If you’re shopping around for responsive design technology, there are a few things I would keep an eye out for.

Firstly, find one that’s easy to use. When it comes to straightforward websites, in particular, some tools have a lot of bells and whistles that you simply won’t need. So focus on the functionality you actually need and search for tools from there.

Another critical aspect for me is the ability to easily work with others in the tool. Most of the time, I work alongside a developer for more complex aspects of a site build, and I need to collaborate with them in one spot and hand off designs easily. Similarly, your client might want to look at the designs as you make progress, so a tool that makes it easy to preview designs for others is always a plus.

I always want to be able to test that what we’re building is as responsive as I’m promising it will be. So, the ability to test the site on a wide range of screen sizes and viewports is also important.

Finally, I like to work with pre-built components a lot. So tools that have large libraries of responsive components (forms, nav, icons, etc.) make my job a lot easier.

how to make your html responsive

Free Website Design Inspiration Guide

77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You

  • Agency Pages
  • Ecommerce Pages
  • Tech Company Pages

You're all set!

Click this link to access this resource at any time.

I’m working on two websites at the moment that provide interesting use cases to test out responsive tools.

The first is a spa website that needs to be able to drive phone call clicks and website appointment bookings, showcase the treatment rooms, and highlight customer reviews. The second is an e-commerce site selling holiday decorations around the world.

Both sites have some issues with responsiveness and require pretty significant facelifts. So, I tried out some of the tools below on new designs for the sites to see what worked best.

1. Bootstrap

responsive web design tools, Bootstrap

Don't forget to share this post!

Related articles.

I Tried 10 Web Design Frameworks to Find the Best Ones in 2024 (Results & Recommendations)

I Tried 10 Web Design Frameworks to Find the Best Ones in 2024 (Results & Recommendations)

How to Fuse Website Design and SEO [Tips & Examples]

How to Fuse Website Design and SEO [Tips & Examples]

A Deep Dive Into Inclusive Web Design in 2024

A Deep Dive Into Inclusive Web Design in 2024

Website Footers: Best Design Practices & 24 Top Examples

Website Footers: Best Design Practices & 24 Top Examples

The Art of Engagement: Elevating Web Design with Multimedia Magic

The Art of Engagement: Elevating Web Design with Multimedia Magic

User Interface (UI) Design: What Is It? The Beginner’s Guide

User Interface (UI) Design: What Is It? The Beginner’s Guide

The 10 Best Web Design Books (+Recommendations)

The 10 Best Web Design Books (+Recommendations)

Is Your Website EEAT-compliant? What Developers Should Keep In Mind

Is Your Website EEAT-compliant? What Developers Should Keep In Mind

What Is Fluid Design and How Is It Used on Websites?

What Is Fluid Design and How Is It Used on Websites?

Graceful Degradation: Ensure Seamless Web Experiences Across Browsers

Graceful Degradation: Ensure Seamless Web Experiences Across Browsers

77 of blog and website page design examples.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

CSS Variables tutorial: How to make your HTML responsive with CSS Variables

IuMWwaRBH-1VTyCpRImIsyYwp36b1lR6ObIM

A quick tutorial on how to create responsive websites in 2019.

If you haven’t heard of CSS Variables before, it’s a new feature of CSS which gives you the power of variables in your stylesheet, without having to do any setup.

In essence, CSS Variables allow you to skip the old way of setting styles:

While the syntax might seem a bit weird, this gives you the obvious benefit of being able to change the font sizes across your entire app through only changing the --base-font-size variable.

If you want to learn CSS Variables properly, please check out my free and interactive CSS Variables course on Scrimba:

The course contains eight interactive screencasts

The course contains eight interactive screencasts.

Or if you want to know more about the course, you can also read a walk-through of what you’ll learn in the article below:

Want to learn CSS Variables? Here’s my free 8-part course!

Now let’s see how this new technology can make your life easier when building responsive websites.

We’re going to add responsiveness to a portfolio website which looks like this:

1*tLQrkgJJhKV3YrzPxsVVFA

It looks nice when viewed on your desktop. However, as you can see on the left image below, this layout doesn’t work well on mobile.

1*CZkMgq0rp9nTdChVxwq33g

How it looks on mobile initially.

1*zpFS--eNMyAzkdZWS1lLRQ

How we want it to look.

On the right image, we’ve changed a few things on the styles to make it work better on mobile. Here’s what we have done:

  • Rearranged the grid so that it’s stacked vertically instead of across two columns.
  • Moved the entire layout a bit more up
  • Scaled the fonts down

In order to do this, we needed to change the following CSS:

More specifically, we needed to make the following adjustments inside of a media query:

  • Reduce font size of the h1 to 20px
  • Reduce the margin above and below the #navbar to 15px
  • Reduce the font size inside the #navbar to 20px
  • Reduce the margin above the .grid to 15px
  • Change the .grid from from two-columns to one-column

Note: There is, of course, much more CSS in this application, even within these selectors. However, for the sake of this tutorial, I’ve stripped away everything which we aren’t changing in the media query. Check out this Scrimba playground to get the entire code.

The old way

Doing all of this would be possible without CSS Variables. But it would require an unnecessary amount of code, as most of the bullet points above would need their own selector inside the media query, like this:

The new way

Now let’s see how this can be solved with CSS Variables. To begin with, we’ll rather store the values which we are reusing or changing inside variables:

Once we have this setup, we can simply change the values of the variables inside the media query:

This is much cleaner than what we had before. We’re only targeting the :root , as opposed to specifying all the selectors.

We’ve reduced our media query from four selectors down to one and from thirteen lines down to four .

And this is just a simple example. Imagine a full-blown website where, for example, the --base-margin control most of the free spacing around the app. It’s a lot easier to just flip the value of it, as opposed to filling your media query up with complex selectors.

To sum up, CSS Variables are definitely the future of responsiveness. If you want to learn this technology once and for all, I’d recommend that you check out my free course on the subject on Scrimba.

You’ll become a CSS Variables master in no time :)

Thanks for reading! I’m Per Borgen, front-end developer and co-founder of Scrimba. Feel free to reach out to me via Twitter if you have any questions or comments.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

bootcamp-banner

Co-founder of Scrimba.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

  • Notifications

User-friendly WebUI for LLMs (Formerly Ollama WebUI)

open-webui/open-webui

Folders and files, repository files navigation, open webui (formerly ollama webui) 👋.

GitHub stars

User-friendly WebUI for LLMs, Inspired by ChatGPT

Also check our sibling project, Open WebUI Community , where you can discover, download, and explore customized Modelfiles for Ollama! 🦙🔍

🖥️ Intuitive Interface : Our chat interface takes inspiration from ChatGPT, ensuring a user-friendly experience.

📱 Responsive Design : Enjoy a seamless experience on both desktop and mobile devices.

⚡ Swift Responsiveness : Enjoy fast and responsive performance.

🚀 Effortless Setup : Install seamlessly using Docker or Kubernetes (kubectl, kustomize or helm) for a hassle-free experience.

💻 Code Syntax Highlighting : Enjoy enhanced code readability with our syntax highlighting feature.

✒️🔢 Full Markdown and LaTeX Support : Elevate your LLM experience with comprehensive Markdown and LaTeX capabilities for enriched interaction.

📚 Local RAG Integration : Dive into the future of chat interactions with the groundbreaking Retrieval Augmented Generation (RAG) support. This feature seamlessly integrates document interactions into your chat experience. You can load documents directly into the chat or add files to your document library, effortlessly accessing them using # command in the prompt. In its alpha phase, occasional issues may arise as we actively refine and enhance this feature to ensure optimal performance and reliability.

🌐 Web Browsing Capability : Seamlessly integrate websites into your chat experience using the # command followed by the URL. This feature allows you to incorporate web content directly into your conversations, enhancing the richness and depth of your interactions.

📜 Prompt Preset Support : Instantly access preset prompts using the / command in the chat input. Load predefined conversation starters effortlessly and expedite your interactions. Effortlessly import prompts through Open WebUI Community integration.

👍👎 RLHF Annotation : Empower your messages by rating them with thumbs up and thumbs down, facilitating the creation of datasets for Reinforcement Learning from Human Feedback (RLHF). Utilize your messages to train or fine-tune models, all while ensuring the confidentiality of locally saved data.

🏷️ Conversation Tagging : Effortlessly categorize and locate specific chats for quick reference and streamlined data collection.

📥🗑️ Download/Delete Models : Easily download or remove models directly from the web UI.

⬆️ GGUF File Model Creation : Effortlessly create Ollama models by uploading GGUF files directly from the web UI. Streamlined process with options to upload from your machine or download GGUF files from Hugging Face.

🤖 Multiple Model Support : Seamlessly switch between different chat models for diverse interactions.

🔄 Multi-Modal Support : Seamlessly engage with models that support multimodal interactions, including images (e.g., LLava).

🧩 Modelfile Builder : Easily create Ollama modelfiles via the web UI. Create and add characters/agents, customize chat elements, and import modelfiles effortlessly through Open WebUI Community integration.

⚙️ Many Models Conversations : Effortlessly engage with various models simultaneously, harnessing their unique strengths for optimal responses. Enhance your experience by leveraging a diverse set of models in parallel.

💬 Collaborative Chat : Harness the collective intelligence of multiple models by seamlessly orchestrating group conversations. Use the @ command to specify the model, enabling dynamic and diverse dialogues within your chat interface. Immerse yourself in the collective intelligence woven into your chat environment.

🤝 OpenAI API Integration : Effortlessly integrate OpenAI-compatible API for versatile conversations alongside Ollama models. Customize the API Base URL to link with LMStudio, Mistral, OpenRouter, and more .

🔄 Regeneration History Access : Easily revisit and explore your entire regeneration history.

📜 Chat History : Effortlessly access and manage your conversation history.

📤📥 Import/Export Chat History : Seamlessly move your chat data in and out of the platform.

🗣️ Voice Input Support : Engage with your model through voice interactions; enjoy the convenience of talking to your model directly. Additionally, explore the option for sending voice input automatically after 3 seconds of silence for a streamlined experience.

⚙️ Fine-Tuned Control with Advanced Parameters : Gain a deeper level of control by adjusting parameters such as temperature and defining your system prompts to tailor the conversation to your specific preferences and needs.

🔗 External Ollama Server Connection : Seamlessly link to an external Ollama server hosted on a different address by configuring the environment variable.

🔐 Role-Based Access Control (RBAC) : Ensure secure access with restricted permissions; only authorized individuals can access your Ollama, and exclusive model creation/pulling rights are reserved for administrators.

🔒 Backend Reverse Proxy Support : Bolster security through direct communication between Open WebUI backend and Ollama. This key feature eliminates the need to expose Ollama over LAN. Requests made to the '/ollama/api' route from the web UI are seamlessly redirected to Ollama from the backend, enhancing overall system security.

🌟 Continuous Updates : We are committed to improving Open WebUI with regular updates and new features.

🔗 Also Check Out Open WebUI Community!

Don't forget to explore our sibling project, Open WebUI Community , where you can discover, download, and explore customized Modelfiles. Open WebUI Community offers a wide range of exciting possibilities for enhancing your chat interactions with Ollama! 🚀

How to Install 🚀

🌟 Important Note on User Roles and Privacy:

Admin Creation: The very first account to sign up on Open WebUI will be granted Administrator privileges . This account will have comprehensive control over the platform, including user management and system settings.

User Registrations: All subsequent users signing up will initially have their accounts set to Pending status by default. These accounts will require approval from the Administrator to gain access to the platform functionalities.

Privacy and Data Security: We prioritize your privacy and data security above all. Please be reassured that all data entered into Open WebUI is stored locally on your device. Our system is designed to be privacy-first, ensuring that no external requests are made, and your data does not leave your local environment. We are committed to maintaining the highest standards of data privacy and security, ensuring that your information remains confidential and under your control.

Steps to Install Open WebUI

Before you begin.

Installing Docker:

For Windows and Mac Users:

  • Download Docker Desktop from Docker's official website .
  • Follow the installation instructions provided on the website. After installation, open Docker Desktop to ensure it's running properly.

For Ubuntu and Other Linux Users:

  • Open your terminal.
  • Set up your Docker apt repository according to the Docker documentation
  • Update your package index: sudo apt-get update
  • Install Docker using the following command: sudo apt-get install docker-ce docker-ce-cli containerd.io
  • Verify the Docker installation with: sudo docker run hello-world This command downloads a test image and runs it in a container, which prints an informational message.

Ensure You Have the Latest Version of Ollama:

  • Download the latest version from https://ollama.com/ .

Verify Ollama Installation:

  • After installing Ollama, check if it's working by visiting http://127.0.0.1:11434/ in your web browser. Remember, the port number might be different for you.

Installing with Docker 🐳

Important: When using Docker to install Open WebUI, make sure to include the -v open-webui:/app/backend/data in your Docker command. This step is crucial as it ensures your database is properly mounted and prevents any loss of data.

If Ollama is on your computer , use this command:

To build the container yourself , follow these steps:

After installation, you can access Open WebUI at http://localhost:3000 .

Using Ollama on a Different Server

To connect to Ollama on another server, change the OLLAMA_API_BASE_URL to the server's URL:

Or for a self-built container:

Installing Ollama and Open WebUI Together

Using docker compose.

If you don't have Ollama yet, use Docker Compose for easy installation. Run this command:

For GPU Support: Use an additional Docker Compose file:

To Expose Ollama API: Use another Docker Compose file:

Using run-compose.sh Script (Linux or Docker-Enabled WSL2 on Windows)

Give execute permission to the script:

For CPU-only container:

For GPU support (read the note about GPU compatibility):

To build the latest local version, add --build :

Alternative Installation Methods

For other ways to install, like using Kustomize or Helm, check out INSTALLATION.md . Join our Open WebUI Discord community for more help and information.

Updating your Docker Installation

In case you want to update your local Docker installation to the latest version, you can do it with Watchtower :

In the last part of the command, replace open-webui with your container name if it is different.

Moving from Ollama WebUI to Open WebUI

Given recent name changes, the docker image has been renamed. Additional steps are required to update for those people that used Ollama WebUI previously and want to start using the new images.

Updating to Open WebUI without keeping your data

If you want to update to the new image but don't want to keep any previous data like conversations, prompts, documents, etc. you can perform the following steps:

For example, for local installation it would be docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main . For other installation commands, check the relevant parts of this README document.

Migrating your contents from Ollama WebUI to Open WebUI

If you want to update to the new image migrating all your previous settings like conversations, prompts, documents, etc. you can perform the following steps:

Once you verify that all the data has been migrated you can erase the old volumen using the following command:

How to Install Without Docker

While we strongly recommend using our convenient Docker container installation for optimal support, we understand that some situations may require a non-Docker setup, especially for development purposes. Please note that non-Docker installations are not officially supported, and you might need to troubleshoot on your own.

Project Components

Open WebUI consists of two primary components: the frontend and the backend (which serves as a reverse proxy, handling static frontend files, and additional features). Both need to be running concurrently for the development environment.

The backend is required for proper functionality

Requirements 📦

  • 🐰 Bun >= 1.0.21 or 🐢 Node.js >= 20.10
  • 🐍 Python >= 3.11

Build and Install 🛠️

Run the following commands to install:

You should have Open WebUI up and running at http://localhost:8080/ . Enjoy! 😄

Troubleshooting

See TROUBLESHOOTING.md for information on how to troubleshoot and/or join our Open WebUI Discord community .

What's Next? 🚀

Here are some exciting tasks on our roadmap:

  • 🔊 Local Text-to-Speech Integration : Seamlessly incorporate text-to-speech functionality directly within the platform, allowing for a smoother and more immersive user experience.
  • 🛡️ Granular Permissions and User Groups : Empower administrators to finely control access levels and group users according to their roles and responsibilities. This feature ensures robust security measures and streamlined management of user privileges, enhancing overall platform functionality.
  • 🔄 Function Calling : Empower your interactions by running code directly within the chat. Execute functions and commands effortlessly, enhancing the functionality of your conversations.
  • ⚙️ Custom Python Backend Actions : Empower your Open WebUI by creating or downloading custom Python backend actions. Unleash the full potential of your web interface with tailored actions that suit your specific needs, enhancing functionality and versatility.
  • 🔧 Fine-tune Model (LoRA) : Fine-tune your model directly from the user interface. This feature allows for precise customization and optimization of the chat experience to better suit your needs and preferences.
  • 🧠 Long-Term Memory : Witness the power of persistent memory in our agents. Enjoy conversations that feel continuous as agents remember and reference past interactions, creating a more cohesive and personalized user experience.
  • 🧪 Research-Centric Features : Empower researchers in the fields of LLM and HCI with a comprehensive web UI for conducting user studies. Stay tuned for ongoing feature enhancements (e.g., surveys, analytics, and participant tracking) to facilitate their research.
  • 📈 User Study Tools : Providing specialized tools, like heat maps and behavior tracking modules, to empower researchers in capturing and analyzing user behavior patterns with precision and accuracy.
  • 📚 Enhanced Documentation : Elevate your setup and customization experience with improved, comprehensive documentation.

Feel free to contribute and help us make Open WebUI even better! 🙌

Supporters ✨

A big shoutout to our amazing supporters who's helping to make this project possible! 🙏

Platinum Sponsors 🤍

  • We're looking for Sponsors!

Acknowledgments

Special thanks to Prof. Lawrence Kim and Prof. Nick Vincent for their invaluable support and guidance in shaping this project into a research endeavor. Grateful for your mentorship throughout the journey! 🙌

This project is licensed under the MIT License - see the LICENSE file for details. 📄

If you have any questions, suggestions, or need assistance, please open an issue or join our Open WebUI Discord community to connect with us! 🤝

Created by Timothy J. Baek - Let's make Open Web UI even more amazing together! 💪

Security policy

Sponsor this project, contributors 50.

@tjbck

  • Svelte 67.7%
  • Python 18.0%
  • TypeScript 10.4%
  • Dockerfile 0.5%

How TO - Responsive Images

Learn how to create an responsive image with CSS.

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the responsive effect:

Lights

How To Create Responsive Images

Step 1) add html:, step 2) add css:.

If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:

If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100% :

If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice:

Go to our CSS Images Tutorial to learn more about how to style images.

Go to our CSS RWD Tutorial to learn more about responsive web design.

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

IMAGES

  1. Build a Responsive Website Using HTML and CSS in 30 minutes

    how to make your html responsive

  2. Responsive Website with HTML, CSS, and JavaScript

    how to make your html responsive

  3. How To Make Website Using HTML & CSS

    how to make your html responsive

  4. How To Make Responsive Website Using HTML & CSS Only

    how to make your html responsive

  5. How To Create Responsive Table In HTML & CSS || How To Make Responsive

    how to make your html responsive

  6. How to Make Responsive Website using Html & CSS

    how to make your html responsive

VIDEO

  1. Create a Responsive Website Using HTML CSS & JavaScript

  2. How to make responsive website design tutorial for beginners in hindi learn html tutorial #shorts

  3. Shocking Isometric Button Hover Trick: Master HTML & CSS in Minutes!

  4. Design A Responsive Website Using HTML, CSS & JavaScript

  5. How To Make Responsive Image With CSS #coding #design

  6. How to make a fully RESPONSIVE registratoin form using html and css PART-1

COMMENTS

  1. HTML Responsive Web Design

    To create a responsive website, add the following <meta> tag to all your web pages: Example <meta name="viewport" content="width=device-width, initial-scale=1.0"> Try it Yourself » This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.

  2. Responsive design

    Overview: CSS layout Next Responsive web design (RWD) is a web design approach to make web pages render well on all screen sizes and resolutions while ensuring good usability. It is the way to design for a multi-device web. In this article, we'll help you understand some techniques that can be used to master it.

  3. How to make your HTML responsive by adding a single line of CSS

    How to make your HTML responsive by adding a single line of CSS Per Harald Borgen In this article, I'll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen. And the most beautiful part: the responsiveness will be added with a single line of CSS.

  4. Responsive Web Design Introduction

    Tablet Phone It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen. Don't worry if you don't understand the example below, we will break down the code, step-by-step, in the next chapters: Try it Yourself » Previous Next

  5. How to create a Responsive Website

    2. Start with a Fluid Grid 3. Take touchscreens into consideration 5. Define Typography 6. Use a pre-designed theme or layout to save time 7. Test Responsiveness on Real Devices How to run responsive tests on real browsers and devices What is Responsive Design?

  6. The Beginner's Guide to Responsive Web Design in 2024

    The answer is simple. It's no longer enough to design for a single device. Mobile web traffic has overtaken desktop and now makes up the majority of website traffic, accounting for more than 51%. Mobile, tablet, desktop market share

  7. Using CSS/HTML to Make a Responsive Website in 3 Easy Steps

    As I already said, you'll probably have to adapt this code a bit to fit the specific needs of your website. Paste it on your site .css file. 11. 1. /* Tablet Landscape */. 2. @media screen and ...

  8. HTML Responsive Web Design (With Examples)

    There are many ways to make a webpage responsive. They are as follows: Viewport meta tag Responsive typography Responsive images Media Queries Responsive layout technologies We will learn about each of them in detail. viewport Meta Tag We can add viewport in the <meta> tag to make the webpage responsive.

  9. Responsive web design basics

    Responsive web design basics bookmark_border On this page Set the viewport Ensure an accessible viewport Size content to the viewport Images Layout Use CSS media queries for responsiveness Media queries based on viewport size Media queries based on device capability

  10. Learn Responsive Design

    Learn Responsive Design bookmark_border A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone. 17 activities 1 Welcome to Learn Responsive Design! keyboard_arrow_down subject Article 2 Introduction keyboard_arrow_down subject Article 3 Media queries keyboard_arrow_down

  11. What is Responsive Web Design?

    Responsive web design is a technique that allows you to create web pages that can adapt to different screen sizes and devices. In this tutorial, you will learn the basic concepts and principles of responsive web design, how to use CSS and HTML to create responsive layouts, and how to use W3.CSS framework to simplify your work. Whether you are a beginner or a professional, this tutorial will ...

  12. How to Build Responsive Websites

    Use Media Queries. One of the most fundemental ways to create a responsive website is by using media queries. Media queries help you to define different breakpoints for your website. A breakpoint in a responsive design is the "point" at which a website's content and design will adapt in a certain way to provide the best possible user ...

  13. Learn responsive web design in 5 minutes

    % em rem vw vh In this article, we'll start with the percentage unit %, and then we'll look at the rem unit in the final section. Let's say you have a very simple website, like this: Its HTML is just the following: <body> <h1>Welcome to my website</h1> <image src="path/to/img.png" class="myImg"> </body>

  14. 10 best practices for responsive web design

    Let's jump into the 10 best practices you can incorporate to optimize your website's responsive design. 1. Pay attention to your navigation. Adopting responsive web design has a huge impact on site navigation. Let's take a look at Microsoft's website from 2007 :

  15. How to design a responsive Web Page in HTML

    Creating a responsive webpage in HTML: We can make our webpage responsive by adding a " viewport " .The viewport does not have any fixed size. It changes according to the screen orientations and sizes.HTML provides a <meta> tag for setting the viewport. <meta name='viewport' content='width=device-width, initial-scale=1.0′>

  16. Responsive Web Design (With Examples)

    Responsive web design is an approach to web development aimed at creating websites that adapt and respond to different screen sizes and devices. The primary goal of responsive design is to provide an optimal and consistent user experience across a wide range of platforms, including desktop computers, laptops, tablets, and smartphones.

  17. HTML Responsive Web Design

    Approach 1: Using HTML Viewport meta tag for Responsive Web Design HTML Viewport represents the area of display or screen visible to the user. It varies from device to device. This approach set the available screen width as the 100% width of the web pages and adjusts content accordingly to make it responsive. Syntax:

  18. I Tried 10 Responsive Web Design Tools to See if They're Worth It (2024

    3. Figma. Image Source. If prototyping and collaboration are the name of the game, then Figma is for you. Used by web developers and product designers alike, Figma's vector networks and layout function provide real-time collaboration and easy sharing of designs for feedback and quick iterations.

  19. Responsive Web Design

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> Since HTML plays a huge role in defining the structure of a web page, then it definitely has something to do with making websites respond (adapt) to different screen sizes.

  20. How to Build a Stylish, Responsive HTML Table

    On mobile screens (<700px), all table cells are stacked. On medium screens (≥700px), there's a two-column layout. On large screens (≥1000px), there's a typical table layout. 1. Begin With the HTML Markup. The markup will be straightforward: a table with six rows inside a container. Here's how it'll look:

  21. How To Create a Responsive Form with CSS

    How To Create a Responsive Form Step 1) Add HTML Use a <form> element to process the input. You can learn more about this in our PHP tutorial. Add inputs (with a matching label) for each field, and wrap a <div> element around each label and input to set a specified width with CSS: Example <div class="container"> <form action="action_page.php">

  22. How to Make HTML Tables More Accessible and Semantic

    Learn how to improve your HTML table accessibility and semantics with captions, headers, labels, roles, and aria attributes. Also, find out how to make your tables responsive and keyboard-friendly.

  23. CSS Variables tutorial: How to make your HTML responsive with CSS Variables

    Reduce the margin above and below the #navbar to 15px. Reduce the font size inside the #navbar to 20px. Reduce the margin above the .grid to 15px. Change the .grid from from two-columns to one-column. Note: There is, of course, much more CSS in this application, even within these selectors.

  24. How To Create a Responsive Header

    Create A Responsive Header Step 1) Add HTML: Example <div class="header"> <a href="#default" class="logo"> CompanyLogo </a> <div class="header-right"> <a class="active" href="#home"> Home </a> <a href="#contact"> Contact </a> <a href="#about"> About </a> </div> </div> Step 2) Add CSS: Example

  25. Open WebUI (Formerly Ollama WebUI)

    ⚙️ Custom Python Backend Actions: Empower your Open WebUI by creating or downloading custom Python backend actions. Unleash the full potential of your web interface with tailored actions that suit your specific needs, enhancing functionality and versatility. 🔧 Fine-tune Model (LoRA): Fine-tune your model directly from the user interface ...

  26. How To Create a Responsive Text

    How TO - Responsive Text Previous Next Learn how to create responsive typography with CSS. Hello World Resize the browser window to see how the font size scales. Try it Yourself » Responsive Font Size The text size can be set with a vw unit, which means the "viewport width". That way the text size will follow the size of the browser window:

  27. How To Create Responsive Images

    How To Create Responsive Images Step 1) Add HTML: Example <img src="nature.jpg" alt="Nature" class="responsive"> Step 2) Add CSS: If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto: Example .responsive { width: 100%; height: auto; } Try it Yourself »