Divs moving downward when I resize the browser

HTML & CSS
1

All my divs are moving down about 5-10px when I resize my browser from full screen to about cell phone size. I have my divs as headings which are two names and a ring image. I have a treehouse workspace link for everyone to see what I’m talking about as well as the source code. I’ll also post the code below.
https://w.trhou.se/054p1vz3tv click the preview workspace to see the index.html file

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

 <link rel="stylesheet" type="text/css" href="Main.css">

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

</head>

<body>

 <div class="wrapper">
        <div class="michael">
            <p class="m">Michael</p>
            </div> 
        <div class="ringhead">
        
        </div>
        <div class="christina">
            <p class="c">Christina</p> 
        </div> 
        <div class="weddingWebsite">
         
        </div


  </body>
</html>

.wrapper {
    width: 497px;
    height: 100px;
    margin: 0 auto;
    /* padding: 0 5%; */
    display: block;



}

.michael {
    color: #EEE8AA;
    position: relative;
    text-transform: uppercase;
    font-size: 30px;

    float: left;
    display: inline-block;
    border: 1px white;
    /* max-width: 100%; */
    /* max-height: 100%; */
    /* left: 30%; */
    /* top: 0%; */

}

.m{
    max-width: 100%;
    max-height 100%;    

}


.michael{


}


.ringhead {
    position: relative;
    /* max-width: 100%; */
    /* max-height: 100%; */
    float: left;
    bordr: 1px solid black;
    display: inline-block;
    /* left: 50%; */
    /* top: 4%; */
}

.ring{
 max-width: 80%;
 max-height: 60%;
} 

.christina {
    color: #EEE8AA;
    position: relative;
    float: left;
    borer: 1px solid black;
    /* top: 0%; */
    text-transform: uppercase;
    font-size: 30px;
    padding-left: 10%;
    /* max-width: 100%; */
    /* max-height: 100%; */

}

 .c{
     max-width: 80%;
     max-height: 60%;  

 } 

 body{ 
    background-image: url("Images/Top Banner.jpg"), url("Images/Middle Banner.jpg"), url("Images/Bottom Banner.png");
     background-size: 100% 10%, 100% 15%, 100% 100%;  
     background-repeat: no-repeat;
     background-attachment: fixed;   

 }
.weddingWebsite{

     position: fixed;
     top: 55%;
     left: 55%;
     transform: translateX(-55%) translateY(-55%);
     max-width: 80%;
    max-height: 60%; 

}

  .wedding{

      max-width: 80%;
      max-height: 60%;
  }
2

FYI had to remove two images because i’m a new poster. just use your imagination for the two divs with nothing in them. They are listed below
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" enter code herewidth="100" height="60">

i’ll post the other one below this message

3

<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website" width="350" height="50">

4

Hi,

Do you have a live version that we can see in action as I can’t see that the code you posted is really going to show the problem?

Otherwise maybe a screenshot showing the differences you are referring to would be helpful.

All I see is that the centre div moves upwards when you get down to 500px wide because the horizontal scrollbar kicks in and takes up some of the available space.

I don’t see a move downwards anywhere and indeed you don’t have the viewport meta tag in place so mobile view will just be a scaled view of the desktop version.

5

thank you. if you click on the link that i posted in the thread it will take you to my workspace. click fork workspace in the upper right hand corner then click workspace in the middle of the screen and then click preview workspace in the upper right hand corner.

6

I don’t believe I am seeing the same page as you as I do not have a Treehouse account.

All I see on top right is “Fork Snapshot” which if clicked prompts me to login or create an account.

7

8

that image is has been resized down to the size of a smartphone. The 3 headings are too close toward the image. The 3 headings should be about 5 pixels backward when resized.down to the size of a smartphone like they are now.

9

The names and the wedding ring are actually setting on the Middle Banner when they should be a pixel off the boarder when resized from full screen were they reside at one pixel from the Middle Banner.

10

Hi,

The headings Michael and Christina do not move at all and stay in the same position (you mentioned three headings so I assume you mean the image in the middle?).

