CODEWITHSUNDEEP
htmlcssresponsive-design
Mike.Whitehead
Mike.Whitehead

Reputation: 818

CSS - Header elements not floating properly when re-sizing

I'm currently adding all media queries to a site and I'm stuck with some of the header elements that refuse to float properly when I resize below 480px to mobile-wide. I want my Logo to stretch across the page and all the other elements to float on top of each other. At the moment the phone/email are side by side and social media icons are stuck on the left and won't display inline across the page. I've tried all variants of display rules but they won't budge.

body {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

body {
  margin: 0 auto 0 auto;
}

.container {
  margin: auto;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

header {
  background: #ffffff;
  height: 100px;
  top: 0;
  z-index: 10;
}

.left-header {
  background: white;
  width: 50%;
  float: left;
  height: 100px;
}

.right-header {
  background: white;
  width: 50%;
  float: right;
  height: 50px;
}

.right-header-top {
  background: white;
  float: right;
  width: 100%;
  height: 100%;
  margin-right: 100px;
}

.right-header-bottom {
  background: white;
  float: left;
  width: 100%;
  height: 100%;
}

#logo {
  margin-left: 60px;
  margin-top: 50px;
}

nav {
  float: left;
  font-weight: 400;
}

nav a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  margin-right: 25px;
  font-size: 12px;
}

div#contact {
  float: right;
  margin-right: 20px;
}

div#contact img {
  display: inline-block;
  border: 10px;
  margin: 20px;
  width: 30px;
  height: 30px;
}

div#contact p {
  display: inline-block;
  margin-top: 25px;
  font-size: 10px;
}

.right-header-bottom i {
  height: 10px;
  width: 10px;
  border: 15px;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  margin-left: 10px;
}

a {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #000000;
}

@media screen and (max-width: 1000px) {
  div.container {
    float: none;
    margin: 0 20px 0 20px;
  }
  div.column {
    float: none;
  }
}

@media screen and (max-width: 480px) {
  header {
    float: none;
    height: auto;
  }
  nav {
    float: none;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
  }
  nav a {
    display: block;
  }
  .right-header {
    height: auto;
    width: auto;
  }
  .right-header-top {
    float: none;
  }
  .right-header-bottom {
    float: none;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <div class="left-header">
    <img src="http://localhost:8888/wp-content/uploads/2017/07/Logo.png" alt="logo" id="logo" style="width:250px;height:30px;">
  </div>
  <div class="right-header">
    <div class="right-header-top">
      <div id="contact">
        <img src="http://localhost:8888/wp-content/uploads/2017/07/phone.png">
        <p>0113 220 5265</p>
        <img src="http://localhost:8888/wp-content/uploads/2017/07/email.png">
        <p>[email protected]</p>
      </div>
    </div>
    <div class="right-header-bottom">
      <nav>
        <a href="index.html">HOME</a>
        <a href="portfolio.html">PORTFOLIO</a>
        <a href="business.html">PRODUCTS</a>
        <a href="about.html">ABOUT</a>
        <a href="contact.html">CONTACT</a>
        <a href="blog.html">BLOG</a>
      </nav>

      <i class="fa fa-facebook" aria-hidden="true"></i>
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <i class="fa fa-youtube-play" aria-hidden="true"></i>
      <i class="fa fa-linkedin" aria-hidden="true"></i>
    </div>
  </div>
</header>

Here's how it looks -

Mobile-wide RWD

Upvotes: 0

Views: 479

Answers (2)

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

You've got a lot of floats to kill.

A few things to display block and some text to align enter.

body {
	font-family: "Merriweather Sans", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333333;
}


body {
  
  margin: 0 auto 0 auto;
  
}

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}


header {
	background: #ffffff;
	height: 100px;
	top: 0;
	z-index: 10;
}


.left-header { background:white; width:50%; float:left; height: 100px; }


.right-header { background:white; width:50%; float:right; height: 50px;  }

.right-header-top { background: white; float: right; width: 100%; height: 100%; margin-right: 100px; }

.right-header-bottom  { background: white; float: left; width: 100%; height: 100%; }

#logo {

	margin-left: 60px;
	margin-top: 50px;
}

nav {
	float: left;
	font-weight: 400;
}

nav a {
	color: #000000;
	text-decoration: none;
	display: inline-block;
	margin-top: 15px;
	margin-right:  25px;
	font-size: 12px;
	
}

div#contact {
	
	float: right;
	margin-right: 20px;
}

div#contact img {
	display: inline-block;
	
	border: 10px;
	margin: 20px;
	width: 30px;
	height: 30px;

}

