Suunto Smart Watch - Product Landing page - feedback please. Thank you

Suunto Smart Watch - Product Landing page - feedback please. Thank you
0

Good morning coders. Here is my Product Landing page https://codepen.io/Genome22/full/WNbdmYj, I have spent some time on it and there are still some things that I am not happy with and that I would like to fix.

Can you let me know if the page displays right on your screens? The page displays exactly as I want it on my computer, however, when I open the page on different computers, there are some problems as squashed paragraphs, different margins, etc. I also used the media query in my CSS for the page to display correctly on different screen sizes but there are still these problems. Does anyone know why this happens and how can I fix it?

Any feedback will be much appreciated. Thanks a lot, happy coding.

1 Like

It is nice. work on responsiveness and change the font may be. And bottom margin…

Thank you for your feedback @HumbleAssassin. Well, that is exactly what I have mentioned in the post above, the website displays perfectly fine on my computer, I also included media query in my CSS for six different screen sizes(1600px, 1536px, 1366px, 1024px, 960px and 500px), when I resize my browser to these sizes the page display perfectly fine on my computer, however, when I open the website on different computer then there are bugs on the site. Do you know why is that happening? What do I need to do to make sure the website displays correctly on each computer? Did you look at my code, do you see there anything wrong?

Hi @Genome22,

This is a pretty good start. The images look great on desktop and the colors are pretty good. There are some issues to address as well:

  • There’s 2 tests failing in the FCC test suite.
  • The Layout breaks on a lot of devices, screen sizes. Consider researching/using CSS grid instead of position and floats for layout. FCC has grid as part of the curriculum and there is a lot of tutorials out there on the subject.
  • Line heights need to be set for different device sizes. The text overlaps on several screens.
  • Some more padding on the sections would probably make things look a bit nicer. Some of the text is very tight to the bottom margin.

There are probably some other things that could be worked on, but that should be a good start.

Good luck
4trio19 :pineapple:

1 Like

Hi @4trio19, thank you for your feedback and for taking your time looking at my code, really appreciate that. I will look at those issues and hopefully will manage to fix it.

I have tried to use the grid, but I have struggled to position the elements where I needed to. I will look at the CSS grid again and will integrated into my CSS. One question though, will I need to change my HTML code to be able to use CSS grid on this project?

1 Like

You’ll need to make some adjustments to the HTML, but probably not a lot. There will be a lot of CSS to remove and replace though. Not sure how much time you want to invest, but it might be a good learning experience to start from scratch.

Cool. I thought that I may need to do some changes to the HTML. Yeah, I will start again from scratch and will use CSS grid so the landing page will be fully responsive.

One more question though, is CSS Grid used predominantly now in web development or do web developers still use “old fashioned” CSS3?

1 Like

For new stuff Grid is going to be more and more prevalent. If you are updating existing stuff its useful to understand how floats/clears/etc were used for layout, but I wouldn’t use that for anything new. Grid is cleaner and makes a lot more sense. Here’s a couple (somewhat dated) articles that may help:

4trio19 :pineapple:

1 Like

Though I am also on basics to answer very deep questions, here are my two cents. You used the positioning absolute for them. I think this is giving you problem. absolute and fixed comes with drawback that other HTML element thinks they are not even there. try relative positioning and adjust their "top"s accordingly. You might have felt that you had to adjust top position of subsequent later elements after the each of them. I would suggest you don’t absolute as position unless nothing else works.

Color selection is “Sugar”, I say. I commend on that but font-family for page like this should be something else. I don’t know may be …
______ See below one for sure lol… lmao______
wait while I was investigating more on font I found something interesting. lol. I am not going to edit anything I wrote until now coz they seem fun when you read all. I deleted the imported font and the page does not break down. I still breaks a bit but it is negligible…lol try and see it yourself… lol

1 Like

Hi @4trio19, I have started the Product Landing page from the scratch using CSS Grid layout, but I very quickly realized that if I will use CSS grid layout I won’t be able to follow the story for the Product Landing page(https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page), if I would make the HTML as they ask in the story then I won’t be able to style it or use the CSS grid as with CSS grid can’t style/position divs inside another div, is that right? And that means that I would not pass the test. :thinking:

No. You can use display grid on divs. Here’s my Product Landing Page for reference: https://codepen.io/4trio19/full/dKrZjm. I used Grid and Flexbox for different things and passed the user stories. I’d probably run through the Grid lessons on FCC again to refresh knowledge.

4trio19 :pineapple:

1 Like

Hey. Thanks for the reply, yeah, will do a quick revision on CSS Grid and will use CSS Grid to build the site. Thanks for the site that you have sent, will look at your code as a references to see how I can implement it and use it with CSS Grid. The site looks good man, really good job. How far are you now on FCC? And how good/useful do you find FCC?

Hi @4trio19, I looked at your Product Landing page code and the code is a bit different then mine, that’s good, I am still learning and I do enjoy learn from someone who knows what they doing. :slight_smile: .

I have noticed that you are using CSS Variables so I looked up some courses online and found one decent course, so I went through the CSS Variable course and did a revision on CSS Grid as well and also started the Product Landing page from scratch as you advised, however I came across one problem there with CSS Grid and I am not sure why the code is not listening to my commands.

Would you please have look at it and see if you can see why it is not working?
The problem I am having is that I can not move the logo to the right, to be precise I would like to move the logo from the cell one to cell 4 ==>> css code ==>> header img ==>> grid-column: 4 / 6 is not working for me. Any idea why it is not going to that position?

Thank you in advance for taking your time and looking at it. Your help will be much appreciated.

Regards Filip