How To Make CSS Responsive on Multiple Screens?

As 48% of users of the entire WWW are on mobile, therefore it makes it compulsory for us to optimize for a website for mobile. We design and optimize our website for different platforms like Mobile, Tablet, iPhone, Laptop, and LCD. But it would be great if we write one code and it works on different platforms. In this article, we will guide you on how to optimize your website for different mediums or devices, and platforms.

In the 21st century, almost every client demands a mobile version of his/her website. Besides, the developers and software agencies also fail to optimize websites for different platforms. Such things fail to create a balance between the traffic from different mediums and it also results in loss of the traffic from one of the particular devices.

What is a Responsive Website?

Responsive Website means optimizing the website for the user as well as with that of the environment in combination with a screen, size, platform, and orientation. CSS Responsive Design lets you create a mix of optimized grids and layout, and images, with well and diverse use of media and queries.

In the responsive web design, if the user switches from laptop to iPhone, the design and code wrote for the Laptop should also work in the same manner as on the laptop and should respond to the user in the same way.

Queries to make content Responsive Across Multiple Screens

A Media Query is a technique introduced in CSS3. The media query includes a block of CSS Properties if and only if the certain conditions are true.

Let’s take an example if the browser window width is 700px or smaller, the background color will change to red.

@media only screen and (max-width:700px)

{

body {

background-color:red;

}

}

For example, in the case of mobiles, if the width of the browser window on which the user is browsing the site is below 700px, the background color will change to red.

How to add Breakpoint?

We will make a web page using rows and columns but it was not good and responsive and looks very odd on the small screens. Let’s make the design responsive.

How to make CSS Responsive on Multiple Screens?

Media Queries can help you in the regard that the code designed and written for the Desktop is also responsive on other devices like mobiles, tablets, and iPhones. In this regard, we write the media queries to add break-points such as.

The normal desktop resolution and dimension is 768px, in case if the screen gets down below 768px, the column automatically aligns with the new screen on the width of 100%.

Let’s take an example.

For Desktop

.col-1 {width:8%;}

.col-2 {width:16%;}

.col-3 {width:25%;}

.col-4 {width:33%;}

.col-5 {width:41%;}

.col-6 {width:50%;}

.col-7 {width:58%;}

.col-8 {width:66%;}

.col-9 {width:74%;}

.col-10 {width:83%;}

.col-11 {width:91%;}

.col-12 {width:99%;}

In order to make the code working on Desktop, responsive on the mobile screens.

@media only screen and (max-width:768px) {

/*to make the code responsive on mobile phones*/

[class*=”col-“] {

width:100%;

}

}

Always Design For Mobile First

Mobile-First Strategy means designing for the mobile rest and the rest of the devices should be on your’s second priority. For this, we have to make some changes in our CSS. Instead of changing the style as and when the screen gets smaller than 768px, we also have to auto-adjust the CSS as and when the screen gets larger than 768px.

In this case, we will change the width when the screen gets larger than 768px.

The code for this is.

/*For Mobile Devices. */

[class*=”col-“] {

width:100%;

}

@media only screen and (min-width:768px) {

/*For Desktop Devices */

.col-1 {width:8%;}

.col-2 {width:16%;}

.col-3 {width:25%;}

.col-4 {width:33%;}

.col-5 {width:41%;}

.col-6 {width:50%;}

.col-7 {width:58%;}

.col-8 {width:66%;}

.col-9 {width:75.33%;}

.col-10 {width:83.33%;}

.col-11 {width:91.66%;}

.col-12 {width:width:99%}

}

How to make CSS Responsive on Tablets and I-Phone?

How to make CSS Responsive on Multiple Screens?

In order to make the CSS Responsive on multiple screens, we do have to add breakpoints.

In this case, we need to insert the breakpoints between tablets, and mobile phones. In this case, there is a need to add one more media query at 600px and a new set of classes for devices greater in width than 600px, but smaller in width than 768px.

Here, there is a two list of classes almost identical, the only difference here is col- and col-s-.

/*In case of mobile phones */

[class*=”col-“] {

width:100%:

}

@media only screen and (min-width:600px) {

/*For Tablets*/

.col-s-1 {width:8%;}

.col-s-2 {width:16%;}

.col-s-3 {width:25%;}

.col-s-4 {width:33%;}

.col-s-5 {width:41%;}

.col-s-6 {width:50%;}

.col-s-7 {width:58%;}

.col-s-8 {width:66%;}

.col-s-9 {width:75%;}

.col-s-10 {width:83%;}

.col-s-11 {width:91%;}

.col-s-12 {width:99%;}

}

There is another code for the media only screen in case if the width of the device is below 768px like in case of tablets, mobile-phones, and I-Phones.

@media only screen and (min-width:768px;) {

/*For Desktop */

.col-1 {width:8%;}

.col-2 {width:16%;}

.col-3 {width:25%;}

.col-4 {width:33%;}

.col-5 {width:41%;}

.col-6 {width:50%;}

.col-7 {width:58%;}

.col-8 {width:66%;}

.col-9 {width:75%;}

.col-10 {width:83%;}

.col-11 {width:91%;}

.col-12 {width:100%;}

}

Another Example

There are plenty of screens in the market with different heights and widths, therefore it is too complicated to create a different breakpoint for each of the devices. However, the code below can help you to achieve that.

Extra Small Devices (phones with width 600px and down)

@media only screen and (max-width:600px) {

}

Small Devices (Portrait, Tablets, and Large Phones, width:600px and above)

@media only screen and (min-width:600px) {

}

Medium Devices (Landscape Tablets, 768px and above width)

@media only screen and (min-width:768px) {

}

Large Devices (laptops, desktops, with width:992px and above)

@media only screen and (min-width:992px) {

}

Extra Large Devices (Large Laptops, Tablets with width:1200px and above)

@media only screen (min-width:1200px) {

}

Different Orientation: Landscape and Portrait

Using CSS, you can also change the layout of the page based on the orientation of the browser. In this case, you will have the set of CSS Properties and will only apply when the browser window is wider as compared to its height. This view is called Landscape Orientation.

@media only screen and (orientation: landscape) {

body {

Your Code Goes Here

}

}

Conclusion:

We have guided you on how to make CSS Responsive across multiple screens. The code in detail is presented before you besides we have also guided you on how to make the CSS responsive across multiple devices and screens. Still, if you encounter any problem ping us at usama@maxenius.com or Call/SMS at WhatsApp:0322-8661367 for the instant resolution of your problem.

Magento

shopify

WordPress

Laravel

CMS

Our Services

WordPress

magento

shopify

laravel

cms

software development

Custom software & applications for businesses

mobile app development

Android apps, iOS apps & Hyprid app development

ecompress development

An online store with all the tools you need to build, manage, and grow your business

seo services

1st page rankings & consistent organic traffic

sem services

Paid ads for social media, google and online advertising

social media services

Creative designs, viral campaigns, community & social listening