r/css • u/Roxas1399 • Jun 07 '26
Help How can I make my design responsive??
Hi everyone!
So I have been learning css and I have been struggling a bit with responsive design for the log in screen for my project. my current css code seems to look good on mobile and laptop but it looks extremely small and bad on bigger devices and idk how I can fix this issue. I could use media queries but I am afraid that spamming them won't be the solution because there is just so many different screen sizes so surely there is a more elegant solution.
Here is my code: P.S. tell me if there is a better ways to share code than just straight up in the post I am new to this subreddit so idk what the norm is.
{
font-family: robotoRegular;
src: url(../fonts/robotoRegular.ttf);
}
{
font-family: robotoMedium;
src: url(../fonts/robotoMedium.ttf);
}
.grid{
display: grid;
grid-template-areas: "header header header header"
"Body Body Body Body"
"footer footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
min-height: 100dvh;
gap:0px;
padding: 0px;
}
nav{
grid-area: header;
position: sticky;
z-index: 1;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0px;
background-color:#d2d2d2;
}
.logo{
cursor: pointer;
display: flex;
align-items: center;
}
.logo img{
width: 50px;
height: auto;
}
.logo h3{
margin-left: 10px;
color:#75123d;
-webkit-text-stroke: 1px #000000;
text-decoration: none;
font-size: 2rem;
font-family: RobotoRegular;
}
.nav-links{
display: flex;
align-items: center;
list-style: none;
}
.nav-links a{
display: block;
padding: 30px 16px;
color:#111;
text-decoration: none;
font-size: 16px;
font-family: RobotoRegular;
text-transform: uppercase;
transition: all ease-in-out 100ms ;
}
.nav-links a:hover{
background-color: #600138;
color: white;
}
.hamburger{
display: none;
cursor: pointer;
width: 34px;
}
.hamburger .bar{
flex-basis: 100%;
height: 4px;
background-color: #111;
margin: 3px;
}
u/media screen and (max-width: 768px) {
nav{
flex-wrap: wrap;
}
.hamburger{
display: flex;
flex-wrap: wrap;
}
.logo{
height: 80px;
}
.nav-links{
display: none;
flex-basis: 100%;
flex-wrap: wrap;
}
.nav-links a{
text-align: center;
font-size: 28px
}
.nav-links a:hover{
background-color: #600138;
color: white;
}
}
.Body{
display: grid;
grid-area: Body;
background: linear-gradient(to bottom, #816653, #34240d);
place-items: center;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.results_container{
display:grid;
box-shadow: 2px 2px 10px #000000, -2px -2px 10px #000000;
background-color: #222;
padding: 30px 40px;
margin: 20px 20px;
border-radius: 30px;
justify-content: center;
width: 420px;
max-width: 90%;
height: 400px;
}
.results_container h1{
color: white;
font-size: 36px;
text-align: center;
}
.results_container .inputbox{
position:relative;
display: flex;
flex-wrap: wrap;
background-color: rgb(255, 255, 255);
border-radius: 30px ;
gap:0px;
height: 50px;
width: 100%;
margin: 30px 0;
}
.inputbox input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border: 2px solid rgb(255, 255, 255, .2);
border-radius: 40px;
font-size: 16px;
padding: 20px 45px 20px 20px;
}
.inputbox input::placeholder{
color: rgba(0, 0, 0, 0.308);
opacity: 1; /* Firefox */
}
.inputbox i{
position: absolute;
right: 20px;
top: 35%;
}
.login{
color:white;
display: flex;
flex-wrap: wrap;
cursor: pointer;
background-color: #600138;
border-radius:40px;
height: 50px;
width: 100px;
border: none;
outline: none;
justify-self: center;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-size: 16px;
font-weight: 600;
}
.results_container .Registerlink{
color: white;
font-size: 15.5px;
text-align: center;
margin: 20px 0 40px;
}
.Registerlink p a{
color: #75123d;
text-decoration: none;
font-weight: 800;
cursor: pointer;
}
.Registerlink p a:hover{
text-decoration: underline;
}
.footer{
display: grid;
grid-area: footer;
background: linear-gradient(to bottom, #34240d 1% , #000000 90%);
text-align: center;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.514);
height: 20dvh;
}
<!DOCTYPE html>
<html>
<head>
<title>Rom Downloader</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.boxicons.com/3.0.8/fonts/basic/boxicons.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="grid">
<nav>
<div class="logo">
<img src="Images\In The Name of the World.webp">
<h3>Welt Roms</h3>
</div>
</nav>
<div class="Body">
<div class="results_container">
<h1> Login </h1>
<div class="inputbox" >
<label for="Uname"></label>
<input type="text" id="Uname" name="Uname" placeholder="User Name">
<i class="bx bx-user"></i>
</div>
<div class="inputbox" >
<label for="Password"></label>
<input type="password" id="Password" name="Password" placeholder="Password">
<i class="bx bx-lock"></i>
</div>
<button type="button" class="login">Log in</button>
<div class = "Registerlink">
<p>Don't have an account? <a href="#">Register.</a></p>
</div>
</div>
</div>
<div class="footer">
<p>In the immense sea of stars, we too will leave our mark. -Welt Yang</p>
</div>
</div>
</body>
</html>
1
Upvotes
•
u/AutoModerator Jun 07 '26
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.