CSS for responsive website

[juansann]

Hello,
I am designing a new web page. I have always used one css file for the computer version and another one for the mobile version. The fact is that this time I want to create a web 100% responsive, so that it is able to adapt to different screens without having to change files.
For this I have implemented layers with minimum size and maximum size 100% of the screen, but in some layers I need to have a fixed size depending on the size of the screen. Do you know if there is a directive with which you can put a fixed size in front of the size of the screen?

Thank you in advance.

[mlegg]

have you tried using Bootstrap? https://getbootstrap.com/

[coothead]

have you tried using Bootstrap?

Let's hope not. :D



Why Bootstrap Is Bad


Bootstrap encourages the use of classes in a presentational manner,
which defeats the reason for keeping HTML and CSS separate.


Bootstrap encourages the use of endless pointless redundant classes
with pointless divs, resulting in two to three times the HTML as one
would have without it, only further compounded by one having to write
as much CSS as one would have without the framework. If it saves one
anything in CSS, it only does so by making one write sufficiently more
HTML that it's awash. It's a step sideways on work and a step backwards
on methodology.


Since it's use results in presentational classes and excessive div and
span elements, it is basically putting presentation in the markup where it
has absolutely no business. HTML and CSS are separate so one can
have multiple appearances, slapping a class in for each of those
possibilities is really nonsensical.


The way Bootstrap works is as flawed as the new, allegedly structural,
tags from HTML 5. It undoes nearly twenty years of progress to the point
where one might as well go back to writing HTML 3.2 and pretending that
CSS never even existed. It can only make one's work harder.


The HTML should say what things are, not how one wants them to look
like. By using classes to say what things are going to look like, one
violates that most basic rule of what HTML is actually for. That's why
OOCSS and the the frameworks based on that notion are utter rubbish.


If it looks simpler, one falls into the trap of false simplicity. It is as much if
not more work, resulting in one writing as much if not more code, not
counting the massive size of the framework against it. The only way it
could 'be simpler' or 'easier' or 'faster' is if one doesn't know enough
about HTML or CSS to to make a rational choice about using a framework.




coothead

[davidlee21]

The GOOD
Bootstrap was very good to us over the years. We became more efficient and put our projects out faster. The framework also thought us how to be better developers. I know a lot of people out there say that there are bad practices in the core of Bootstrap – the naming is not always semantic, and you can end up with a DOM crammed full of classes. But it does handle modularity very well and I personally grew as a frontend developer through it. By analyzing the internals of Bootstrap I picked up the good stuff it does and started to apply it to my own code. Because of this, with time I have learned to write extremely re-usable CSS code that is easy to maintain.


The BAD
What bugged me with Bootstrap is it’s heaviness and how I started using less of it’s features over the years. When I was starting out as a web developer like many others I didn’t regard performance. I thought – well its the year 20-something, Internet connections are pretty fast, what difference does 100kb here or there make? Oh how wrong was I! Over the years I learned every kilobyte counts and today I’m obsessed with making everything as lean as possible.

[juansann]

I haven't tried Bootstrap... I am going to valorate it, because I do not know how difficult it is to integrate it into a project. Is possible integrate Bootstrap in any CMS?

[wkennyspain]

It's a pity your reply did not offer the OP a better alternative

[coothead]

It's a pity your reply did not offer the OP a better alternative

Responsive web pages should be coded using em and % instead of px units.

CSS modifications for various screen widths are simply handled with @media queries.

This is not rocket science, it is a basic coding skill for a webpage developer.

Here is an example...



<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color:#f0f0f0;
font: 1em/1.62em verdana, arial, helvetica, sans-serif;
}
#gallery {
padding: 0.625em;
margin: 0;
border: 0.06em solid #999;
border-radius: 1em;
background-color: #fed;
overflow: hidden;
list-style-type: none;
}
#gallery li {
float: left;
width: 24%; /* 4 columns ~ 100%/4 - 1% margin value */
margin: 0.5%;
padding: 0.625em;
border: 0.06em solid #999;
border-radius: 0.75em;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0.375em 0.375em 0.375em #999;
overflow: hidden;
}
#gallery img {
display: block;
width: 100%;
height: auto;
border: 0.06em solid #000;
border-radius: 0.625em;
box-sizing: border-box;
}
#gallery span {
display: block;
margin-top: 0.625em;
border: 0.0625em solid #000;
border-radius: 0.625em;
background-color: #ccc;
line-height: 2;
text-align: center;
}
@media screen and (max-width: 63.75em) {
#gallery li {
width: 32.333%; /* 3 columns ~ 100%/3 - 1% margin value */
}
}
@media screen and (max-width: 42.5em) {
#gallery li {
width: 49%; /* 2 columns ~ 100%/2 - 1% margin value */
}
}
@media screen and (max-width: 21.25em) {
#gallery li {
width: 99%; /* 1 columns ~ 100%/1 - 1% margin value */
}
}
</style>

</head>
<body>

<ul id="gallery">
<li><img src="http://lorempixel.com/g/300/486/people/7" width="300" height="486" alt=""><span>description</span></li>
<li><img src="http://lorempixel.com/g/300/486/people/6" width="300" height="486" alt=""><span>description</span></li>
<li><img src="http://lorempixel.com/g/300/486/people/5" width="300" height="486" alt=""><span>description</span></li>
<li><img src="http://lorempixel.com/g/300/486/people/9" width="300" height="486" alt=""><span>description</span></li>
<li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
<li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
<li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
<li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
<li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
<li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
<li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
<li><img src="https://via.placeholder.com/300x486" width="300" height="486" alt=""><span>description</span></li>
</ul>

</body>
</html>



coothead

[vikasvirdi]

Bootstrap isn't bad, I think it is great and I always use it to make websites responsive and It works well!

[juansann]

Thank you for the example coothead, is going to help me very much... I have been studied about it and is not difficult, but is necessary experience to not spend lot time to do it ;)
Thank you again :)

[DriverDan12]

for css you have to learn how to use grids, easy way is to use bootstrap, but speed website will be little bit lower when you use Bootstrap. You can contact me if you need any help with css.

[Afflospark]

Hello,
First, I tell you that responsive web design is not a program or javascript. And it uses on HTML or CSS.
You can also use bootstrap with these languages to make your website better-looking and more user friendly.
Hope this will help you.
Thanks

[Afflospark]

After reading all the above comments, I was wondering, Why do you guys even need to create a new one when you copy it from available ones.
I was using WordPress for years. But now I needed a custom website with just 3 pages (Home, About-Us, ContactUs), I tried to create a new CSS file which can provide me responsive layout with mobile as well as desktop. But couldn't create. Then I just checked my WordPress website and copied its style.css (How to open Wordpress CSS file (https://www.experthoot.com/customize-wordpress-themes/)) and pasted it to my new website.
Actually, it worked well, and I'm still using it.

You can also try this method if you are lazy to write your own CSS.
Thanks

[jason23160]

Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. 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.