Hi guys! Just finished my 3rd project, the landing page. I’m pretty satisfied with it, but I do need help on making it responsive on mobile, tablet, and desktop. It’s been driving me crazy!
Also, what general rule do you go by to make images, text, things responsive?
Link to project here: https://codepen.io/inkerina/pen/KbJQOJ
Any other feedback appreciated too. Thanks!!
I had to use a lot of media queries to get my page responsive to mobile devices oriented both horizontally and vertically, and I used CSS Grid to get my navbar working properly. If it helps here’s my code:
It’s looking great so far! As far as responsiveness, like @BenJohannson said, you’ll need media queries.
I don’t use a general rule other than those media queries but, I tend to try and use a relative size for things, as opposed to a fixed size.( I use em or rem, when I can) This can help. http://pxtoem.com/
Also, you’re going to want to get into coding “mobile first”. What this means for me is, I code my mobile page, then I add media queries for larger sizes, which I find easier and is also “best practice”. Then again, I’m only just learning too!
Anyway, if you wanted to check out mine and give me feedback, I wouldn’t be upset.
Good luck!
I like the isolation effect of the links on your navbar. It’s unusual so stands out creatively. Also that link is really helpful, so thanks.
Thanks for the feedback. Just had someone tell me it wasn’t responsive and had a horizontal scroll. I’m guessing that box-sizing:border-box isn’t loading for them but, they figured the’d explain media queries to me just for funsies. And they didn’t like the navbar and thought I should waste the whole top bar for 4 buttons. The feedback on here can be all over the place sometimes.
But, thanks again and glad the link is useful. I use it a lot.
@BenJohannson thank you! your code really is helpful and i checked on my mobile, looks great!!! I will definitely have to look more into media queries then…