I am new to web development so my understanding of structure is not the best. Whenever I scale my website down (for resoponsive design) at 700px, the elements break and the grid columns move to the left, and a white space is created on the right. I believe this is caused either directly or indirectly from grid display on my website. I am using a mix of flex and grid, you can see the main parts of my code below:
Main parts of CSS to do with .container-2 which is the first impacted by this format error (other elements are present below cause of common classes)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid-wrapper{
display: inline-grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: 1fr 1fr;
}`
body, html{
overflow-x: hidden;
}
/*Header - used for navigation which is the same across all pages*/
.container-1{
flex-direction: row;
padding: 1rem;
}
header button{
grid-column: 1/2;
margin: 1rem;
}
nav{
grid-column: 2/3;
margin: 1rem;
}
nav ul{
text-align: right;
list-style: none;
width: 100%;
}
nav ul li{
margin: 0px 30px;
}
nav ul li a{
font-size: 2.6vmin;
letter-spacing: 1.5px;
}
nav ul li a:hover{
color: darkred;
}
.button:hover{
box-shadow: 2px 2px 5px;
color: darkred;
background-color: whitesmoke;
}
.logo button{
font-size: 4.8vmin;
text-align:left;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 25px;
background-color: transparent;
font-family: 'Times New Roman', Times, serif;
border: none;
font-weight: bold;
}
.logo button a{
text-decoration: none;
color: whitesmoke
}
.logo button a:hover{
color: darkred;
cursor: pointer;
}
/*Hero section for Home Page */
.container-2{
background-image: url('/root/images/orphanImage.jpg');
max-width: 100%;
display: flex;
}
.button{
padding: 10px 17px;
border-radius: 30px;
font-size: 2.4vmin;
background-color: darkred;
}
.line{
width: 150px;
}
/* What We Do Section - note that the elemenets for sections if they had repeated
styling, it is grouped at the end of the sheet in common classes with other elements
what is shown in these sections below is only what is unique for elements (if there is anything)*/
.title{
margin-bottom: 40px;
}
.container-2, .container-4, .container-2-AboutPage{
width: 100vw;
height: 100vh;
}``
.container-2, .container-2-AboutPage, .container-2-AwarenessPage
, .container-2-Donate, .container-2-Volunteer{
background-position: bottom;
align-items: flex-end;
justify-content:end;
width: 100vw;
height: 100vh;
background-size: cover;
}
.container-2, .container-2-AboutPage, .container-2-AwarenessPage
, .container-2-Donate, .container-2-Volunteer, .container-4, .slider-container .slide .item, .slider-container-efforts .slide-efforts .item-efforts{
background-size: cover;
}
.flex-wrapper, .container-1, nav ul, .ourWorks, .ourWorks .ourWork, .container-3 .button-container, .container-4, .explore-container, .container-5, .aware-container, .container-5 .image-gallery, .container-3-AboutPage .title, .container-3Text, .image-slider-container, .slider, .slider-nav, .container-4-aboutUs, .container-5Text, .column, .container-4-Volunteer, .opportunities, .opportunities .opportunity, .container-4-Volunteer .button-container, .donateQuotes, .wrapper, .card, .container-5-donate, .container-3, .container-3-AboutPage, .container-4-aboutUs, .container-2, .container-2-AboutPage, .container-2-AwarenessPage
, .container-2-Donate, .container-2-Volunteer{
display: flex;
}
<!DOCTYPE html>
<html lang= "en">
<head>
<title>Home Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stylesCSS.css">
</head>
<body>
<section class="grid-wrapper">
<header class="container-1"><!--Contains the first information on the website, which is the
logo and the navigation. This is the first container of the website which will hold
the logo and nav, this container can then be repeated across the full website-->
<div class="logo"><button><a href="index.html">Red Crescent</a></button><!--Text used as logo--></div> <!--Div element here
is used to seperate the text logo from the navigation, so they are both two elements-->
<div>
<nav>
<ul><!--Unordered list - used for naviation items -->
<li><a href="index.html">Home</a></li>
<li><a href="pages/aboutPage.html">About</a></li>
<li><a href="pages/awareness.html">Awareness</a></li>
<li><a href="pages/volunteerPage.html">Volunteer</a></li>
<li><a href="/root/pages/donatePage.html" class=button>Donate</a></li>
</ul>
</nav>
</div>
</header>
<section class="container-2"> <!--Container for the landing page elements-->
<div class="styledElements-1">
<div><h2>Emirates Red Crescent</h2></div>
<div class="line"></div>
<div><h1>Providing Relief to the Distressed</h1></div>
<div><a href="#" class="button">Get Involved</a></div>
</div>
</section>
I tried adjusting the grid displays, but it didn't change anything. When I changed the .button style for the navigation it moved the elements more to the right, reducing the white space, possibily has something to do with button or navigation then?