@hitmorecode
Posted
Actually when you setup a web page without adding css, flexbox, grid and so on. The page is already good to go for mobile, because every time you place a div or p or h tag, they are going to pile on top of each other. So your html out of the box is already mobile first. It also took me awhile to understand this.
You just need to add style to make it look nice. After that you can start working on a desktop version.
You are using flex-wrap to switch to mobile (it's not wrong), you could have used media query and set a width for mobile and go from rows to column in one click.
@suhridp
Posted
@hitmorecode how can i add the width for the mobile? then everything in the page width will not be in coherence with the design?
@hitmorecode
Posted
@suhridp so I took a better look at you css, there are somethings that you used but don't need.
body{
display:flex;
flex-direction:column;
/* if you add these two lines the content will be vertically aligned to the middle of the page */
min-height: 100vh;
justify-content: center;
}
header{
height:1rem;
/* width:100vw; */ /* you don't need this */
}
.container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
/* overflow: hidden; */ /* you don't need this */
}
.container {
/* z-index: -1; */ /* you don't need this */
background: url(bg-pattern-top-mobile.svg);
background-repeat: no-repeat;
}
/* if you didn't used flex-wrap, you could have done something it like this */
@media only screen and (max-width: 1020px) {
.container {
max-width: 300px;
}
}
The thing is when switching from desktop to mobile, some times you have to adjust the width of the elements to make it fit a mobile screen.
Marked as helpful
