CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
bfunphoto
bfunphoto

Reputation: 105

Why won't my divs center within their parent?

I've got two divs within a parent div that I'm trying to switch over to 100% width after a specific media query so that they take up the whole screen. For some reason they just will not center and take up the whole width. What is causing this?

/*Non Media Query CSS */
.mainContent {
	width: 100%;	
	text-align: center;
	margin-top: 2%;
	margin-bottom: 2%;
	
}

.meContainer {
	width: 50%;
	float: left;
}

.me {
	width: 35%;	
}

.articleContainer {
	width: 50%;	
	float: right;
    text-align: left;
	padding-top:5%;
	margin:auto;
}

article {
	width:86%;	
	line-height: 115%;
    text-align:justify;
}

.container {
	width: 100%;	
	clear: both;
	text-align: center; 
}

/* The CSS I'm struggling With */



@media only screen and (max-width: 424px) {
.mainContent {
	width: 100%;	
	text-align: center;
	margin-top: 2%;
	margin-bottom: 2%;
	
}

.meContainer {
	width: 100%;
	clear:both;
	text-align: center;
	
}

.articleContainer {
	width: 100%;	
	clear:both;
    text-align: center;
	padding-top:5%;
}
}
<div class="mainContent">
	<div class="meContainer">
    	<img src="https://c2.staticflickr.com/6/5834/22284877876_c2a7d1f6e0_c.jpg" alt="Portrait of Brian Funderburke" class="me">
    </div>
    
    <div class="articleContainer">
        <article>
        Hi, I'm Brian Funderburke! I'm a freelance photographer and designer based in Fredericksburg, Virginia. My work has been featured in Photographer's Forum Annual Photography Contest as well as the Popular page on 500px. I've been shooting photography and designing since 2013, and have a Bachelor's in Graphic Design with a minor in photography. When not shooting photography or designing, I enjoy spending time hiking along the Blue Ridge Mountains, reading, and other hobbies.
        </article>
    </div>
</div>

Upvotes: 0

Views: 44

Answers (3)

HaulinOats
HaulinOats

Reputation: 3878

You may not even need the 'only screen' part. I only increased the size b/c my browser couldn't shrink to '424px'.

@media (max-width: 600px)

If the media query is actually firing, then the problem lies in your CSS in the media query. For me, your image centers and is on it's own line, and so is the 'article' text, you just need to center that inner <article> tag.

.articleContainer article {
  margin:0 auto;
}

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46549

The width of the article is 86%. Since you can't align a block element with text-align, it's still flush to the left.

Solution: give the article margin:0 auto.

/*Non Media Query CSS */

.mainContent {
  width: 100%;
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}
.meContainer {
  width: 50%;
  float: left;
}
.me {
  width: 35%;
}
.articleContainer {
  width: 50%;
  float: right;
  text-align: left;
  padding-top: 5%;
  margin: auto;
}
article {
  width: 86%;
  line-height: 115%;
  text-align: justify;
}
.container {
  width: 100%;
  clear: both;
  text-align: center;
}
/* The CSS I'm struggling With */

@media only screen and (max-width: 424px) {
  .mainContent {
    width: 100%;
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
  }
  .meContainer {
    width: 100%;
    clear: both;
    text-align: center;
  }
  .articleContainer {
    width: 100%;
    clear: both;
    text-align: center;
    padding-top: 5%;
  }
  article {
    margin: 0 auto
  }
}
<div class="mainContent">
  <div class="meContainer">
    <img src="https://c2.staticflickr.com/6/5834/22284877876_c2a7d1f6e0_c.jpg" alt="Portrait of Brian Funderburke" class="me">
  </div>

  <div class="articleContainer">
    <article>
      Hi, I'm Brian Funderburke! I'm a freelance photographer and designer based in Fredericksburg, Virginia. My work has been featured in Photographer's Forum Annual Photography Contest as well as the Popular page on 500px. I've been shooting photography and
      designing since 2013, and have a Bachelor's in Graphic Design with a minor in photography. When not shooting photography or designing, I enjoy spending time hiking along the Blue Ridge Mountains, reading, and other hobbies.
    </article>
  </div>
</div>

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

you have given float property in child div's also so you have to give following css to child div

@media only screen and (max-width: 424px) {
.meContainer, .articleContainer{
    width: 100%;
    float:none; 
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;

}

Upvotes: 1

Related Questions