RESPONSIVE SITE

6 WAYS TO MAKE YOUR SITE RESPONSIVE!

Viewport

Use a meta viewport tag to tell the browser how to control the dimensions and scale of your page.

There are many different layouts you can choose from, with one of the most popular being Flexbox.

Flexbox arranges items either in a single row or wraps them onto multiple rows as the available space decreases.

.items {display:flex; justify-content: space-between;}

Easily change styles based on the type of device rendering the content or the device's features.

Consider parameters like width, height, orientation, ability to hover, and whether the device is a touchscreen.

@media print {/*print styles go here*/}

Avoid using fixed units like pt, px, cm, etc. Instead, use percentages (%).

div.fullwidth {width:50%;}

Ensure that your responsive web pages look good on both large desktop screens and small mobile phones.

Design your website with a mobile-first approach to optimize breakpoints based on content.

Aim to have the fewest possible breakpoints to maintain simplicity.