The div in the middle (weddingWebsite) is vertically and horizontally centred and will move with the browser window. It has no relationship with the headings above it, The div will move upwards as you make the height of the browser smaller and thus be closer to and eventually overlap your headings.

As you can see from your screenshot your headings will not fit on a mobile and will cause a scrollbar to appear as shown in your screenshot. All of this is ‘moot’ unless you add the viewport meta tag anyway as all you will get on mobile is a scaled down version of the desktop site.

You do have a typo here where you missed the colon.

.m {
max-width: 100%;
max-height 100%;
}

It should be:

.m {
max-width: 100%;
max-height: 100%;
}

You have also spelled border wrong in a couple of places so make sure you validate your html and css regularly.

bordr: 1px solid black;

borer: 1px solid black;

You lost me there :slight_smile:

The names and wedding ring are nowhere near the weddingWebsite div.

Here is what I see on desktop (with some random images added in).

1416×801 111 KB

This is what your site would look like on mobile.

506×753 48.9 KB

It looks like that because there is no viewport meta tag.

If you used a viewport meta tag it would look like this on mobile.

510×769 76.3 KB

The middle image is offset and not centred because the headings are too wide and cause a scrollbar.

Hope this explains some of what you are seeing.:slight_smile:

11

yes I did here something about a viewport meta. what would be the syntax for that

12

1328×509 268 KB

13

14

First image is full screen and second image is resized to smartphone size. Notice how the divs move down the page when going from full to small screen. that’s my whole issue and no one can figure it out for days i’ve been trying to find an answer.

15

Hi,

