Product landing page feedback desktop to mobile

Project Feedback
#1

https://codepen.io/matthew-pourroy/pen/ZEpxrWG

It seems to look work well on the desktop but not on mobile. Any feedback about that or anything else?

#2

There are something you need to add and edit for mobile

  1. Change the font-size for the navigator in the media.
  2. Delete the width="630" height="400" in video tag and size yourself in css.
  3. In the media change the video’s width and height.
    Remember the ratio of the video is 630:400 !
  4. You need to resize the button’s size and the font-size of it in the media.
  5. Replace your #submit in the media.
  6. You can use image in HTML for ©!

Hope This Help

#3

One more piece of advice. Always use a narrow-first design approach. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. This will be your base CSS.

Then you can gradually widen the browser window and make adjustments for wider widths using break points.

#4

Some things to revisit @pourroy.matt.

  • First, Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

    • Mentioning because everything the browser renders belongs in the body element. You have a footer element outside the body. Review this for an understanding of the HTML boilerplate tags.

  • Run your HTML code through the W3C validator.

    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

  • Make your page responsive. Remember, the R in RWD stands for Responsive

    • There’s a horizontal scrollbar on smaller screens. (but you already knew that)

  • On responsiveness, start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.