Why is there an extra space in my webpage? - html

https://capr1sun.github.io/popsociology/
The main page of my website has an extra space on the right side which shows when I simulate smaller devices (iPhones). And on my desktop, there's a horizontal scroll bar at the bottom. How do I get rid of the extra space so the content fits exactly on the screen?
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>

The problem is in
footer {
width: 100vw;
}
You can just remove it or use 100% rather than 100vw, and add width: 100% to body tag.

There is a scroll due to the size of the anchors text. So you can set a relative size to them. For example font-size: 2.2vw for .icon-container:
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
font-size: 2.2vw; /* here */
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>

your width property in footer element cause overflow-x this snippet may help:
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
footer {
width: 100%;
}

Related

When I use Bootstrap, my first section background has changed

I've been coding for a while. then use Bootstrap later make me see the problem by only my first section(home) background turns white but in html background-color is black. Maybe I've used Bootstrap before, it's causing the error.enter image description here
html {
background-color: #222831;
font-size: calc(60% + 0.8vmin);
width: 100%;
height: 100%;
height: 1000px;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
.home {
display: relative;
max-width: 1000px;
min-height: 100vh;
margin-top: calc(6rem + 2rem);
margin-left: auto;
margin-right: auto;
padding: 4rem 2rem;
text-align: center;
}
.home-container {
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.home-container .media {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.home-container .media a {
font-size: 1.5rem;
}
.home-container .media a :hover {
color: #ff6768;
}
.home-container .me {
margin: 0 10px;
}
.home-container .me h2 {
font-size: 3rem;
color: #FD7013;
font-weight: 600px;;
}
.home-container .me h3 {
font-size: 1.5rem;
color: #F3AA29;
font-weight: 600px;;
}
.home-container .me p {
max-width: 380px;
font-size: 2rem;
color: #EEEEEE;
font-weight: 500px;
}
.home a {
font-size: 1.5rem;
}
.home .scroll-down i{
color: #ff6768;
font-size: 1.5rem;
margin-top: 30px;
animation: scroll-down 2s ease infinite;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<section class="home" id="home">
<div class="home-container">
<div class="media">
<a href="https://www.facebook.com/webbalaka/" target="_blank"
><i class="fa-brands fa-facebook-f"></i
></a>
<a href="https://www.instagram.com/web.wafu/" target="_blank"
><i class="fa-brands fa-instagram"></i
></a>
<i class="fa-brands fa-twitter"></i>
</div>
<div class="me">
<h2>Pasit Khumsena</h2>
<h3>SCiUS Student</h3>
<p>"Don't worry about what you can't control"</p>
</div>
<div class="pic-me">
<!-- <img src="/AnotherPort/img/IOIOIOIO.JPG" alt="" /> -->
<div style="background-color: red; width: 350px; height: 400px"></div>
</div>
</div>
<a href="#about" class="scroll-down"
>Scroll Down <i class="fa-solid fa-angles-down"></i
></a>
</section>
or perhaps caused by nav-bar high over section.
.nav-bar {
position: relative;
height: calc(4rem + 1rem);
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 0 1.25rem;
transition: 0.5s ;
}
.nav-item {
justify-content: space-around;
display: flex;
column-gap: 2rem;
}
.nav-bar h1{
font-size: 3em;
color: #ff6768;
}
.nav-item a {
font-size: 1.2em;
font-weight: 500px;
color: #EEEEEE;
}
.nav-item a:hover {
color: #F3AA29;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
<header>
<div class="nav-bar">
<div class="Portfolio">
<h1>Portfolio</h1>
</div>
<div class="nav-item">
Home
About
Education
Skill
Contact
</div>
</div>
</header>

Images are not displaying properly on Iphones

I have a problem. Specifically with my images on my site. When I see my site on Android phone, images displays normally without any issues. iPhone displays it like "stretched" to height. I would love to get help, how to fix this problem. I tried some ways how to avoid that, but I found nothing. Sorry for long code. Here are pictures for visualization:
IPhone Image
Android Image
#import url('https://fonts.googleapis.com/css2?family=Commissioner:wght#400;500;700&display=swap');
:root {
--main-font: Commissioner;
--main-font-weight: 500;
--color-background-first: #1D201F;
--color-content-red: #C58882;
--color-content-yellow: #EAD2AC;
--color-content-blue: #D1DEDE;
--color-content-pink: #DF928E;
--color-background-second: #404040;
}
* {
font-family: var(--main-font);
font-weight: var(--main-font-weight);
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
background-color: var(--color-background-second);
width: 100%;
height: 5rem;
box-shadow: 0px 5px 10px 2px black;
margin-top: -3px;
}
#navbar>ul {
display: flex;
list-style-type: none;
font-size: 2.1rem;
min-height: 100%;
}
#navbar>ul>li {
padding: 1vw;
min-height: 100%;
display: flex;
align-items: center;
transition: ease-out 0.3s;
}
#navbar>ul>li>a {
text-decoration: none;
color: var(--color-content-red);
max-height: 100%;
}
li:hover {
background-color: rgba(0, 0, 0, 0.5);
}
#welcome-section {
display: flex;
align-items: center;
background-color: var(--color-background-first);
min-height: 100vh;
}
#welcome-section>div {
max-width: 65vh;
margin-left: 3vw;
margin-right: 3vw;
}
#welcome-section>div>h1 {
color: var(--color-content-yellow);
letter-spacing: 0.2em;
font-size: 4rem;
margin-top: 7rem;
}
#first-line {
color: var(--color-content-blue);
text-align: center;
letter-spacing: 0.2em;
margin: 2em auto 0 auto;
font-size: 3rem;
}
#second-line {
color: var(--color-content-pink);
text-align: center;
letter-spacing: 0.2em;
font-size: 2rem;
font-style: italic;
}
#project-link {
font-size: 15pt;
padding: 1rem;
border-radius: 3px;
border: none;
background-color: #404040;
color: white;
transition: ease-in-out 0.2s;
text-align: center;
}
#project-link:hover {
cursor: pointer;
background-color: var(--color-content-red);
}
#project-link>i {
transition: ease-in-out 0.2s;
}
#project-link:hover>i {
transform: translateX(5px);
}
#welcome-section>i {
font-size: 1500%;
color: var(--color-background-first);
}
#emoji {
margin: 0 auto;
transition: ease-in 0.5s;
}
#project-link:hover+#emoji {
color: var(--color-content-blue);
}
#projects {
min-height: 100%;
width: 100%;
background-color: var(--color-content-red);
display: flex;
justify-content: center;
}
tile-image {
aspect-ratio: 1 / 1;
}
#project-tiles-container {
display: grid;
grid-template-columns: repeat(2, minmax(2px, 500px));
grid-gap: 4rem;
max-width: 80%;
max-width: 1280px;
margin: 0 2rem 6rem 2rem;
justify-content: center;
padding-top: 3rem;
}
.tile-desc {
padding: 2rem;
text-align: center;
background-color: var(--color-background-first);
}
.project-tile {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--color-content-yellow);
font-size: 1.2em;
box-shadow: 0px 0px 30px 1px black;
}
.code {
font-size: 100%;
color: var(--color-background-first);
transition: ease-out 0.5s;
}
.align-right {
transform: translateX(20px);
}
.align-left {
transform: translateX(-20px);
}
.project-tile:hover .align-left {
transform: translateX(0px);
color: var(--color-content-blue);
}
.project-tile:hover .align-right {
transform: translateX(0px);
color: var(--color-content-blue);
}
#contact-section-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: var(--color-content-yellow);
color: var(--color-background-second);
text-shadow: 2px 1px 0px var(--color-content-pink);
gap: 1vh;
}
#contact-section-container>div {
display: flex;
gap: 4rem;
font-size: 1.8rem;
max-width: 80%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#contact-section-container>div>div>a {
text-decoration: none;
color: var(--color-background-second);
}
#contact-section-container>div>h1 {
font-size: 4rem;
text-align: center;
}
#contact-section-container>div>div {
display: flex;
align-items: center;
}
.contact-icon {
font-size: 2rem;
}
#contact-section-container>div>div>a {
transition: ease-out 0.2s;
}
#contact-section-container>div>div>a:hover {
transform: translateY(8px);
}
#media only screen and (max-width: 1000px) {
#welcome-section {
display: flex;
flex-direction: column;
margin: auto;
justify-content: center;
width: 100%;
text-align: center;
gap: 3rem;
}
html {
font-size: 75%;
}
#welcome-section>div>h1 {
margin-top: 12rem;
}
#project-tiles-container {
display: grid;
grid-template-columns: repeat(2, minmax(2px, 500px));
grid-gap: 4rem;
max-width: 80%;
max-width: 1280px;
margin: 0 2rem 6rem 2rem;
justify-content: center;
padding-top: 3rem;
}
#projects {
font-size: 150%;
}
#contact-section-container>div {
font-size: 200%;
}
}
#media only screen and (max-width: 800px) {
#project-tiles-container {
display: grid;
grid-template-columns: repeat(1, minmax(50px, 350px));
grid-gap: 4rem;
width: 80%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
justify-content: center;
align-items: center;
}
#projects {
font-size: 150%;
}
}
#media only screen and (max-width: 330px) {
html {
font-size: 50%;
}
#projects {
font-size: 200%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7290e96d25.js" crossorigin="anonymous"></script>
<title>Robin Weiss</title>
</head>
<body>
<main id="main">
<nav id="navbar">
<ul>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
<section id="welcome-section">
<div id="container-about">
<h1>Hello, welcome to my portfolio!</h1>
<p id="first-line">I’m Robin</p>
<p id="second-line">a web developer</p>
</div>
<a id="project-link" href="https://codepen.io/weissrobin">
See all projects! <i class="fa-solid fa-chevron-right "></i>
</a>
<i id="emoji" class="fa-regular fa-face-smile-wink code "></i>
</section>
<section id="projects">
<div id="project-tiles-container">
<a class="project-tile" target="_blank" href="https://codepen.io/weissrobin/full/OJQMRvd">
<img class="tile-image" src="https://i.pinimg.com/564x/81/4d/6c/814d6c2caabab89b3c2608db7a11a6ba.jpg" alt="">
<p class="tile-desc">
<i class="fa-solid fa-chevron-left icon code align-left"></i> Survey Form
<i class="fa-solid fa-chevron-right icon code align-right"></i>
</p>
</a>
<a class="project-tile" target="_blank" href="https://codepen.io/weissrobin/full/KKQdYQw">
<img class="tile-image" src="https://i.pinimg.com/564x/7d/54/d0/7d54d0a35d57de79dacfe8662661523f.jpg" alt="">
<p class="tile-desc">
<i class="fa-solid fa-chevron-left icon code align-left"></i> Tribute Page
<i class="fa-solid fa-chevron-right icon code align-right"></i>
</p>
</a>
<a class="project-tile" target="_blank" href="https://codepen.io/weissrobin/full/zYRreRR">
<img class="tile-image" src="https://i.pinimg.com/564x/5f/ea/74/5fea74ebc53df1b0ad3534a1523b1256.jpg" alt="">
<p class="tile-desc">
<i class="fa-solid fa-chevron-left icon code align-left"></i> Product Page
<i class="fa-solid fa-chevron-right icon code align-right"></i>
</p>
</a>
<a class="project-tile" href="">
<img class="tile-image" src="" alt="">
</a>
</div>
</section>
<section id="contacts">
<div id="contact-section-container">
<div>
<h1>Lets work together</h1>
</div>
<div>
<div>
<a target="_blank" href="https://www.facebook.com/robin.hubacek/">
<i class="fa-brands fa-facebook contact-icon"></i>Facebook
</a>
</div>
<div>
<a target="_blank" href="https://www.instagram.com/robiwei/">
<i class="fa-brands fa-instagram-square contact-icon"></i>Instagram
</a>
</div>
<div>
<a id="profile-link" target="_blank" href="https://github.com/WeissRobin">
<i class="fa-brands fa-github-square contact-icon"></i>GitHub
</a>
</div>
<div>
<a href="">
<i class="fa-solid fa-at contact-icon"></i>Send a mail
</a>
</div>
<div>
<a href="">
<i class="fa-solid fa-mobile-screen contact-icon"></i>Call me
</a>
</div>
</div>
</div>
</section>
</main>
</body>
</html>

