header text making webpage extend beyond border on smaller viewports - html

Question

I am trying to make my webpage more responsive but I am struggling to figure out the cause of this problem here: https://imgur.com/a/QIPdJnp and https://imgur.com/a/3UNzAVF
my website looks okay with high width viewport values like for iPads and desktops, but when the width of the view port is small like less than 360px, my footer header has this empty white space that gets created between it and the right edge of the screen as i showed above.
it seems like that the CSS grid and "experience" header stick out just way too much to the right which causes things like the footer (which properly fits the screen width) appear as if it is not fitting the screen width.
here is the code for the header (resides inside CSS grid section) that is pushing too much to the right. If I can find out what's wrong here, I can apply this to the CSS grid.
<main class = "gallery-page">
<div class="col-lg-12 text-center">
<h2 class="section-title">Experience</h2>
</div>
</main>
h1, h2, h3, h4, h5, h6 {
color: #000;
font-family: "Playfair Display", serif;
line-height: 1.2;
}
h2, .h2 {
font-size: 60px;
}
#media (max-width: 250px) {
h2, .h2 {
font-size: 40px;
}
}

Answer 1

CSS provides two properties that could be used to implement your request namely position and display. I will not really cover display here or advanced items like flex, let's focus on position, and bootstrap.
I noticed you are using "col-lg-12", "section-title", "text-center" as a class. This class comes from a framework like bootstrap. Bootstrap has it's own header that you could use called NavBar. Also the col-lg-12 is part of the grid layout in bootstap. I assumed bootstrap here, but there are other frameworks with similar constructs like Material.
Let's implement your html and css with some minor changes. Here we will use pure css without a framework, I will show you how to implement a NavBar later.
I changed the body background to blue as follows:
body {
background-color: blue;
}
I then implemented your css as follows:
<style>
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", serif;
line-height: 1.2;
}
h2, .h2 {
font-size: 60px;
}
.header {
background-color: purple;
color: white;
}
#media (max-width: 250px) {
h2, .h2 {
font-size: 40px;
}
}
</style>
<main class = "gallery-page">
<div class="text-center header">
<h2 class="section-title">Experience</h2>
</div>
<div> tmp text here </div>
</main>
Notice I change the text to white and the heading to purple. The result is as follows:
To see what happens with some text and some scroll bars I added some temp text:
When it scrolls the head moves up, and if we change the screen size it appears as follows:
The position property of css provides the following five options:
static
relative
fixed
absolute
sticky
Static is the default and are not affected by the top, bottom, left, and right properties, specified by position. Your header is an example of static.
Relative is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Let's change the header to relative:
.header {
background-color: purple;
color: white;
position: relative;
}
Notice nothing changes, but now we can move this relative to its position, so for example left 30px.
.header {
background-color: purple;
color: white;
position: relative;
left: 30px;
}
As you can see this moves your header relative to it's position, scrolling behaves like before.
Let's change the position to fixed as follows:
.header {
background-color: purple;
color: white;
position: fixed;
}
Now something strange happens, for one the block is larger, and two you can scroll the text below while the block remains in the same place. This is because fixed is relative to the view-port and not the window. You can control what is above (header) or below (the text) by setting the z-index.
We can also reposition where in the view-port we want the header by changing it's position. Like before we could use left 30px:
.header {
background-color: purple;
color: white;
position: fixed;
left: 30px;
}
But unlike before it is now squashed and does not disappear to the right. We can also use top, bottom etc.
Let's position it at the top, left, right, with a smaller height:
.header {
background-color: purple;
color: white;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
The window will be responsive:
Absolute is similar to fixed except now the element is fixed to the nearest position ancestor in this case body and not the view port.
.header {
background-color: purple;
color: white;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
}
While it looks similar to before, with the text underneath, scrolling the page will show that the header moves with the body and is no longer fixed to the view-port:
In these examples I have showed you how you can use position to get the effect of a header that you want.
Let's revert back to your original html, and include the bootstrap framework, note that I am keeping the poor choice in colours:
<style>
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", serif;
line-height: 1.2;
}
h2, .h2 {
font-size: 60px;
}
.header {
background-color: purple;
color: white;
}
#media (max-width: 250px) {
h2, .h2 {
font-size: 40px;
}
}
</style>
<main class = "gallery-page">
<div class="col-lg-12 text-center header">
<h2 class="section-title">Experience</h2>
</div>
<div>
some text
</div>
</main>
The result is as follows:
From the bootstrap examples you can see the rendering is I assume as you expected, I do not have the rest of your html, and so I do not know why you are getting strange behavior, it could be you have wrapped the code with a container, or the footer is rendered with other tags.
Let's implement a NavBar.
You can do this with the following HTML:
<main>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
Experience
</div>
</nav>
<div>
</div>
</main>
In addition html provides tags for headers and footers.
So let's update the html to include a bootstrap NavBar using the header tag, and leave the main for the body.
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
Experience
</div>
</nav>
</header>
<main>
<div>
</div>
</main>
We can now implement the footer tag as follows:
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
Experience
</div>
</nav>
</header>
<main>
<div>
some content
</div>
</main>
<footer class="footer bg-light">
<div class="container">
<span >My footer</span>
</div>
</footer>
Notice I am using the footer tag, with a bootstrap footer class and bg-light class. The footer is added at the bottom, and if we scroll we can see it:
Scrolling also moves the header up, we can fix both by making them fixed.
We could use bootstrap to fix it, but let's use the CSS we used above, and we will add it as a class.
Add the following css:
.header-top {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
.footer-bottom {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
}
Use the tags in your html as follows:
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light header-top">
<div class="container-fluid">
Experience
</div>
</nav>
</header>
<main>
<div>
some contents
</div>
</main>
<footer class="footer bg-light footer-bottom ">
<div class="container">
<span >My footer</span>
</div>
</footer>
The result are fixed headers and footers: