Landing Page Project--Need help w/page size reduced

Code Feedback
1

I decided to challenge myself by not relying on any Bootstrap. That being said, I admittedly get pretty confused between all of flex-box and it’s different axes and terminology. Technically, this page meets all of the test criteria. However, desktop-only isn’t good enough for me–perfectionism, ahoy! I am looking for any helpful feedback as far as making the page mobile/tablet friendly, esp without collapsing the nav completely and the testimonials section–and without copying a Bootstrap template, obviously. I’m hoping challenging myself in this way will help me better understand the layout functionality and really learn it. Thank you in advance, <3 you FCC fam.

https://codepen.io/jsharick7/full/vYNZqgE

And YES, I did make a product landing page about DICE. That’s how creative I am without clients.

2

:smiling_face_with_three_hearts: Congratulations @jsharick7 .

  1. I notice the site is not mobile responsive (Very important this day and age).
  2. You need to add some padding to the navbar.
  3. Take some time styling the email input and submit button.
    Happy Coding
3

Hey,

CSS is really tricky and it’s based on what approach you’ve taken in your website how well it’s structured. There really isn’t a “one fix for all” solution. But for now, using flexbox, I would look into flex-wrap and flex. I would also play with changing the flex-direction in different screen sizes using media query.

There’s a set height for .test-card which also messes with the responsiveness for the page. Other than that excellent use of the flexbox. It’s bit tricky at first, but once you get the hang of it, it’s pretty neat!

For the header, I’m not sure what else you can do other than changing the font-size and margins.

Good luck!

1 Like
4

Thanks so much for the feedback thus far. Do you have any recommendations for fixing up the width of the overall page? For some reason, if I assign width: 100vw; to different elements, they seem to just arbitrarily end, and they don’t line up at the right. Is that a codepen thing? I’m dealing with a bunch of extra whitespace on the outside of everything.

5

Glad you managed fixing some of the responsiveness! Ok so some things to remember

  1. HTML elements such as body usually have preassigned styling attributes to them, such as margin and padding. You can remove them by giving at element zero padding and margin (just an example). These stylings could be different for each browser, so it’s good to reset them in your CSS. Maybe this article can help a bit https://css-tricks.com/reboot-resets-reasoning/
  2. No matter what size you’ve given your parent element, child elements can stretch it out. So go through different elements and see which one is causing your page to stretch out (I found two different sections in your page that did that, I won’t spoil it for you :smiley: )
  3. Try not to give p elements width. I personally think it’s a good practice to apply those to the parent (padding, margin, width etc) and have the p kinda just sit there.
  4. If an element has padding-left, it’s good to also give it a padding-right (or vice versa) this way they won’t get pushed to one side.

Hope this made sense! Let me know if you have other questions.

6