CODEWITHSUNDEEP
htmlcssresponsive-designcss-transitions
Nick87
Nick87

Reputation: 83

Header Responsiveness issue

I am trying to make the header for a site but i have a issue when it comes to responsiveness on height.

And something i am not sure that it can be resolved with media queries breakpoints as you can see from the photo below. issue

and here is how it looks on full window

enter image description here

Html

 <body>
    <header class="header"> 
       <div class="logo-box"></div>
       <img src="/img/logo-white.png" class="logo">
       <div class="text-box">
          <h1 class="heading-primary">
             <span class="heading-primary-main">City</span>   
             <span class="heading-primary-sub">is where life happens</span>   
          </h1>
          <a href="#" class="btn btn-white">Discover our City</a>
          <a href="#" class="btn btn-white">Discover our Tours</a>
       </div> 
    </header>
 </body>

CSS

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
}

.header{
    height:65vh;
    background-image: linear-gradient(to right  bottom, rgba(132,248,198 , 0.8), rgba(26,187,137,0.8)),url(../img/ch4.jpg);
    background-size: cover;
    background-position: top;
    background-color:#4FD1A9;
}
.logo-box{
    position: absolute;
    top:40px;
    left:40px;
}

.logo{
    height:35px;
}

.heading-primary {
    color:#fff;
    text-transform: uppercase;
}

.heading-primary-main{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
}

.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 15px;
    margin-bottom: 60px;
}

.text-box {
    display: inline-block;
    position: absolute;
    top:30%;
    left:50%;
    transform: translate(-50% ,-50%);
    text-align: center;
    
   
}

.btn:link, 
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding:15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    margin: 5px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgb(0,0,0,.2);
}

.btn:active {
    transform: translateY(-1px) ;
}

.btn-white {
    background-color: #fff;
    color:#777;
}

Should i make the entire header with CSS grid Layout breaking it its own parts?

Upvotes: 0

Views: 143

Answers (2)

Richard Hunter
Richard Hunter

Reputation: 2200

My solution is somewhat opinionated, but I think that's unavoidable for this kind of question as there's so many different ways that it could be done.

I take the view that the height of elements should be determined only by their contents. If it was the case that users were comfortable scrolling horizontally as well as vertically through a website, then responsive design would be a complete non-issue. Responsive Design only becomes necessary because we prevent horizontal scrolling. We should not therefore concern ourselves with the height of content, only with the width.

Accordingly, I've removed the fixed height from the header as well as the absolute positioning from some of the elements and allowed the content to be laid out according to the natural flow. For desktop, I think this works fine.

A slightly different approach is required for narrower screens since on these you do begin to have issues with the width of the content. My solution here is to introduce a break-point at around the point when the content starts to get too wide for the viewport. Then I set all dimensions - font-sizes, margins, padding etc - to be a proportion of the current viewport width. A little math is required here to calculate the correct values, and I've also used CSS Custom Properties to make things a bit DRYer. In fact, there's only one declaration within the media query, and that's to set the base-unit from which all other values are calculated.

I've made notes in the CSS giving the reasoning for some of the changes I've made.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
}

