Product Landing Pg feedback

Code Feedback
1

https://codepen.io/jayval87/full/aRLNGG Check out my product landing page i appreciate the feedback in advance just trying to improve

2

Good effort. You’ve clearly laid out a cohesive theme with a decent eye for color, and set up some CSS code to make the layout responsive to the viewport width, however you still have some calculations to improve. Your page has the telltale sign of a horizontal scrollbar when I narrow the width to around 400px or below (and you really need to support down to 375 or so, 350 to be safe). You managed to make the video responsive, which is more than many do, so be proud of yourself.

I think you need to add more media queries to address the issue of how to make your project respond to width changes like the model. Also, I’m not sure how much effect your sole current media query has, since it doesn’t visibly do anything, and you’re switching flex-direction from column to row on #gold, #silver, and #bronze but you’re displaying it as an inline-block instead of a flex container. For dead-simple basic advice on flexbox, see my CSS cheatsheet, which also has good stuff on Responsive Video.

One note on those gold, silver, and bronze tiers, relating to the Don’t Repeat Yourself (DRY) principle: If you have a bunch of elements with a lot of styling in common, create a class to apply to all elements for the features they share. You may want a .plan-tier class or something.

1 Like
3

Thanks I appreciate you taking the time out to review my work I will be making the necessary changes.

1 Like
4

Cool. Make sure to reply once you’ve updated your project, or if you get stuck. Looking forward to the newer version(s).

5

Thanks again for the feedback I have updated the page

6

Congratulations on passing all the tests! I know nothing feels worse than going back to a project when you’ve “completed” it, but I think NOW is the time in your learning path to really improve your CSS. It’s way easier if you follow the advice in the last numbered point.

You don’t happen to have an older version that you forked off to which i can compare, do you? I’m still noticing some significant problems with layout.
Some of them have to do with the overall structure of your page:

  1. Structure%20of%20the%20page
    Structure%20of%20the%20page722Ă—466 39.5 KB

    As you can see, you have a div #wrap which basically does what the <body> tag would if you weren’t in codePen. I am a big proponent of fighting “div-itis”. If you applied any general directives to body { prop: value } in your CSS, it would be easier to keep track.

  2. Regardless of the viewport width (even up to 1915px) the page extends off the right edge.

    • This is because the div you’ve wrapping the whole page in a div and using that to push it 30 px to the left. Why?

  3. If we set the left property on #wrap to 0px, the horizontal-scrollbar reappears at widths < 1072px.

  • I’m not certain, but I think your issue is: CSS conflicts: The browser has to decide which directive overrides the other.
  • What I do, and what I recommend doing with all your layouts, is to use color to help me mock-up the layout so I know EXACTLY what my CSS commands are doing until I’ve got the CSS doing what I want. The best example I could find was an incomplete and far-from-perfect version of my own Product Landing Page. Look at it and see what I mean. By generously using the background-color property and setting it to different things, I can see when my CSS code is causing me problems, and generally, which property on which selector (id, class, element) is causing me problems.
  • The general order of “power” in CSS selectors is #id > .class > element.
  • I would highly recommend you read “CSS Specificity Wars” AFTER you enact the advice in the bullet point above

Also, I don’t know if you do this, but when you design your layouts, do so with the DevTools (F12 on Chrome & Firefox) open. I make heavy use of the Inspector feature. You can use the mouse cursor icon thing to the left of it to select an element in your page, and see how it is constructed, or you could mouse-over the html code and see how the browser is putting together the layout that way. I’ve included a screenshot below to make that make sense:

DevTools%20Inspector
DevTools%20Inspector3680Ă—1960 532 KB

1 Like
7

Man thanks a lot for your feedback I really appreciate you taking the time out to critique my code. No I don’t have a older version forked unfortunately. I followed the steps you laid out and adding the background-color property to various elements in the CSS really gives you some clarity. That article was great to I had to bookmark it.

1 Like