AntiokusPensato
New Coder
I am doing a school project and am having trouble getting a certain breakpoint to work. I'm sure it is something simple and I just can't see it. This is my first month coding, tried to use chatGPT to help but the few suggestions through there seemed to make it worse or not change it at all. I am trying to get under 990px to be a single column with everything stacking vertically including my navigation. Going logo, nav, main content, then image. I do not want to use javascript or any collapsible menus. Once it get's below 768px the navigation then gets mixed in with the main content. If anyone has an idea what is going on I would greatly appreciate the input! Code included.
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
}
#wrapper {
background: linear-gradient(245.59deg, #673400 0%, #964B00 28.53%, #B5651D 75.52%);
}
header{
position: fixed;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 33px 9%;
/* background: #000; */
}
li, a, button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: rgb(8, 0, 0);
text-decoration: none;
}
.logo{
cursor: pointer;
}
.navlist {
display: flex;
}
.navlist a{
color: rgb(255, 255, 255);
margin-left: 60px;
font-size: 15px;
font-weight: 600;
border-bottom: 2px solid transparent;
transition: all .55s ease;
}
.navlist li a:hover {
color: #ad8245;
}
button {
padding: 9px 25px;
background-color: rgba(212,166,102,1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(212,166,102,0.8);
}
.main{
height: 100%;
width: 100%;
min-height: 100vh;
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 1rem;
}
section{
padding: 0 19%;
}
.main-text h5{
font-size: 14px;
font-weight: 400;
color: white;
margin-bottom: 40px;
}
.main-text h1{
font-family: 'Shadows Into Light', cursive;
font-size: 90px;
line-height: 1;
color: white;
margin: 0 0 45px;
}
.main-text h4{
font-size: 18px;
font-weight: 600;
color: white;
margin-bottom: 10px;
}
.main-text p{
color: white;
font-size: 15px;
line-height: 1.9;
margin-bottom: 40px;
}
.handplane img{
width: 700px;
height: auto;
}
.main-text a{
display: inline-block;
color: white;
background: #A4550A;
border: 1px solid transparent;
padding: 12px 30px;
line-height: 1.4;
font-size: 14px;
font-weight: 500;
border-radius: 30px;
text-transform: uppercase;
transition: all .55s ease;
}
.main-text a:hover{
background: transparent;
border: 1px solid white;
transform: translateX(8px);
}
.main-text a.fav{
background: transparent;
border: 1px solid white;
margin-left: 20px;
}
.main-text a.fav i{
vertical-align: middle;
margin-right: 5px;
}
@media (min-width: 1535px){
header{
padding: 15px 3%;
transition: .2s;
}
.handplane img{
width: 100%;
height: auto;
}
.icons{
padding: 0 3%;
transition: .2s;
}
.scroll-down{
right: 3%;
transition: .2s;
}
}
@media (max-width: 1535px){
header{
padding: 15px 3%;
transition: .2s;
}
.handplane img{
width: 100%;
height: auto;
}
.scroll-down{
right: 3%;
transition: .2s;
}
}
@media (max-width: 1460px){
section{
padding: 0 12%;
transition: .2s;
}
}
@media (max-width: 1340px){
.handplane img{
width: 100%;
height: auto;
}
.main-text h1{
font-size: 75px;
margin: 0 0 30px;
}
.main-text h5{
margin-bottom: 25px;
}
}
@media (max-width: 1195px){
section{
padding: 0 3%;
transition: .2s;
}
.main-text{
padding-top: 115px;
}
.handplane{
text-align: center;
}
.handplane img{
width: 400px;
height: auto;
}
/* .main{
height: 100%;
gap: 1rem;
grid-template-columns: 1fr;
} */
.scroll-down{
display: none;
}
}
@media (max-width: 990px){
.navlist{
position: absolute;
top: 100%;
right: 0;
width: 100%;
height: Auto;
display: flex;
align-items: center;
flex-direction: column;
padding: 20px;
transition: all .55s ease;
}
.navlist a{
margin: 10px 0;
display: block;
width: 100%;
text-align: center;
}
header {
display: flex;
flex-direction: column;
align-items: center;
}
.main-text, .handplane {
display: block;
}
}
@media (max-width: 768px) {
.main{
display: block;
grid-template-columns: none;
/* margin-top: 498px; */
}
.main-text, .handplane {
width: 100%;
}
.main-text, .handplane img {
margin-top: 20px;
}
.navlist {
display: block;
padding: 0;
}
.navlist a {
text-align: center;
padding: 10px 0;
}
header {
text-align: center;
flex-wrap: wrap;
}
.handplane img {
max-width: 100%;
height: auto;
}
}
@media (max-width: 680px) {
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Handtool Woodworking</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
</head>
<div id="wrapper">
<body>
<header>
<img class="logo" src="Images/logo-no-background.png" alt="logo">
<nav>
<ul class="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="Saws/index.html">Saw</a></li>
<li><a href="#">Router Plane</a></li>
<li><a href="#">Workbench</a></li>
<li><a href="#">Jointer Plane</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="main">
<div class="main-text">
<h1>Stay Sharp</h1>
<p>Hello, my name is Trevor Davis. In my spare time I love to woodwork, <br> specifically with hand tools. Here I would like to showcase a few.</p>
<a href="https://www.leevalley.com/en-us/tools">Tools</a>
<a href="Jointer/index.html" class="fav"><i class="ri-play-fill"></i>Favorite Tool</a>
</div>
<div class="handplane">
<img src="Images/Handplane.png">
</div>
</div>
</div>
</body>
</html>
