the website
not sure if i did something wrong with the media query or if its devtools but when i pick specific demnsion like se xr or 14 pro the media query looks fine but randemly if i pick between them gray space starts showing like if the elements dont have a 100% width or if im just picking specific sizes its fine but when i pick responsive grayspace starts to show even if i go back to a specific dimension like se or xr.
i tried making all the secdtions 100% both in regular and the media query n grayspace starts to show
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: "ROG";
src: url("ASUSROG_REGULAR.TTF");
}
body,
html {
scroll-padding-top: 12rem;
}
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100vh 100vh 100vh;
font: 15px Arial, sans-serif;
background-color: #525152;
max-width: 100%;
}
#header {
position: fixed;
display: flex;
justify-content: space-between;
width: 100%;
top: 0;
padding: 20px;
background-color: #000;
}
#header h1 {
font-size: 2rem;
font-family: "ROG", "Open Sans", "Helvetica Neue", sans-serif;
color: #de272c;
}
#header img {
width: 5rem;
height: 5rem;
}
#img-container {
display: flex;
gap: 40px;
align-items: center;
}
#img-container h1 {
color: #f3f3f3;
}
#nav-bar {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px;
gap: 100px;
padding-right: 60px;
width: 50%;
font-size: 2rem;
}
a {
text-decoration: none;
}
a:link {
color: #f3f3f3;
}
a:hover {
color: #de272c;
}
a:active {
color: #de272c;
}
#form {
margin-top: 136px;
display: flex;
padding: 20px;
font-size: 1.5rem;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 20px;
background-image: url("https://dlcdnwebimgs.asus.com/files/media/C03ED571-0D4B-47B3-90B0-BEF72BB26C05/v1/images/large/1x/pic_kv.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.product-name {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.product-name h1 {
color: #f3f3f3;
font-family: "ROG", "Open Sans", "Helvetica Neue", sans-serif;
font-size: 5rem;
}
.product-name p {
color: #0ff;
}
.form-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
#email {
width: 25rem;
height: 2rem;
text-align: center;
}
#submit {
width: 15rem;
height: 4rem;
font-size: 2rem;
background-color: #000;
color: #f3f3f3;
border-radius: 40px;
border: none;
}
.submit-container {
display: inline-flex;
padding: 4px;
border-radius: 40px;
grid-area: input;
background: linear-gradient(
90deg,
#ff0000,
#ff7e00,
#ffff00,
#00ff00,
#00ffff,
#002cff
);
width: fit-content;
height: fit-content;
}
#features {
display: flex;
flex-direction: column;
background-color: #000;
gap: 20px;
color: #f3f3f3;
}
#feature-names {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "ul ul ul" ". input .";
grid-template-rows: 1fr 1fr;
justify-content: center;
justify-items: center;
height: 40%;
gap: 20px;
}
#feature-names ul {
grid-area: ul;
list-style: none;
display: flex;
justify-content: center;
gap: 100px;
font-size: 2.5rem;
align-items: center;
}
#feature-names ul li img {
width: 8rem;
}
#feature-names input {
background-color: #000;
width: 15rem;
height: 4rem;
font-size: 2rem;
color: #f3f3f3;
border-radius: 40px;
border: none;
}
@media only screen and (max-width: 436px) {
#header {
font-size: 2px;
}
#header #nav-bar {
display: flex;
justify-content: center;
width: 100%;
top: 0;
padding: 5px;
}
#form {
background-color: #000;
margin-top: 120px;
background-image: none !important;
justify-content: center;
align-items: center;
}
#features{
gap: 60px;
}
#feature-names {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "ul" "input";
}
#feature-names ul {
grid-area: ul;
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
font-size: 2rem;
align-items: center;
}
}
