Product Landing Page - Please give feedback

Project Feedback
#1

Hello,

Here is my submission for Product Landing Page Project.
Codepen
Netlify
I have used css flexgrid, a bit of bootstrap and JS for smooth scrolling.
Please give your valuable feedback as to how the page can be made better.

#2

@cryptographicfool beautiful page!
I recommend replacing the lorem ipsum text with your own writing. It will look more professional.

2 Likes
#3

I recommend replacing the lorem ipsum text with your own writing. It will look more professional.

I am on it, will replace it shortly.

I am not very happy with how this is responding on mobile screen size, could you give any pointers on how I can improve that? ( If you have free time ofcourse )

Thank you for having a look. :slight_smile:

#4

Replaced it. :blush:

1 Like
#5

Excellent on full screen desktop!
The media queries need a little work.

  • Large images and sections when scaled down to a narrow width they tend to occupy to much of the device height. I don’t think the footer has to be so chunky on phone size. You decide.

  • On all break points smaller than fullscreen desktop the more sub-menu background-color is dark making it hard to read.

  • On phone size the contact section alignment is farther “off”

Really good I think you could get a job off that. Make all your projects that good.

@cryptographicfool On Netlify, on my phone, running ios 10, that’s two versions behind the current one, my third point doesn’t apply. The top and bottom margins could be reduced a little.

On Netlify, the heights (like the header) look smaller on my desktop, as does the font-sizes like the h3 and the footer. Are you using a reset sheet or normalize?

@cryptographicfool FYI Apple recommends relative measurements for fonts for Retina screens like ems or rems instead of px.

1 Like
#6

Thank you for the reply. I need to clean up the code a little and work on media querries to make it a better fit for smaller screens and all your points are valid, I am going to try and fix it all in time. :slight_smile:

You can view it without the code-pen header over here https://floatmusic.netlify.com/

It is a little overwhelming that you say I can get a job off of this page. :smiley: This is the first proper project I did since I could not do much in Tribute page or Survey page. I will definately try and make all my further projects the best I can.

Thank you for taking the time to review and critique.

Cheers!

@tlc35us I am using normalize.css
I made the page on an old thinkpad so the screen size is not even full HD. I just checked it on my macbookpro and the main text font, H3 as well as the titles of product categories look very small indeed. I am going to gave to fix those.

#7

@cryptographicfool my friend.
It appears that you have a bit too much of either padding or margin on the sides in mobile view. I try to get the content to take up 90% to 96% of the width in mobile view. So just have the content take up more width. I start building a page at the mobile view first, then expand outwards. In mobile first media queries you would use

@media only screen (min-width: 400px) {
   /* code */
}

@media only screen (min-width: 600px) {
   /* code */
}

I find it is easier that way.

Tip: Use text-align: justify on your paragraph text to space out the words evenly.

1 Like
#8

It turns out I had a media query for min width but forgot to add one for max width so as to make things work properly on smaller screens.
I have made some changes with media queries, font sizes as well as padding and text alignment so as to make this work better across devices.
It looks a lot better now. Thanks y’all for all the help.
Cheers!

#9

@cryptographicfool I see the improvements in the media queries. Nice!
A few more tips:

  • in Codepen click on the down arrow in the HTML pane so you can select Tidy HTML and Analyze HTML. You will see some HTML errors.
  • do the same in the CSS pane.
  • the more submenu in mobile view does not have the same background color as it does in desktop view. It is a bit hard to read the menu items.

Good job on your page!

1 Like
#10
  • Made the code tidy. Analyzed the code, no errors on JS or CSS but a lot of errors on HTML. Will be looking into those.
  • Done
  • Fixed the color.

Thank you :slight_smile:

#11