How can I make my websites more adapts to mobiles?

Tell us what’s happening:
Hi !
I started the freecodecamp program about 4/5 months ago and it’s definitely the best decision I’ve made in a very long time.
Anyway, it’s been a while since I’ve done html-css to fully focus on javascript and I just found that even though my projects look pretty good on my PC, they look like crap on my cell phone which is annoying.
I would like to know, please, what are the best ways for me to make my projects mobile-friendly? media quierries comes to mind but is there something else?
Your code so far


The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36 Edg/106.0.1370.42

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

You are on the right track with media queries. My suggestion would be to start by making your page look good on a small device (such as a cell phone) and then use media queries to adjust the layout as the view port gets wider. Most people refer to this as a “mobile-first” approach but I prefer the term “narrow-first” because you can still trigger the narrow layout on a desktop by zooming in a lot.

1 Like

I had the same problem i put my finished projects onto code pen so i could change them around some more but when i checked them on my cell phone they looked horrible. I ended up changing the @media statement for the sections that didnt look good. I changed to the full screen mode then minimized the screen as much as possible to mimick a cell phone screen after making changes and it seemed to work. After you are done recheck them on youre cell phone to see if the changes worked ok. I have only been at this a few weeks so there might be a better way to do this but it works.

To make it look good on mobile screen; you need to follow principles of Responsive Web Design

Follow below to master RWD

  1. Conquering Responsive Layouts

  2. Search for “responsive web design” in YouTube, follow tutorials from Kevin Powell, Net Ninja.

  3. Next time you’re building projects; start with mobile first approach ( search “kevin powell mobile first” in YT )
    This has helped me a lot while building projects from Frontend Mentor | Challenges


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.