Responsive HTML web design

Responsive design is about creating a website that looks good on all devices. It will automatically adjust for different screen sizes and viewpoints.

Setting the viewpoint

To create a responsive website, add the following code to all your web pages.

HTML Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will set up the viewport of your page. Which will instruct your browser on how to control the page’s dimensions and to scale.

Responsive images

These are images that scale nicely to fit any browser size. Using the width property If the CSS width property is scaled to 100%, the image will be responsive and scale up and down

HTML Code:

<img src="google.jpg" style="width:100%;">

Responsive Text Size

The text size can be set with a "vw" unit, which means the viewport width". That way, the text will follow the size of the browser window.

HTML Code:

<h1 style="font-size: 10vw"> Hello World</h1>

Media Queries

In addition, to resize text and images, it is also common to use media queries in responsive web pages.

HTML Code:

<style>
    .left, .right {
        Float:left;
        Width: 20%;
    }
    .main  {
        Float: left;
        Width:60%;
    }

    /* use a media query to add a breakpoint at 800px */
    @media screen and (max-width: 800px){
        .left,  .main,  .right {
            Width:100%; /* the width is 100%, when the viewport is 800px or smaller */
        }
    }
</style>

Conclusion

In this article, we discussed what Responsive design means to both the developer and user, why we should always build with responsiveness in mind. We also showed how to write responsive designs for your project.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.