DEV Community

Cover image for Html Tutorial: HTML Responsive web design
Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Html Tutorial: HTML Responsive web design

#html #webdev #codenewbie #programming

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

AD-BANNER

Setting the viewpoint

In order to create a responsive website, add the following code to all your web page

HTML Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

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

Responsive images

This 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%;">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. Try contrast pro!

Contrast Design Boostrap

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro

Resources

Top comments (0)

Read next

satya_prakash profile image

A Beginner’s Guide to Component Testing with Playwright

satyaprakash behera -

m3yevn profile image

The Horrors of AI (Halloween Edition 🎃)

Kevin Moe Myint Myat 👨‍💻 -

navv23 profile image

Complete Linux Essentials!

Navaneethan Ghanti -

benoitaverty profile image

Writing Good Automated Tests with AI: A Case Study

Benoit Averty -