Responsive design hick-ups (flexbox gap, and img width)
Hi!
My problem: trying to make the the gap property of my flexboxes responsive.
It needs to be readjusted in both header and footer, it works fine when im doing my first media query(for tablets) but then when i want to do it again for laptop and pc screens it overrides the tablet's.
Same problem with img widths.
https://codepen.io/Ranzo-web/pen/oNOrJRQ
Appreciate all the feedback 😄
13 Replies
Could you reduce the codepen down to just the header (and footer if needed) please?
i updated the css
should i do the same to the html?
sure
updated that too
what just got on my mind, should i have given media queries ranges for both min and max width, in order to avoid these overlaps with gaps
i.e for tablets, media only screen and (min-width: 768px) and (max-width: 1023px)
you could use a clamp function once so you dont have to keep setting media queries and its responsive
Thx for the reply, Ill try it out
I managed to figure out how to fix the gap but i am still a bit confused on how fixed widths work for images and where should i give them max width values
Sorry man I was a bit inebriated last night not going to lie
I'm still not sure what the issue is / was exactly, can you explain in a bit more detail for me please?
dont even stress about it the issue was that i wanted to change the gap value for all the different screen sizes, but then i remembered i can use flex: 2; and flex:1 respectively to make them responsive on any screen 😄
in the footer i used j.c space between instead of setting the gap, also does the job
just have to go investigate a bit more on avoiding fixed widths and some more responsive design practices, ahh guess that comes with practice and trial and error
got it, and yea! it takes a lot of practice to even start getting an intuitive grasp of css, and then even more practice to pick up your own "style" and figure out how to mesh everything together nicely if that makes sense
you're doing great though just keep doing what you're doing and everything will fall into place soon enough 🙂
appreciate the support im gonna need it more then ever since i just started learning JS 😄
haha yea JS can be intimidating when you first start but same thing as html / css, just gotta practice it enough until you get comfortable with it. my tip is not to try to go down every rabbit hole (eg: when you are making something and get stuck, you look up some stuff in the docs and then start reading every link inside that doc (been there too many times)). there are also some good resources on fundamental JS that I need to do myself but I heard https://www.javascript.info is really good
haha noted i was planning to finish the bootcamp on freecodecamp and while completing it do a some projects on frontend mentor that include some basic JS (at the end of the day thats how i got more familiar with html and css) so we will se how it goes
sounds like a good plan too!