html/css to fit all screen resolution

Question

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.

Please provide a fiddle. And in the h1-element, the class has some whitespaces in it. I would delete them — Michael Schmidt, Apr 07 '14 at 11:28
You are setting a width and height of body in pixels. Thats strange both in general and for something that should be responsive. — pethel, Apr 07 '14 at 11:30
But when I put body 100% 100% then it fits my screen 100%. And my screen is 1680 x 1050. I want to make it fits 1920 x 1080 and smaller. — user3477366, Apr 07 '14 at 11:34
I've managed to fix the width and that is working properly. But now height is problem. Height 100% is height of screen - but when I pass that height and scroll show height 100% become problem. Do anyone know how to fix height to work with resizing? — user3477366, Apr 07 '14 at 17:16

score 3 · Answer 1 · answered Apr 07 '14 at 11:35

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;
   }
}

score 2 · Answer 2 · edited May 23 '17 at 12:02

CSS:

#gallery-1 img {
   width:375px;
}
@media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}

Reference: Stack Over Flow

JQUERY:

Use jquery for resize window. This one is dynamic code for window resizing for all browsers.

Example code here using jquery:

$(document).ready(function(){
    $(window).resize();
});
$(window).resize(function{
    // your code
    var windowWidth=$(window).width();
    var mainContainerWidth=windowWidth-100; // For example
    $("#yourMainContainer").css({"width":mainContainerWidth+"px"});
});

like that you will try for your main class width and height.

score 0 · Answer 3 · answered Apr 07 '14 at 11:32

0

You have a fixed width on your body

answered Apr 07 '14 at 11:32

Johansrk

5,160
3
38
37

score 0 · Answer 4 · answered Apr 07 '14 at 11:35

Remove width (in "px") from body and also from p.naslov-text. Try to give width:100%; to get responsive layout Fiddle

CSS:

body {
    background-color: #f8e0b3;
    height:1080px;
    width:100%;
}

p.naslov-text {
    font-size:40px;
    color:#634ea9;
    margin:0 auto;
    margin-top:0%;
    margin-left:36%;
    font-family: Aramis;
}

score 0 · Answer 5 · answered Apr 07 '14 at 11:38

Hope this helps..

FIDDLE

CSS

body
{
    width:100%;
    background-color: #f8e0b3;
    height:100%;
}
div.container
{
width:100%;
height:100%;
}
div.header
{
background:url(img/header.jpg);
width:100%;
height:100%;
    margin: 2% 2% 2% 2%;
    border-bottom: 2px solid black;
}
h1.naslov
{
    font-size:60px;
    color:white;
    margin:0 auto;
    float:none;   
    font-family: Aramis;
}
p.naslov-text
{
font-size:40px;
color:#634ea9;
margin:0 auto;
margin-top:0%;
float:left;
font-family: Aramis;
}

Also try to use media Query for whatever resolution you want..

score 0 · Answer 6 · answered Apr 07 '14 at 12:04

hello you should use @media screen in your css and you should use % instead px.

@media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}

html/css to fit all screen resolution

6 Answers6

Linked