Remove unwanted padding on lower resolutions

:root {
--primary-color: #10b929ff;
--background-light-grey: #696969;
--background-dark-grey: #2f2f2f;
}
body {
background: var(--background-light-grey);
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background: var(--background-dark-grey);
padding: 1em;
font-family: 'Josefin Sans', sans-serif;
//position: fixed;
}
footer {
background: #2f2f2f;
}
nav {
display: none;
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top:0;
background-color: var(--background-dark-grey);
height: 100%;
padding: 2em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: white;
text-decoration: none;
display: block;
padding: .5em;
text-align: right;
font-size: 30px;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
}
nav.menu-btn {
display: block;
}
.website-logo {
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
width: 2em;
//max-width: 10%;
}
#media only screen and (max-width: 400px){
nav{
width: 44%;
padding-right: 30px;
}
}
#media only screen and (max-width: 768px){
.mobile-menu{
cursor: pointer;
width: 2em;
max-width: 10%;
}
.website-logo {
display: flex;
place-content: space-between;
img{
width: 200px;
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
max-width: 10%;
}
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 10em 0em 5em 0em;
}
.hero {
text-align: center;
//padding-bottom: 160px;
}
.hero-image{
background-image: url("https://am3pap006files.storage.live.com/y4pNuJohtpUdzBTZoc4fAQHlLNdeLvEQERim4Rs1KspeWQaKszREazNg4Ljnl7YTmkR6Sgsa4MUN4kB4aAf-vbbEuFnP9EPp2tAExe-dH_9o45qLndBetYu64mzC8r1Ynb8pOgWBAoqfzUL6lgg-Oue0OCqK6PPNliLbVrv6A3Yhuqalg__GtCNUkfzHJbwEuEtMWtpMjsvc_zHKMDeI1jNt5lG7eLxLiR5TluSAml-UuQ/IMG_0560.jpg?psid=1&width=720&height=486");
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-size: cover;
text-align: center;
padding-bottom: 160px;
}
.centre-col {
color: white;
h1 {
text-transform: uppercase;
font-weight: 600;
font-size: 3em;
resize: horizontal;
margin-bottom: 10px;
}
h3 {
font-weight: 200;
font-size: 1.2em;
margin-bottom: 20px;
}
.primary-cta {
background: var(--primary-color);
padding: .6em 1.3em;
text-decoration: none;
border-radius: 5em;
display: inline-block;
font-size: 1.5em;
}
}
.instagram-feed {
padding-top: 00px;
padding-bottom: 10px;
z-index: 0;
}
.eapps-link img {
display:none !important;
}
.club-vision-values {
background: var(--background-light-grey);
z-index: 1;
top: 40%;
padding-top: 0px;
text-align: center;
color: white;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 10px;
padding-bottom: 20px;
margin-top: 10px;
position: relative;
}
.the-coaches{
padding: 20px;
ul{
max-width: 500px;
//padding-top: 10px;
display: gird;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
}
.coach-list {
column-count: 2;
max-width: 500px;
margin: auto;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
max-width: 800px;
margin: auto;
text-align: center;
background: var(--primary-color);
color: white;
margin-bottom: 40px;
h1 {
margin: 4px;
margin-top: 10px;
}
p {
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
//padding-top: 3px;
}
}
#media only screen and (min-width: 768px){
.coach-list {
column-count: 2;
max-width: 800px;
margin: auto;
}
}
#media only screen and (min-width: 1080px){
.coach-list {
display: inline;
max-width: 2600px;
display: flex;
justify-content: center;
}
.the-coaches{
padding: 20px;
padding-bottom: 40px;
margin: auto;
ul {
max-width: 2200px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
}
.card {
margin: 10px;
}
}
.footer{
margin:0;
padding: 0;
box-sizing: border-box;
}
.footer-container{
max-width: 1670px;
margin:auto;
}
.footer-col {
color: white;
width: 20%;
padding: 0 35px;
}
.footer-col h4{
font-size: 18px;
margin-bottom: 20px;
position: relative;
}
.about-us {
line-height: 25px;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: var(--primary-color);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.row
{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
padding: 60px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
#media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
#media(max-width: 574px){
.footer-col{
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Era Boxing</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="navbar">
<div class="website-logo">
<img id="logo" class="logo" src="Images/logo.svg" alt="The club logo">
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Exit Navigation">
<ul class="primary-nav">
<li>Classes</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<section class="hero-image">
<div class="container">
<!-- <img src="images/raul.JPG" alt="Raul"> -->
<div class="centre-col">
<h1>First-class boxing training<br>
for youths and adults alike</h1>
<h3>We provide a supportive and inclusive training environment</h3>
<div class="hero-cta">
View our timetable
</div>
</div>
</div>
</div>
</section>
<section class="instagram-feed">
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-a2b6cbed-0090-4fd3-9a99-b6ce405f0cbf"></div>
</section>
<section class="club-vision-values">
<div>
<h2>Our Club</h2>
<p>New-Era Boxing Club was formed in 2011 by Mark Bebbington and focuses on teaching core values as well as providing first class training for youths and adults alike</p>
</div>
<div>
<h2>Our Vision</h2>
<p>Our vision is to create opportunities for members through boxing, education and personal development in doing so we will provide a supportive and inclusive training environment.</p>
</div>
<div>
<h2>Our Values</h2>
<p>New Era Boxing emphasises the core value of Equality, Integrity, Compassion, Resilience and Humility at the heart of the clubs activities.</p>
</div>
</section>
<section class="the-coaches">
<div class="coach-list">
<ul class="left">
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>Phone Us</h4>
<ul>
<li>07830 085132</li>
</ul>
</div>
<div class="footer-col">
<h4>Email Us</h4>
<ul>
<li class="email">neweraboxing#hotmail.co.uk</li>
</ul>
</div>
<div class="footer-col">
<h4>About Us</h4>
<ul>
<li class="about-us"><a href="#">
FAQs
</a></li>
<li class="about-us"><a href="#">
Club Partners
</a></li>
<li class="about-us"><a href="#">
Timetable
</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-instagram"></i></i>
<i class="fab fa-twitter"></i></i>
<i class="fab fa-whatsapp"></i></i>
</div>
</div>
</div>
</div>
</footer>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
</html>
I am viewing my website in the Developer tools but whenever I try to view it in a mobile resolution below 400px wide it seems to add this unwanted padding to the right side. Sometimes this disappears, but other times it just stays there. Is this a common issue and are there any suggestions on how to fix this please?
enter image description here

The website layout changes as I move Google developer tools window upwards

I faced the issue with the layout of website being changed by the Google developer tool window which opens when you click F12. So, to be more clear, when I click F12, the window appears but as I move the window upwards the layout gets changed, that is, gallery section reacts to the window and also moves upwards. I do not even know what is causing such problem. I really need your help. Here is the code I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="./external/owl.carousel.min.css">
<link rel="stylesheet" href="./external/owl.theme.default.min.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-6 intro__welcome-box">
<p class="header__welcome-content">Welcome to our kids School!!</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="row flex-container">
<h1 class="logo-box">
<a href="#">
<img class="logo-box__image" src="./images/logo.png" alt="The logo">
</a>
<span class="logo-box__motto"> Все начинается с детской мечты</span>
</h1>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link">О Sunnyvale</li>
<li class="navigation__link">Галерея</li>
<li class="navigation__link">Персонал</li>
<li class="navigation__link">Услуги</li>
<li class="navigation__link">Контакты</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="showcase">
<div class="container-fluid p-h-0">
<div class="row">
<div class="col-md-6">
<img src="./primary-original.jpg" alt="">
</div>
<div class="col-md-6">
<div class="showcase-content">
<h2>Join Our Journey</h2>
<p>of World Discovery</p>
Find Out More
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2>
Добро Пожаловать в галерею Sunnyvale
</h2>
</div>
<div class="content-links m-v-30">
<a class="anchor light-red" href="">Узнать больше</a>
<a class="anchor orange" href="">Смотреть Все</a>
</div>
</div>
<div class="col-md-6">
<div class="carousel-container">
<div class="owl-carousel room-carousel owl-theme">
<img src="./medium-98dcfe.jpg" alt="">
<img src="./primary-original.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./external/owl.carousel.min.js"></script>
<script>
$('.room-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
}
}
})
</script>
</body>
</html>
CSS code
.header {
background: #ecf0f1;
}
.header [class*='intro'] {
padding: 2rem;
}
p {
margin: 0;
}
.intro__welcome-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar {
background: white;
}
.logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo-box__motto {
font-size: 16px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-left: 1px solid rgba(88, 87, 87, 0.507);
padding: 0 1rem;
color: rgba(88, 87, 87, 0.507);
font-weight: bold;
line-height: 1.5;
}
.logo-box__image {
padding-right: 1rem;
}
.logo-box__motto {
width: 30%;
text-transform: uppercase;
font-size: 1.5rem;
}
.gallery {
padding: 5rem 0;
}
.gallery .content {
width: 40%;
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin: auto;
}
.gallery .content h2 {
line-height: 1.5;
}
.m-v-30 {
margin: 30px 0;
}
.content-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.anchor {
text-decoration: none;
color: white;
font-weight: 600;
display: inline-block;
padding: 1rem 1.5rem;
border-radius: 30px;
text-transform: uppercase;
}
.anchor:hover {
text-decoration: none;
color: white;
}
.anchor.light-red {
background: rgba(255, 0, 0, 0.658);
margin-left: 7rem;
}
.anchor.orange {
background: orange;
margin-right: 7rem;
}
.carousel-container {
height: 300px;
border-radius: 10px;
overflow-y: hidden;
}
.p-h-0 {
padding: 0;
}
.cloud {
height: 200px;
width: 100%;
background-image: url(/cloud.png);
position: absolute;
bottom: 0;
}
.showcase img {
width: 100%;
height: 100%;
}
.showcase {
height: 70vh;
position: relative;
}
.header__tel-number {
color: #ff7b00;
font-weight: 700;
font-size: 1.5rem;
}
.navigation__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navigation__link a {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
text-decoration: none;
text-transform: uppercase;
color: rgba(44, 43, 43, 0.603);
font-weight: 600;
-webkit-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
.navigation__link a:hover {
color: white;
background: #ff7b00;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navigation {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.intro__address-box p {
text-align: right;
}
/*# sourceMappingURL=main.css.map */
This is happening because the .showcase section has the height set to 70vh, which is relative to the viewport-height. When you open the Dev Tools, the height of the window gets smaller, thus 70vh becoming less than with the full screen, thus moving the gallery upwards.
Simply remove height: 70vh; from .showcase to fix the issue.
Code snippet below:
.header {
background: #ecf0f1;
}
.header [class*='intro'] {
padding: 2rem;
}
p {
margin: 0;
}
.intro__welcome-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar {
background: white;
}
.logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo-box__motto {
font-size: 16px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-left: 1px solid rgba(88, 87, 87, 0.507);
padding: 0 1rem;
color: rgba(88, 87, 87, 0.507);
font-weight: bold;
line-height: 1.5;
}
.logo-box__image {
padding-right: 1rem;
}
.logo-box__motto {
width: 30%;
text-transform: uppercase;
font-size: 1.5rem;
}
.gallery {
padding: 5rem 0;
}
.gallery .content {
width: 40%;
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin: auto;
}
.gallery .content h2 {
line-height: 1.5;
}
.m-v-30 {
margin: 30px 0;
}
.content-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.anchor {
text-decoration: none;
color: white;
font-weight: 600;
display: inline-block;
padding: 1rem 1.5rem;
border-radius: 30px;
text-transform: uppercase;
}
.anchor:hover {
text-decoration: none;
color: white;
}
.anchor.light-red {
background: rgba(255, 0, 0, 0.658);
margin-left: 7rem;
}
.anchor.orange {
background: orange;
margin-right: 7rem;
}
.carousel-container {
height: 300px;
border-radius: 10px;
overflow-y: hidden;
}
.p-h-0 {
padding: 0;
}
.cloud {
height: 200px;
width: 100%;
background-image: url(/cloud.png);
position: absolute;
bottom: 0;
}
.showcase img {
width: 100%;
height: 100%;
}
.showcase {
/* height: 70vh; */
position: relative;
}
.header__tel-number {
color: #ff7b00;
font-weight: 700;
font-size: 1.5rem;
}
.navigation__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navigation__link a {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
text-decoration: none;
text-transform: uppercase;
color: rgba(44, 43, 43, 0.603);
font-weight: 600;
-webkit-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
.navigation__link a:hover {
color: white;
background: #ff7b00;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navigation {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.intro__address-box p {
text-align: right;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-6 intro__welcome-box">
<p class="header__welcome-content">Welcome to our kids School!!</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="row flex-container">
<h1 class="logo-box">
<a href="#">
<img class="logo-box__image" src="./images/logo.png" alt="The logo">
</a>
<span class="logo-box__motto"> Все начинается с детской мечты</span>
</h1>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link">О Sunnyvale</li>
<li class="navigation__link">Галерея</li>
<li class="navigation__link">Персонал</li>
<li class="navigation__link">Услуги</li>
<li class="navigation__link">Контакты</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="showcase">
<div class="container-fluid p-h-0">
<div class="row">
<div class="col-md-6">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" alt="">
</div>
<div class="col-md-6">
<div class="showcase-content">
<h2>Join Our Journey</h2>
<p>of World Discovery</p>
Find Out More
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2>
Добро Пожаловать в галерею Sunnyvale
</h2>
</div>
<div class="content-links m-v-30">
<a class="anchor light-red" href="">Узнать больше</a>
<a class="anchor orange" href="">Смотреть Все</a>
</div>
</div>
<div class="col-md-6">
<div class="carousel-container">
<div class="owl-carousel room-carousel owl-theme">
<img src="https://www.newyorkpass.com/images/rebrand/prices_01.jpg" alt="">
<img src="https://thenypost.files.wordpress.com/2017/04/new-york.jpg?quality=90&strip=all&w=618&h=410&crop=1" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script>
$('.room-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
}
}
})
</script>
</body>
</html>
The Chrome development tool is not an overlay by default, it's width/height is taken off the display screen. Since your design is responsive, it will adapt to the display size (which is browser window minus developer tool).
Solution: in the developer tool's menu, select "Undock into separate window"
Screenshot: https://i.stack.imgur.com/zhWz7.png

