Cordial Greeting.
I have a huge problem ...
What happens is that I'm learning with this from websites, and make one, but obviously it only looks good on my computer screen, it's not responsive, I have a lot of styles, and I have not managed to make it look so less well on several screens, I do not know how else I can do it, someone can guide me.
Thank you.
To make a responsive website on your own you need media queries , these are rules that define styles at different resolutions for the elements you define in these, for example:
/* estos estilos son los que se aplican por defecto en tu sitio */
.col{
width: 45%;
background: #42F;
display:inline-block;
margin: 10px 0px;
}
.col h1{
font-size:55px;
color: #289;
text-align: center;
padding: 10px;
}
.col p{
font-size:20px;
color: #BB1;
padding: 10px;
}
/* aqui es donde reescrbes los valores que definiste,
no es necesario poner todos los valores completos, solo
lo que quieres que se vea diferente cuando hay un cambio de
resolución
Para evitar conflictos siempre coloca los media queries
al final de tu hoja de estilos
*/
@media (min-width: 768px) and (max-width: 959px) {
.col{
background: #3B1 !important;
}
.col h1{
font-size:30px;
padding: 5px;
}
.col p{
font-size:19px;
color: #B1C;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.col{
background: #6F0 !important;
width: 90%;
}
.col h1{
font-size:25px;
padding: 5px;
}
.col p{
font-size:14px;
color: #3C1;
}
}
@media (min-width: 0px) and (max-width: 479px) {
.col{
background: #DDD !important;
width: 100%;
}
.col h1{
font-size:21px;
padding: 5px;
}
.col p{
font-size:12px;
color: #1CF;
}
}<div class="col">
<h1>Titulo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col">
<h1>Titulo 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>Note: Run the snippet in fullscreen or in a normal way and resize the width of the browser to see the results. I leave the link with more information about media queries.
By means of half queries you can adjust the styles you want for each resolution, just rewrite the value for each selector.
On the other hand, one of the main paradigms of software development is not to reinvent the wheel. So, at present we have frameworks that make our work easier, with predefined classes that are ready for us to use. They are very simple to use, most work with the concept of grids and columns and have a series of utilities that solve some other problems that arise in the layout of websites.
I leave a list with most popular frameworks:
Bootstrap 4 is mobile first, which means that all your classes are oriented first to look good on mobile and then desktop.
> How is this achieved?
Well, if you do not want to use bootstrap, I recommend you look for responsive design .
Mainly about media queries that are queries in css or javascript to identify the size of the screen and use one style or another.
for example in CSS :
/* Si la pantalla es 601px o más, setea el font-size de <div> a 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* Si la pantalla es 600px o menos, setea el font-size de <div> a 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
and javascript :
function myFunction(x) {
if (x.matches) { // si la media query coincide
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // se llama la función en la ejecución
x.addListener(myFunction) // se adjunta función listener si el estado cambia