CODEWITHSUNDEEP
htmlcss
esim
esim

Reputation: 49

Website content moves when I resize window

I'm working on a website and I'm having some trouble. When I resize the browser window or use a different device to access the website everything moves and pushes stuff out of the way which results in a big mess. I'm not sure how to fix it and need someone to explain what I'm doing wrong.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>asdadasdasd</title>
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
</head>
<body>
<!--- Start  BODY wrapper -->
<div id="wrapper">
    <div id="top">
        <div id="facebook">
            <a href="#">
                <img src="img/f.png">
            </a>
        </div>
        <div class="verticalline"></div>
        <a href="#"><img src="img/a.png">
        <h3> left road</h3></a>
        <div class="verticalline"></div>
        <img src="img/p.png">
        <h3>00 000 0000</h3>
        <div class="verticalline"></div>
        <img src="img/m.png">
        <h3>[email protected]</h3>
    </div>
    <div id="upper">
        <div id="logo">
            <a href="#"><img src="img/logo.png"></a>
        </div>
        <nav>
            <ul id="navmenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Prices</a></li> 
                <li class="active"><a href="index.html">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div id="bod">
        <div id="mapcontainer">
            <h2>Map</h2>
                <iframe src="#></iframe>
        </div>
        <div id="detailsm">
            <h2>Contact Info</h2>
            <h3>Automotive<br /></h3>
            <p>left road</p>
            <p>street</p> 
            <p>town 0110</p>
            <h3>Phone</h3>
            <p>00 000 0000</p>
            <p>00 000 0000</p>
            <p>00 000 0000</p>
            <h3>Email</h3>
            <p>[email protected]</p>
        </div>
    </div>
    <div id="linev"></div>
    <div id="footer">
        <div id="cont">
            <div id="logof"><a href="#"><img src="img/logo.png"></a>  </div>
            <div id="mapf"><a href="#"><img src="img/map2.png"></a>  </div>
        </div>
        <div id="details">
            <h2>wqw Automotive</h2>
            <p>left Street</p>
            <p>town</p> 
            <p>town 0110</p>
            <h2>Phone</h2>
            <p>00 000 0000</p>
            <p>00 000 0000</p>
            <p>00 000 0000</p>
            <h2>Email</h2>
            <p>[email protected]</p>
        </div>
        <div id="copyright"><p>© 2016 00 000 0000</p></div>
    </div>
    </div>  
</div>
<!--- End  BODY wrapper -->
</body>
</html>

CSS

*{
margin: 0;
font-family: 'Playfair Display', serif;
padding: 0;
}
#wrapper {
margin-left:auto;
margin-right:auto;
}
#top{
background-color: #0000FF;
border-bottom: 3px solid #0000cd ;
height: 40px;
}
#top img{
float: left;
height: 30px;
padding: 5px 0 0 50px;
}
#top h3{
color: #FFFFFF;
float: left;
padding: 5px 50px 5px 15px;
}
#facebook img{
padding: 5px 50px 5px 50px;
}
.verticalline{
border-left: solid #FFFFFF;
border-width: 2px;
height: 30px;
padding: 5px;
float: left;
}
#upper{
border-bottom: 3px solid #0000cd ;
}
#logo img{
height: 60px;
padding: 15px 200px 0 150px;
float: left;
}
 nav ul{
padding: 30px;
}
nav ul li{
list-style: none;
display: inline;
padding-left: 50px;
 }
nav a{
color: #696969;
text-decoration: none;  
font-size: 25px;
padding: 7px 7px;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
nav a:hover{
color: #0000FF;
border-bottom: 2px solid #0000FF ;
}
#bod{
color:  #696969;
padding: 25px 50px;
overflow: hidden;
}
.active a{
color: #0000FF;
border-bottom: 2px solid #0000FF ;
}
#mapcontainer{
float: left;
padding-right: 250px ;
}
#mapcontainer h2{
padding-bottom:10px;
text-align: center;
}
#detailsm{
padding: 30px 0 0 100px;
}
#detailsm h2{
padding-bottom: 10px;
}
#detailsm h3{
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
color: #696969;
}
#linev{
border-top: 3px solid #0000cd;
}
#footer{
background-color: #0000FF;
color: white;
overflow: hidden;
}
#cont{
padding: 35px 100px 0 140px;
float: left;
}
#logof img{
height: 45px;
}
#mapf img{
height: 150px;
padding: 20px 0 0 80px;
}
#details{
padding: 40px;
text-align: center;
color: white;
overflow: hidden;
}
#details h2{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
}
#copyright{
clear: left;
float: right;
padding: 0 60px 10px 0px;
font-size: 10px;
}

Upvotes: 0

Views: 887

Answers (1)

Pedro Castilho
Pedro Castilho

Reputation: 10512

When you resize a browser window or access a webpage from a different device (which, since the device's screen is differently-sized from your computer's browser, pretty much does the same as resizing the window), the website's content will be readjusted so it fits the new screen.

To understand how exactly the element positions are computed, you should familiarize yourself well with how CSS properties influence position. Actually, if you have time, it would be a good idea to go through Mozilla's entire CSS Tutorial in order to make sure you really understand what makes your page look the way it does.

However, even with good knowledge of CSS, it's actually quite hard to get a page to look good on all screen sizes. However, there are many frameworks that can help you with that. A popular example is Twitter Bootstrap, which is used in a huge amount of websites nowadays. If you don't plan on supporting older browsers, an alternative is a new feature in CSS called Flexbox, which is based on boxes that resize themselves according to screen size.

Both options are very powerful and take some getting used to, but can really simplify the process of getting your website to look the way you want it to, no matter what screen size it is shown on.

I hope I have been helpful, and wish you the best of luck!

Upvotes: 2

Related Questions