Search code examples
htmlcssformattingminimize

Issue with website formatting when I minimize the browser

The website is done and looks good when the browser is in maximized state but when I minimize the page, the heading and the footer changes its format and looks really bad. I need some help to fix this issue.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Some Title</title>
    <link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
    body {margin:0;
        background-image: url("Road.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;


    }
    .socialmedia {
        position:fixed;
        right:150px;
        top:35px;
        transform:translate(0,-50%);
        display: flex; /* add this */
        align-items: center; /* add this */
    }
    .preorder button {
        background-color: white;
        border: 0;
        height: 35px;
        width: 110px;
        margin-left: 35px;
    }
    .footer {
        display: flex;
        align-items: center;
        width: 100%;
        height: 90px;
        margin-top: 319px;
    }
</style>

<body>
<div class="Coming Soon" style=" color: white;">
    <h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1>

    <style>
        a{text-decoration: none;
            color: white;}
    </style>
    <div class="socialmedia">
        <img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
        <a class="Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class="Instagram">
            <a href="https://www.instagram.com/" target="_blank"><img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
        </a>
        <a class="Youtube">
            <a href="https://www.youtube.com/channel" target="_blank"><img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>

    </div>
    <p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p>
    <div class="footer" style=" color: white;">

        <p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
    </div>
</div>


</body>

</html>
Solution

  • Here is how I have a ton of my pages setup. This one uses Bootstrap components. I have a cutom.css page to override the Bootstrap css. 

     
    

    

     body {margin:0;
    background-image: url("Road.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
 p  {
 font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px;
  }
 h1 {
  text-align: center; font-family: Verdana; font-size: x-large; font-style: italic;
  }
 a  {
  text-decoration: none;
  color: white;
 }
 .Coming Soon {
 color: white;
 }
.Logo {
 width: 130px; height: 80px; margin-right: 100px;
 }
 .socialmedia {
    position:fixed;
    right:150px;
    top:35px;
    transform:translate(0,-50%);
    display: flex; /* add this */
    align-items: center; /* add this */
 }
 .preorder button {
    background-color: white;
    border: 0;
    height: 35px;
    width: 110px;
    margin-left: 35px;
 }
 .footer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 90px;
    margin-top: 319px;
 }
    

    <!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>WEBSITE TITLE HERE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<meta name="Description" content="ADD DESCRIPTION.">
<meta name="Keywords" content="ADD KEYWORDS">
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<body>
<div class="container">
<div class="Coming Soon">
<h1>Some Header</h1>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
        <a href="https://www.facebook.com/" target="_blank"><img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
    </a>
    <a class="Instagram">
        <a href="https://www.instagram.com/" target="_blank"><img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
    </a>
    <a class="Youtube">
        <a href="https://www.youtube.com/channel" target="_blank"><img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
    </a>
 </div>
 <p>Some Paragraph</p>
 <div class="footer">
 <p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
 </div></div></div> 
 </body>
 </html>