Unwanted whitespace on some screen resolutions

My code is responsive to many screen resolutions but on an iPad and a Kindle Fire HDX , there is a large whitespace below the footer.
This is how it looks on an iPad
And this how it looks on Kindle Fire HDX
Here is link to my code on codepen
https://codepen.io/stel/pen/BGMXxq
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mess Order</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<div class='logo-container'>
<img src='mess-order-logo.svg' alt='application logo'>
</div>
<i class="fa fa-bars" id='menu-bar'></i>
</nav>
<div class='time'>
<p>Monday 26 November 2018</p>
<p>TODAY'S OFFERS</p>
</div>
<div id=meal-parent-container>
<div class='meal-container'>
<div class='meal-img'>
<img src='jollof.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Jollof Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='gobe.jpeg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fried Plantain with Beans</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='plain-rice.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Plain Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='banku-and-Tilapia.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Banku With Tilapia</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='Fufu-and-fish.jpg' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fufu with Light Soup</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
</div>
<div class='special-offers'>
<p>Special Offers</p>
</div>
<footer>
Made with love © 2018
</footer>
</body>
</html>
body,html{
height: 100%;
margin:0;
font-family: 'Merriweather', serif;
}
body{
padding-top: 40px;
background: #136a8a;*/ /* fallback for old browsers
background: -webkit-linear-gradient(to right, #267871, #136a8a); /* Chrome 10-25, Safari 5.1-6*/
background: linear-gradient(to right, #267871, #136a8a);
}
nav{
background-color: #16222A;
position:fixed;
top:0;
left:0;
right:0;
display:flex;
justify-content: space-between;
align-items: center;
font-size:160%;
}
#menu-bar{
padding: 1.2%;
color:#999999;
}
.logo-container{
width:20%;
}
.logo-container img{
max-width:100%;
margin: 0 auto;
}
.meal-container{
background-color:white;
width:90%;
margin:0 auto;
margin-top:1.3em;
padding:0.5em;
display: flex;
justify-content: space-between;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.meal-img{
width:40%;
}
.meal-img img{
max-width:100%;
}
.meal-description{
display: flex;
flex-direction: column;
align-items:flex-start;
justify-content: space-between;
width:50%;
}
#meal-parent-container{
display:flex;
flex-direction: column;
padding-top: 5%;
}
.time, .special-offers{
background-color:white;
width:90%;
margin:0 auto;
margin-top:1.3em;
padding:0.5em;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
text-align: center;
}
.special-offers{
margin-bottom: 1.3em;
}
button{
padding: 0.8em;
color: white;
background: #16222A;
border: 0px;
}
footer{
background: #16222A;
padding:1em;
text-align: center;
color: white;
font-size: 120%;
}
#media screen and (min-width:410px) {
.time{
margin-top:1.5em;
}
.meal-description{
padding:0.7em;
}
.logo-container{
width:18%;
}
}
#media screen and (min-width:430px) {
.time{
margin-top:1.8em;
}
.meal-description{
padding:1em;
}
.logo-container{
width:16%;
}
}
#media screen and (min-width:500px) {
.time{
margin-top:2.3em;
width:70%;
}
.meal-container{
width:80%;
}
.meal-img{
max-width: 37%;
}
.meal-description{
padding:1.2em;
}
.special-offers{
width: 80%;
}
.logo-container{
width:16%;
}
}
#media screen and (min-width:600px) {
#meal-parent-container{
flex-direction: row;
flex-wrap: wrap;
}
.meal-container{
width:45%;
}
.time{
margin-top:2.6em;
}
.logo-container{
width:12%;
}
}
#media screen and (min-width:800px) {
.time{
margin-top:2.9em;
}
.logo-container{
width:10%;
}
}
#media screen and (min-width:900px) {
.time{
width:60%;
}
.special-offers{
width: 70%;
}
.logo-container{
width:8%;
}
}
#media screen and (min-width:1000px) {
.time{
width:50%;
}
.special-offers{
width: 60%;
}
.logo-container{
width:6%;
}
}
What could be causing this problem?
Your content is just not enough to fill the whole viewport. You could position your footer absolutely. Or give a min-height to your content. Or use flexbox to let your content area grow.
Here a pen to play with a flexbox solution: https://codepen.io/Sixl/pen/zMbYxL
There is a flex-grow on a new wrapper main for your content.
body,
html {
height: 100%;
margin: 0;
font-family: 'Merriweather', serif;
}
body {
background: #136a8a;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #267871, #136a8a); /* Chrome 10-25, Safari 5.1-6*/
background: linear-gradient(to right, #267871, #136a8a);
}
.container {
display: flex;
flex-flow: column wrap;
height: 100vh;
}
main {
flex-grow: 1;
padding-top: 40px
}
nav {
background-color: #16222A;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 160%;
}
#menu-bar {
padding: 1.2%;
color: #999999;
}
.logo-container {
width: 20%;
}
.logo-container img {
max-width: 100%;
margin: 0 auto;
}
.meal-container {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 1.3em;
padding: 0.5em;
display: flex;
justify-content: space-between;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.meal-img {
width: 40%;
}
.meal-img img {
max-width: 100%;
}
.meal-description {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 50%;
}
#meal-parent-container {
display: flex;
flex-direction: column;
padding-top: 5%;
}
.time,
.special-offers {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 1.3em;
padding: 0.5em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
text-align: center;
}
.special-offers {
margin-bottom: 1.3em;
}
button {
padding: 0.8em;
color: white;
background: #16222A;
border: 0px;
}
footer {
background: #16222A;
padding: 1em;
text-align: center;
color: white;
font-size: 120%;
}
#media screen and (min-width:410px) {
.time {
margin-top: 1.5em;
}
.meal-description {
padding: 0.7em;
}
.logo-container {
width: 18%;
}
}
#media screen and (min-width:430px) {
.time {
margin-top: 1.8em;
}
.meal-description {
padding: 1em;
}
.logo-container {
width: 16%;
}
}
#media screen and (min-width:500px) {
.time {
margin-top: 2.3em;
width: 70%;
}
.meal-container {
width: 80%;
}
.meal-img {
max-width: 37%;
}
.meal-description {
padding: 1.2em;
}
.special-offers {
width: 80%;
}
.logo-container {
width: 16%;
}
}
#media screen and (min-width:600px) {
#meal-parent-container {
flex-direction: row;
flex-wrap: wrap;
}
.meal-container {
width: 45%;
}
.time {
margin-top: 2.6em;
}
.logo-container {
width: 12%;
}
}
#media screen and (min-width:800px) {
.time {
margin-top: 2.9em;
}
.logo-container {
width: 10%;
}
}
#media screen and (min-width:900px) {
.time {
width: 60%;
}
.special-offers {
width: 70%;
}
.logo-container {
width: 8%;
}
}
#media screen and (min-width:1000px) {
.time {
width: 50%;
}
.special-offers {
width: 60%;
}
.logo-container {
width: 6%;
}
}
<div class="container">
<nav>
<div class='logo-container'>
<img src='https://image.ibb.co/iMNFxy/noknoknok.png' alt='application logo'>
</div>
<i class="fa fa-bars" id='menu-bar'></i>
</nav>
<main>
<div class='time'>
<p>Monday 26 November 2018</p>
<p>TODAY'S OFFERS</p>
</div>
<div id=meal-parent-container>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Jollof Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fried Plantain with Beans</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Plain Rice with Chicken</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Banku With Tilapia</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
<div class='meal-container'>
<div class='meal-img'>
<img src='https://image.ibb.co/kuVDjd/noknok.png' alt='picture of jollof rice'>
</div>
<div class=meal-description>
<span>Fufu with Light Soup</span>
<button>
<span class='order'>Order Now</span>
</button>
</div>
</div>
</div>
<div class='special-offers'>
<p>Special Offers</p>
</div>
</main>
<footer>
Made with love © 2018
</footer>
</div>
That is mainly because the content of the page does occupy all of the view space of the screen.
If you want the footer to stick to the bottom, you can add a fixed positioning to it in your css:
footer {
background: #16222A;
padding:1em;
text-align: center;
color: white;
font-size: 120%;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
UPDATE
To offset the content so as to avoid it being covered by the footer, you can add the page content inside a container div a padding to the bottom of the container element:
<div class="container>
...
<!-- Your page content -->
</div>
And in your CSS File:
,container {
width: 100%;
height: 100%;
padding-bottom: 60px; /* Adjust the value to match the height of the footer */
}