Project Feedback : Product Landing Page

Code Feedback
1

Hi guys, I would love to have some feedback on my page, it’s made with html and CSS/Sass I’m still planning to add some animation and may be a bit of javascript but I’m also here to ask advices. (I’m using Glitch because it’s completely free and you can host images).

Let me explain : I’ve been doing this website from smartphone to large screen and with the fixed nav-bar when you click on anchors it sends you halfway in the section…
So I’ve been using some padding-top but I’m not sure of the result, so if anybody has a trick I am much interested.

Then I’m working mainly with Mozilla (developer edition) and I do a few checks with Chrome. My problem is with Firefox everything is fine and on Chrome it’s not so it’s a bit of a pain in the ass. Again if someone has a trick. :slight_smile:

https://landing-page-sc.glitch.me
Looking forwad to hear from you guys ! Thanks

1 Like
2

What is not working in Chrome?

Using top padding works fine here, you can also use some negative top margin to pull the sections back up again (more techniques).

.features {
  padding-top: 196px;
  margin-top: -160px;
}

You have a paragraph in the footer with a margin on it that is creating white space at the bottom of the page.

footer p {
  margin-bottom: 0;
}

When the page stacks I would center the form and give the price/product cards some more vertical space between them. Because .container is a grid you can use gap (also called grid-gap) on it (gap: 30px) to get the spacing.

3

It’s working on Chrome but it’s just like everything is “zoomed” on Chrome so my paddings that are just fine on Firefox are fu…d on Chrome.

First one is Firefox the nav-bar in the Ipad view is just fine,

Capture d’écran 2020-03-15 à 15.00.11
Capture d’écran 2020-03-15 à 15.00.111440×900 346 KB

while on Chrome the nav-bar is different and makes me wanna change it to make it cleaner.

Capture d’écran 2020-03-15 à 15.01.17
Capture d’écran 2020-03-15 à 15.01.171440×900 292 KB

Thanks for your feedback I’m updating my work.

4

It doesn’t look like that for me. Maybe it is Mac/Chrome issue.

Also, because you added the negative margin to the sections you have to account for that in the media queries targeting the .features class as well, otherwise it will pull the sections up to far because you have less padding in the media queries.

1 Like
5

Hmm good to know…
I’m guessing the best would be to try directly on a smartphone or a tablet.
Ok thanks a lot !