@Meetkamal256
@jetskeeter1
Submitted
It is easy, but I am trying to learn hard how I can have a responsive layout. It's difficult to do with my smooth brain.
Any tips to making responsive layout where the width increase/decrease when the screen gets smaller?
Any kind of feedback is appreciated.
@Meetkamal256
Posted
hello @jetskeeter1 i have a few suggestions on how to improve your code and also make it responsive on smaller and larger devices.
- <section>
<main class="container">
<div class="box box1">
<img>
<h1 class="title">SEDANS</h1>
<p class="descript">
Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
or on your next road trip.
</p>
<a href="#sedan" class="button">Learn More</a>
</div>
</section>
do that for the other three sections. if you look closely the layout for the 3 sections are similar there is an image on the top, <h1>, <p> and <a>, in other to style all 3 you can give them the same class="box".for each of the other sections give them a diffrent class box1, box2 and box3 in that order so you can give them a diffrent background-color. Make sure that all three sections are enclosed within your main container. You can give the main container which serves as your parent <div> a display of flex. You are missing this part in your code that is why it is not responsive. in other to make use of flex box you need a parent container with display flex and flex items each enclosed in a <div> tag.
After applying css styling on your webpage then you can use media query and target smaller screen devices, change the flex-direction from row to column so the box1, box2 and box3 are stacked on top of each other.
- /* responsive style */
@media(max-width: 920px){
#card{
flex-direction: column;
}
}
@media(max-width: 425px){
#card{
margin: 2rem 1rem;
}
}
by effecting this changes you are going to have a responsive web page across large and smaller devices feel free to adjust css styling as you see fit.
[https://www.youtube.com/watch?v=z6tJ5ngiF14&list=PLC3y8-rFHvwg6rjbiMadCILrjh7QkvzoQ] - this is a link to a youtube playlist to learn how to use flex box correctly for responsive design.
@wilrafnanda
Submitted
please look at the code and tell me if it can be simplified
@Meetkamal256
Posted
your code is as simple and concise as possible any alteration will just add further complexity to the code, well done man. I am a little new to coding just started last year, wish you success in your future endeavors....
