Help CSS

[hardquestionsforum]

I’m working on the layout of my articles. this is an example of how it was before https://hard-questions.com/articoli/perso-corsair.html
This is an example of how it is now https://hard-questions.com/pp
as you can see the article is more readable (being a bit narrower), only that if you look at the mobile version you will notice that the text is all squashed on the left in a column. How could I make the container smaller from desktop but from mobile extended to the whole screen?

[Fury_Phoenix]

Do you know @media selectors?

[hardquestionsforum]

I don’t know what it is @mediaselectors

[Ergastolator1]

This article explains what are @media queries:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[Oxy]

@hardquestionsforum

the first example uses css https://hard-questions.com/articoli/css/cssarticoli.css

another example uses a non-existent file and therefore many things do not work properly
https://hard-questions.com/css/cssarticoli.css

also many files do not exist (file PATH problem) like bootstrap, jquery, etc.

when you fix it then you probably won’t need this inline css

.paragrafi {
     margin-left: 300px;
     margin-right: 400px;
}

and if you really want it
then it is much better to use percentages (%) than pixel values
(especially when you want mobile compatibility).

.paragrafi {
     margin-left: 15%;
     margin-right: 15%;
}

means take 15% of the screen on the left (and right)
no matter what the resolution is

and when you define with pixels and say 300px
normally all of the content will escape to the right on low resolution devices