Menu
I'm working on the website and I'm trying to make it responsive to all resolutions but without success..
body {
width:1920px;
background-color: #f8e0b3;
height:1080px;
}
div.container {
width:100%;
height:100%;
}
div.header {
background:url(img/header.jpg);
width:100%;
height:46%;
margin-top:;
margin-left:;
border-bottom: 2px solid black;
}
h1.naslov {
font-size:60px;
color:white;
margin:0 auto;
margin-left:28%;
font-family: Aramis;
}
p.naslov-text {
font-size:40px;
color:#634ea9;
margin:0 auto;
width:1000px;
margin-top:0%;
margin-left:36%;
font-family: Aramis;
}<body>
<div class = "container">
<div class = "header">
<h1 class = " naslov "> Lorem ipsum nasov je? </h1>
<p class = "naslov-text">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit."
</p>
</div>
</div>
</body>When I resize my browser website doesn't resize. I've been trying all morning and I'm really burnout. Do anyone know what logic to approach to make this fit all screens , but only using css.
568
As you are giving a fixed width to your body and p.naslov-text, your website will not resize. Remove all px sizing and replace them with percentage values.
But if you want fixed sizes and also responsive you must use css media queries like that:
body
{
width:1920px;
background-color: #f8e0b3;
height:1080px;
}
@media screen and (min-width: 500px) {
body {
width:420px;
}
}
@media screen and (min-width: 800px) {
body {
width:720px;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