.header {
  --unit: 1px;
  /*  removing this since the height of an element should be determined by content */
  /* height:65vh;*/
  background-image: linear-gradient(to right bottom, rgba(132, 248, 198, 0.8), rgba(26, 187, 137, 0.8)), url(https://s.abcnews.com/images/Business/gty_detroit_mi_130718_4x3_992.jpg);
  background-size: cover;
  background-position: center;
  background-color: #4FD1A9;
  /*
   * flexbox is the best way to layout content along a single axis
   * for various practical and performance reasons
   */
  display: flex;
}

.text-box {
  --padding-v: calc(var(--unit) * 50);
  --padding-h: calc(var(--unit) * 10);
  display: inline-block;
  padding: var(--padding-v) var(--padding-h);
  /* This content should just be in the normal flow of the page */
  /*
    position: absolute
    top:30%;
    left:50%;
    transform: translate(-50% ,-50%);
  */
  text-align: center;
  /*  Because we're using flexbox, we can center the content both horizontally and vertically
   *  using this declaration
   */
  margin: auto;
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
}

.heading-primary-main {
  --font-size: calc(var(--unit) * 60);
  --letter-spacing: calc(var(--unit) * 35);
  display: block;
  font-size: var(--font-size);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
}

.heading-primary-sub {
  --font-size: calc(var(--unit) * 20);
  --letter-spacing: calc(var(--unit) * 15);
  --margin-bottom: calc(var(--unit) * 60);
  display: block;
  font-size: var(--font-size);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  margin-bottom: var(--margin-bottom);
}

.btn {
  --padding-v: calc(var(--unit) * 15);
  --padding-h: calc(var(--unit) * 40);
  --border-radius: calc(var(--unit) * 100);
  --margin: calc(var(--unit) * 5);
  --font-size: calc(var(--unit) * 16);
  font-size: var(--font-size);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--padding-v) var(--padding-h);
  display: inline-block;
  border-radius: var(--border-radius);
  transition: all .2s;
  margin: var(--margin);
  background-color: #fff;
  color: #777;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgb(0, 0, 0, .2);
}

.btn:active {
  transform: translateY(-1px);
}


/*
 * This is around the point at which the text starts to wrap
 * 
 * We take a fundamentally different approach to layout here. Now we want dimensions to
 * scale with the width of the viewport so that it will look good at all sizes
 */

@media only screen and (max-width: 550px) {
  .header {
    --unit: calc(100vw / 550);
  }
}
<html>

<head>
  <link href="./header.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <header class="header">
    <div class="text-box">
      <h1 class="heading-primary">
        <span class="heading-primary-main">City</span>
        <span class="heading-primary-sub">is where life happens</span>
      </h1>
      <a href="#" class="btn">Discover our City</a>
      <a href="#" class="btn">Discover our Tours</a>
    </div>
  </header>
</body>

</html>

Upvotes: 1

Awais
Awais

Reputation: 4912

Use media-quires to adjust your layout.

Problem occurs due to position:absolute

Reference 

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
}

.header{
    height:65vh;
    background-image: linear-gradient(to right  bottom, rgba(132,248,198 , 0.8), rgba(26,187,137,0.8)),url(../img/ch4.jpg);
    background-size: cover;
    background-position: top;
    background-color:#4FD1A9;
}
.logo-box{
    position: absolute;
    top:40px;
    left:40px;
}

.logo{
    height:35px;
}

.heading-primary {
    color:#fff;
    text-transform: uppercase;
}

.heading-primary-main{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
}

.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 15px;
    margin-bottom: 60px;
}

.text-box {
    display: inline-block;
    position: absolute;
    top:30%;
    left:50%;
    transform: translate(-50% ,-50%);
    text-align: center;
    
   
}

.btn:link, 
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding:15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    margin: 5px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgb(0,0,0,.2);
}

.btn:active {
    transform: translateY(-1px) ;
}

.btn-white {
    background-color: #fff;
    color:#777;
}
@media only screen and (max-width: 767px) {
  .header {
       height: 100vh;//adjust as per your req
  }
  .text-box {
    display: block; 
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    text-align: center;
    height: 100%;
}
}
<body>
    <header class="header"> 
       <div class="logo-box"></div>
       <img src="/img/logo-white.png" class="logo">
       <div class="text-box">
          <h1 class="heading-primary">
             <span class="heading-primary-main">City</span>   
             <span class="heading-primary-sub">is where life happens</span>   
          </h1>
          <a href="#" class="btn btn-white">Discover our City</a>
          <a href="#" class="btn btn-white">Discover our Tours</a>
       </div> 
    </header>
 </body>

Upvotes: 1

Related Questions