Completed my first project but it looks bad on mobile?

Code Feedback
1

Hi, I’ve completed my first project but I can’t figure out how to make it look good on mobile? I tried changing the font sizes from px - %, Iv’e also tried different media query’s but they don’t seem to do anything. I’m probably doing something simple wrong, I just can’t figure out what, any help would be greatly appreciated.

2

Welcome to the forums @TheLegend2.

The mobile version looks the same as the desktop version when I view it.

You can have font-size in em or rem units rather than a percentage.
For a small page like this you don’t need a media query.

There are some errors in your HTML code but since you’re not asking for feedback on your project at this time and because it’s not affecting the way the page displays I will not go into that at this time.

3

Hi, I changed the font from % - em and it still looks the same on mobile. I also wouldn’t mind any criticism on anything else as I’ve only been coding this past week and wanna learn as much as possible.

4

Hey,

I checked in different sized viewports and each looks great,.

I’ve checked your code and you had margin property appear twice for one class and one id in your css code. I don’t know whether it saves the changes I made, but if not you could check in the CSS Editor, clicking on the top right corner and click on Analyze CSS. By scrolling up and down to see if there are any errors in your code highlighted in red.

In you HTML code you have more errors, but these don’t really affect how your page looks. Only from the coding point of view, but I suggest you correct the errors. Only have to click on Analyze HTML in the top right corner of the HTML Editor on Codepen and you’ll see what you need to do.

Hope that helps.

Cheers and keep it up!

5

A small suggestion:
You could make a darker colored rectangle around the biography part.

Also, I suggest you use WebAIM ContrastChecker website to choose the right colors for accessibility purposes and also for the webpage to look good from the color point of view.

6

My point is that it looks the same on mobile as it does on desktop. What are you expecting to be different.
Btw, to simulate mobile I’m just narrowing my browser window as far as it will go.

It wouldn’t be criticism, it would be feedback. If you’d like feedback on your project open a new topic in the Code Feedback subforum.
(Do that with future projects. For now I’ll move this for you and give you some feedback)

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). (Be wary of creating duplicate property: value; pairs. It can make maintenance a nightmare)
    • (The one for HTML misses things which is why I recommend W3C)
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “timeline source” and “wikipedia page” are not accessible

Because I see some typo’s in your code, as a suggestion, switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

7

The clamp() function can be handy for responsive typography.

#title {
  font-size: clamp(4rem, 8vw, 8rem);
}
8

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