Help me with making responsive web design 😅
Problem: I am currently having trouble with making a responsive web design.
Context: I just started learning HTML and CSS, and I am currently learning JavaScript.
Here is the video and the screenshots.
4 Replies
I'd recommend following Kevin's free CRL course: https://courses.kevinpowell.co/conquering-responsive-layouts
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!
also, in future, if you share code, please don't use screenshots. #how-to-ask-good-questions has some tips and resources you can use
Thank you for informing me about that. Here is the CSS I used for anyone who is interested.:
<style>
body{
background: black;
max-width: 100vw;
max-height: 100vh;
}
header{
background: rgb(0, 174, 255);
text-align: center;
font-size: 80px;
max-width: 960px;
}
.sequence{
display: flex;
justify-content: space-around;
align-items: center;
height: 600px;
}
main{
background: greenyellow;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 20px;
max-width: 960px;
}
pre{
background: gainsboro;
}
b{
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-weight: 400px;
font-style: normal;
}
img{
display: block;
max-width: 100%;
}
</style>
the CSS alone isn't very useful, without also having the HTML. And having the code in a discord chat message isn't as useful as having it in codepen or something similar where people can see the live version.
That said, "make this responsive" is a very broad question. There's a ton of considerations, and they depend on what you want the outcome to be. I don't have the time to dig through and fix any responsiveness issues you have here, but I wholeheartedly recommend you just follow the course. It teaches you the basics of making responsive sites from the start