CODEWITHSUNDEEP
htmlcss
Lyndi
Lyndi

Reputation: 11

How to change the height of a <header> section in html/css?

I'm new to html (prior to 2 weeks ago the most coding I'd ever done was the python seminar I failed as a freshman but my boss assumes "mechanical engineer" means I should know how to build a website from scratch too), so please forgive me if I fail to explain or name things properly. I've developed a website along the lines of the "Creative" bootstrap template https://blackrockdigital.github.io/startbootstrap-creative/ because at first my boss liked the full screen photo option, but after creating the whole site this way, she doesn't think it's encouraging users to scroll to the sections below the photo (she doesn't like the idea of using arrows to suggest there is more info below). She decided she only wants the landing page to be the full screen photo, and the rest of the pages she wants the background photo to fill the entire width of the screen but only about 70% of the viewport to have the bottom of the viewport start showing the content of the next section. I've been researching for hours and trying everything I can come across to do this, but I can't seem to manage it. My most successful attempt was adding a border-bottom to the photo, but that was plain color (didn't show any content) and I couldn't figure out how to get content to start on the border. The code for a page goes something like this: 

<html>
<head>...</head>
<body>
<nav>...</nav> <!--I've used a Bootstrap navbar-->
<header class="about"> <!--for the about page-->
<div class="header-content">
      <div class="header-content-inner">
          <h1 id="homeHeading">About</h1>
          <hr>
          <p>...</p>
      </div>
</div>
</header>
<!-- The above is the part we want to only fill about 70-80% of the viewport below the navbar-->
<section id="services" >...</section> <!--I want this part to start on the bottom 20-30% of the page-->
</body>
</html>

with CSS: 

header.about {
    background-image: url("/about.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

I've tried changing background-size: 100% 80% or getting rid of the "background-size" line and adding height: 80% width: 100% but that only added whitespace at the bottom of the photo but didn't actually move the content from the services section up. I tried adjusting the height of the header element in the css for header.about by coding height: calc(80vh) with and without the background-size line and it does not change the height at all. I've tried pre-specifying a height for the header as something crazy like height: 100px just to see if it is working, and still nothing changes and it fills the whole screen. I want to maintain responsiveness for changing browser sizes and mobile browsers, so I would like to avoid having to specify numbers for pixel heights even if I can figure out how to make them work. Can anyone please explain how I can change the height of my header section to only fill 70-80% of the viewport or give suggestions for why I can't seem to change the height of the section?

Upvotes: 0

Views: 22653

Answers (1)

eqwert
eqwert

Reputation: 507

Just add this CSS rule:

header {
    min-height: 50% !important;
}

Upvotes: 1

Related Questions