That page doesn’t seem to be using the same code as in the example you posted. The screenshots I posted come from this html.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" type="text/css" href="Main.css">
<style>
.wrapper {
	width: 497px;
	height: 100px;
	margin: 0 auto;
	/* padding: 0 5%; */
    display: block;
}
.michael {
	color: #EEE8AA;
	position: relative;
	text-transform: uppercase;
	font-size: 30px;
	float: left;
	display: inline-block;
	border: 1px white;/* max-width: 100%; *//* max-height: 100%; *//* left: 30%; */
    /* top: 0%; */

}
.m {
	max-width: 100%;
	max-height: 100%;
}
.michael {
}
.ringhead {
	position: relative;
	/* max-width: 100%; */
    /* max-height: 100%; */
    float: left;
	border: 1px solid black;
	display: inline-block;/* left: 50%; *//* top: 4%; */
}
.ring {
	max-width: 80%;
	max-height: 60%;
}
.christina {
	color: #EEE8AA;
	position: relative;
	float: left;
	border: 1px solid black;
	/* top: 0%; */
    text-transform: uppercase;
	font-size: 30px;
	padding-left: 10%;/* max-width: 100%; *//* max-height: 100%; */
}
.c {
	max-width: 80%;
	max-height: 60%;
}
body {
	background-image: url("http://lorempixel.com/400/200"), url("http://lorempixel.com/400/200"), url("http://lorempixel.com/400/200");
	background-size: 100% 10%, 100% 15%, 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.weddingWebsite {
	position: fixed;
	top: 55%;
	left: 55%;
	transform: translateX(-55%) translateY(-55%);
	max-width: 80%;
	max-height: 60%;
}
.wedding {
	max-width: 80%;
	max-height: 60%;
}
</style>

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

</head>

<body>
<div class="wrapper">
  <div class="michael">
    <p class="m">Michael</p>
  </div>
  <div class="ringhead"> <img  src="http://lorempixel.com/100/60" class="ring"  alt="Wedding Ring" width="100" height="60"> </div>
  <div class="christina">
    <p class="c">Christina</p>
  </div>
  <div class="weddingWebsite"> <img class="wedding" src="http://lorempixel.com/350/350" alt="Wedding Website" width="350" height="350"> </div>
</div>
</body>
</html>

I suggest you sign up for a codepen account (free) and then create the page there so that we can all see it live. If you can’t link to your real images then do as I have done and use a service like lorem pixel to display random images.

e.g.

<img src="http://lorempixel.com/100/60" class="ring" alt="Wedding Ring" width="100" height="60">

This is the tag you need in the head of the page.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without that tag the mobile view will just be a scaled down version of what the site looks like at 980px. See my screenshots to understand this.

Once you get the codepen up and running with all the code that you are using then we can start to help properly as you have a number of logic errors and bad practices going on (such as squashing and stretching images - you always want to maintain aspect ratio which means that when you change the width then the height must also change at the same rate to maintain aspect ratio). If you are going to fix position the weddingsite div then there is no way to control what elements it will overlap at smaller screen views so you will have to be careful width this.

Your screenshots do not suggest this and it just looks the wedding div is overlapping the text which seems to be where it always was. Of course its hard to tell from just that screenshot and without full access to the actual page :slight_smile:

If you can get a codepen up and running we can sort this out in minutes for you.

2 Likes
16

Thank you for all of your help, I’ll get a codepen up soon but I’ll actually have my website domain up tonight and I can post the link in here. I will upload two more screen shots and code. The first screen shot is in full screen. This is how I want the screen to look when I resize it into a smaller screen. The second screen shot is the smaller screen. As you can notice this is not the desired effect that i’m looking for. I also have added the viewport meta code in the html.

17

1909×869 701 KB

18

456×599 86.2 KB

19 
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="Main.css">

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
 
  
 
 
 
 
  

  
  
  
</head>

<body>
 

        <div class="michael">
            <p class="m">Michael</p>
            </div> 
        <div class="ringhead">
            <img  src="Images/gold.gif" class="ring"  alt="Wedding Ring" `enter code here`width="100" height="60">
        </div>
        <div class="christina">
            <p class="c">Christina</p> 
        </div> 
        <div class="weddingWebsite">
            <img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website" width="350" height="50">
        </div
  
  
  </body>
</html>

…

.wrapper {
    width: 497px;
    height: 100px;
    margin: 0 auto;
    /* padding: 0 5%; */
    display: block;
	 
	
	
}

.michael {
 width: 100px;
 height: 90px;
  
}

.m{
   
    color: #EEE8AA;
    position: fixed;
    text-transform: uppercase;
    font-size: 30px;
    margin: 0px;
    
  display: inline-block;
    border: 1px white;
    /* max-width: 100%; */
    /* max-height: 100%; */
    left: 30%; 
    top: 6%; 
    max-width: 50%;
	max-height: 50%;
	padding-right: 10%;
	 
}





.ringhead {
    width: 100px;
	height: 90px;
}

.ring{
 
 
   position: fixed;
    /* max-width: 100%; */
    /* max-height: 100%; */
    float: left;
    bordr: 1px solid black;
    display: inline-block;
    left: 50%; 
     top: 4%; 
    margin: 0px;
	max-width: 100%;
	max-height: 100%;
	
} 

.christina {
    
	width: 100px;
	height: 90px;
	
}

 .c{
    
	left: 55%; 
     top: 6%; 
    margin: 0px;
	color: #EEE8AA;
    position: fixed;
    float: left;
    borer: 1px solid black;
    /* top: 0%; */
    text-transform: uppercase;
    font-size: 30px;
	padding-left: 10%;
    
	
	 
 } 

 body{ 
    background-image: url("Images/Top Banner.jpg"), url("Images/Middle Banner.jpg"), url("Images/Bottom Banner.png");
     background-size: 100% 10%, 100% 15%, 100% 100%;  
     background-repeat: no-repeat;
     background-attachment: fixed;   
	 
 }
.weddingWebsite{
   
	 position: fixed;
     top: 55%;
     left: 55%;
     transform: translateX(-55%) translateY(-55%);
     max-width: 80%;
    max-height: 60%; 
     
}
  
  .wedding{
	   
      max-width: 80%;
      max-height: 60%;
  }
20

Good that will make it a lot easier to debug :slight_smile:

(I’m just off out now anyway so will take a look later)