div#contact p {
	display: inline-block;
	margin-top: 25px;
	
	
	font-size: 10px;
}


.right-header-bottom i {
	height: 10px;
	width: 10px;
	border: 15px;
	float: left;
	margin-top: 15px;
	margin-right: 10px;
	margin-left: 10px;
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #000000;
}

@media screen and (max-width: 1000px) {
  div.container {
    float: none;
    margin: 0 20px 0 20px;
  }

  div.column {
    float: none;
   
  }
}

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


  header {
    float: none;
    height: auto;
   
  }

  nav {
    float: none;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  nav a {
    display: block;
    
  } 

  .right-header {
    
   height: auto;
    width: auto;
  }

  .right-header-top {
    float: none;
  }

  .right-header-bottom {
    float: none; 
  }
  
}
  
/* Added Styles */
  
.left-header {
    display: block;
    float: none;
    width: 100%;
    height: auto;
}

img#logo {
    min-width: 100%;
    margin: auto;
    height: auto !important;
}

.right-header {
    display: block;
    float: none;
    width: 100%;
    height: auto;
}

div[class*="header"] {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    text-align: center;
}

div#contact {
    float: none;
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
}

header {
    height: auto;
}

body {
    max-width: 500px;
    border: 1px dashed #ccc;
    min-height: 400px;
}

nav {
    float: none;
    width: 100%;
    text-align: center;
}

.right-header-bottom i {
    float: none;
}

/* Centered Nav, Email & Phone */

h1 {
    text-align: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0px;
    margin-top: 100px;
}

h1 {
    text-align: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0px;
    margin-top: 100px;
}

div#contact
 > div img {
    margin: auto;
}

div#contact
 > div p {
    margin: auto 10px;
    line-height: 3em;
    vertical-align: top;
}

div#contact
 > div:first-of-type {
    margin-bottom: 10px;
}

nav.block a {
    display: block;
    margin: 10px auto;
}
<head>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

		
</head>

<body>
		
<header>
        <div class="left-header">
            <img src="https://placehold.it/500x100" alt="logo" id="logo" style="width:250px;height:30px;">
        </div>
    <div class="right-header">
         <div class="right-header-top">
            <div id="contact">
                <img src="https://placehold.it/50x50">
                <p>0113 220 5265</p>
                <img src="https://placehold.it/50x50">
                <p>[email protected]</p>
            </div>    
         </div>
         <div class="right-header-bottom">
            <nav>
                <a href="index.html">HOME</a>
                <a href="portfolio.html">PORTFOLIO</a>
                <a href="business.html">PRODUCTS</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">CONTACT</a>
                <a href="blog.html">BLOG</a>


            </nav>

                <i class="fa fa-facebook" aria-hidden="true"></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <i class="fa fa-youtube-play" aria-hidden="true"></i>
                <i class="fa fa-linkedin" aria-hidden="true"></i>
         </div>
    </div>
	</header>
  
</body>

<h1>Center Nav, Email & Phone</h1>

<head>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

		
</head>

<body>
		
<header>
        <div class="left-header">
            <img src="https://placehold.it/500x100" alt="logo" id="logo">
        </div>
    <div class="right-header">
         <div class="right-header-top">
            <div id="contact">
                <div>
                  <img src="https://placehold.it/50x50">
                  <p>0113 220 5265</p>
                </div>
                <div>
                  <img src="https://placehold.it/50x50">
                  <p>[email protected]</p>
                </div>
            </div>    
         </div>
         <div class="right-header-bottom">
            <nav class="block">
                <a href="index.html">HOME</a>
                <a href="portfolio.html">PORTFOLIO</a>
                <a href="business.html">PRODUCTS</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">CONTACT</a>
                <a href="blog.html">BLOG</a>


            </nav>

                <i class="fa fa-facebook" aria-hidden="true"></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <i class="fa fa-youtube-play" aria-hidden="true"></i>
                <i class="fa fa-linkedin" aria-hidden="true"></i>
         </div>
    </div>
	</header>
  
</body>

Upvotes: 2

McHat
McHat

Reputation: 860

get rid of float: right on div#contact and change display: inline-block to display: block on nav a

-OR-

Use this CSS for your nav:

nav {
  display: flex;
  flex-direction: column;
}

nav a {
  align-self: center;
}

And you still have to kill the float on the header.

Here is a useful fiddle I keep in my bookmarks for flexbox reference. It shows everything flexbox can do and makes it relatively easy to understand: https://codepen.io/enxaneta/full/adLPwv

Upvotes: 0

Related Questions