My website is not responsive as it's supposed to be
Need help to make my website responsive. It looks good when it's on desktop mode, but on mobile view it just doesn't fit properly. It's a bit hard to exlpain here, if someone has 5 minutes so I can live stream it through Discord I would appreciate it. I'm a begginer so I'm sure you can help me 😦
4 Replies
body {
font-size: 1.125rem;
font-family: "Hanken Grotesk", sans-serif;
height: 100dvh;
display: grid;
place-items: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
padding-inline: 2rem;
background-color: red;
width: auto;
}
.results {
display: flex;
flex-direction: column;
justify-content: center;
background-image: linear-gradient(var(--bg-gradient--Light-slate-blue), var(--bg-gradient--Light-royal-blue));
min-height: 20rem;
text-align: center;
margin: auto 2rem auto 0;
min-width: 19rem;
max-width: 23rem;
border-radius: 2rem;
padding: 1rem
}
@media (max-width: 600px) {
body {
height: 100dvh;
width: 25rem;
margin: 0 auto;
}
.container {
display: grid;
width: 25rem;
}
.results {
width: 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
HI
Send me your project part
You are setting fixed widths in your media query. You are asking for troubles/headaches 🙂
You are setting fixed widthsFixed that for ya 😜in your media query. You are asking for troubles/headaches 🙂