Making DIVs look correctly aligned on other resolutions and screen sizes?

Question

I have been working on this website and I have it coded looking perfect on my computer and perfect when I shrink it to mobile size. But, when I look at it on my laptop, the DIV with the text on the left is always either bumped up or bumped down out of place. Also on the laptop, in mobile size there is an unwanted space between the image/boxes. What would be the easiest way to work around this ? Am I setting everything up wrong? Plus, how can I account for every screen size and resolution? It seems maybe the text box could be done differently or something, to make it stay in place easier.

Any help would be GREATLY appreciated!

Head:


 <!DOCTYPE html>
<html>
<title>Jesse Ellis | Personal Chef</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Caladea&display=swap" rel="stylesheet">

CSS:


<style>


html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

body, html {
  height: 100%;
  line-height: 1.8;
  margin: 0;}

.firstrowpad{padding-top:0px; height: 50%; padding-bottom:0px;}

h1,h4,h5,h6 {font-family: 'Caladea', serif;}

h3{
font-family: 'Caladea', serif; 
font-weight: normal; 
font-size: 4em;
}

h2{
font-family: 'Caladea', serif; 
font-weight: normal; 
font-size: 2em;
}



.bgoverlay {
  position: relative;
  background-image: url("https://eaternalzest.com/wp-content/uploads/2019/04/08.0_Seafire_180219.jpg");
  background-size: auto;
}
.bgimg-1 {
  background-position: center top;
  background-repeat: no-repeat;
  top: 0;
  background-size: 100%;
  min-height: 71%;
}
.bgoverlay:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.9;
  background-color: #053426;
 }


.FirstRow{
  background-image: url("https://miro.medium.com/max/9792/1*-xHF1a7BT8hN8KsHbQCDSw.jpeg"); 
  background-position: right;
  background-color: #f1f1f1;
  background-repeat: no-repeat;
  background-size: 50%;
}

.HeaderFont{
 font-size: 1.5em; 
 top: 4%; 
 width: 20%;
 left: 51%;
 position: relative;
 background: #ffffff;
 opacity: 0.9;
 line-height: 19pt;
 padding: 20px;
 padding-top: 30px;
 padding-bottom: 30px;
 letter-spacing: 2px;
 font-family: 'Caladea', serif;
 border-right: solid #ccc 0px;
 border-radius: 25px;
 }

.HeaderBlog{
 font-size: 1.5em; 
 top: -24%; 
 width: 47.7%;
 height: 91%;
 overflow: hidden;
 left: 1%;
 position: relative;
 background: #ffffff;
 line-height: 30pt;
 padding: 30px;
 font-family: 'Caladea', serif;
 padding-bottom: 240px;
 padding-top: 90px;
 box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
 border: 20px solid #BF845C;
 }


hr.solid {
  border-top: 15px solid #733938;
  content: '';
}



@media screen and (max-width: 900px) { 

  .FirstRow {
 background-size: 100%;}

  .HeaderFont{
 display: none;}

 .HeaderBlog{
 display: none;}

.HeaderBlog2{
 font-size: 1.5em; 
 top: 250%;
 width: 100%;
 height: 50%;
 overflow: hidden;
 position: static;
 background: #ffffff;
 padding: 30px;
 display: inline-block;

 }

.bgimg-1 {
  background-position: center top;
  background-repeat: no-repeat;
  top: 0;
  background-size: 100%;
  min-height: 51%;
}

}

@media screen and (min-width: 1024px) { 

.HeaderBlog2{
display: none;}
}


</style>

HTML:


<header class="bgimg-1 bgoverlay">

</header>

<div class="FirstRow firstrowpad">

     <div class="HeaderFont"><center> ❝ A dining experience <br>from the comfort of <br>your own <i>home</i>. ❞</center></div>
<div class="HeaderBlog">

<font style="font-size: 2em;">⁣⁣⁣   J</font>esse Ellis is a personal chef for hire in Wilmington, NC and the surrounding area. Wether you are hosting, having a party, or just dinner with the family, he will cook in your kitchen 
and deliver custom quality meals. All you have to do is sit back and enjoy the food!<p><p>

<hr class="solid"></hr>



</div>
  </div>
<div class="HeaderBlog2">
<center>
Jesse Ellis is a personal chef for <br>hire in the Wilmington, NC area. <br>
Specializing in all types of foods, <br>
he cooks in your kitchen to deliver quality meals.<p><p>
</center>
<hr class="solid">

</div>
</div>

Positioning is a **very** poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out [**LearnLayout.com**](http://learnlayout.com/) — Paulie_D, Mar 05 '20 at 16:21
I am just getting back into coding after a gosh... 8 year break?? So it has definitely been a learning curb. — Jennifer T, Mar 05 '20 at 16:26

Making DIVs look correctly aligned on other resolutions and screen sizes?

0 Answers0