Feedback and question on Product Landing Page

Hi everyone,

my Product Landing page project is completed.
The header position is fixed. Nevertheless, the pricing area overlaps when scrolling down. Can someone give me a tip? I am also open to opinions and suggestions for improvement.

Product Landing Page - DIGITUAR

Thank you in advance for your answers

Best regards and stay healthy,
Ozan

  1. Give the header z-index: 10.

  2. The .features section is overflowing the page. See if you can implement flex wrapping or use a media query and switch it to a flex column layout when needed.

  3. The bottom border for the nav links on hover is pushing them up, so they jump up and down on hover. One simple “fix” is to give the links a transparent bottom border of the same size, so they always have a bottom border but you just can’t see it.

#nav-bar a {
  border-bottom: 1px solid transparent;
}

Edit:

  1. Switch the order of the Pricing and Info Video links to match the page order.

  2. Give the footer links a different color and position them vertically in the center.

  3. You didn’t close the footer a selector.

  4. Using justify-content: flex-end on the copyright doesn’t seem right, I would keep it in the center.

thank you @lasjorg. I did everything what you wrote. I also wanted to change the pricing boxes same as features boxes. Unfortunately I have not yet managed to do it.

Hi @lasjorg,
so now I’ve done what I wanted to do.
Is that OK now?

Looks a lot better, nice job.

  1. You still have the issue with the nav link hover. Add a transparent bottom border to the links so they do not jump up and down when hovered.

  2. The nav link order is still not right, it should be NEWSLETTER, PRICING, FEATURES, INFO VIDEO to match the page order.

  3. Add width 100% to the header and justify-content: space-between, then remove the 95vw on the ul in the nav. You also need to figure out what to do with the header at small screen sizes, maybe switch to flex column and center the logo and nav.

  4. The 100vw on the form is causing an overflow and you do not need it anyway.

  5. I would make the features grid a two-column auto grid and add a media query to avoid the overflow on screen sizes below 500px

.features {
  /* auto left/right margin */
  margin: 100px auto;
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  background-color: #fff;
  color: #444;
  /* max-width to force it to a two-column grid */
  max-width: 1360px;
  /* some padding to avoid it the edge */
  padding: 0 40px;
}

@media (max-width: 500px) {
  .features {
    /* switching from min 400px to 1fr */
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
}
  1. The pricing plan cards are fixed width and will overflow the page on small screens. You can use Flexbox or CSS Grid instead of doing it using inline-block elements.

  2. Make the nav links land correctly on the sections.

Hi @lasjorg,

thank you very much for putting so much effort into listing everything for me. I greatly appreciate that.
I implemented some points and did some things very differently. I am actually satisfied now, but I would like to know if you notice anything that I may not have seen.

  1. I still think the navigation is confusing because of how it doesn’t use the natural page order. But it’s up to you.

  2. The links do not land correctly, check the link I posted on how to fix it. It’s basically just some top padding and some top negative margin.

  3. The plan cards are still fixed width. On small screen sizes, they will overflow the page. You can just add a media query at 460px and switch the width from 400px to 100% instead to let them shrink down as needed.

  4. The mobile navigation needs to either not have 100% height, or it needs to close when you click a link. As it is right now, it isn’t very useful because it is covering up the page.

Anyway, you did well and the page is pretty nice. You can always return back to it later if you want to work on something else instead.

1 Like

thanks @lasjorg. Everything you say makes sense I have changed a lot things and learned a lot as a result. And I don’t really want to start something new without completing it, but this time I’m going to continue. I still have two projects. Thank you very much for your help so far. I will definitely come back to you

now i know what you meant. I changed it, thanks

Hello @lasjorg , it depressed me too much. I had to do it and tried to implement the rest of the points you criticized. Looking back, I noticed that I wasn’t happy with the result myself.
The collapsible navigation was unnecessary, but a challenge for me.
I am very curious if you can find anything else

  1. I like what you did with the nav. Personally, I would center the links, you can add text-align: center to the container ul for that.

  2. You changed the features grid and it now overflows the page (from 1070px to your media query at 880px). What was wrong with the old grid?

  3. You still need to make sure the price cards do not overflow, in the plan selector change it from width: 400px to max-width: 400px and also add width: 100%.

  4. Using height and line-height you can vertically center the X for the close button.

.header .navbar ul .close span {
  font-size: 40px;
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 0 10px;
  cursor: pointer;
  
  /* center the X */
  line-height: 34px;
  height: 40px;
}
  1. The hover on the submit button is a little glitchy, change the background-color properties to just background. You can keep the transition using background-color.
#form input#submit {
  text-transform: uppercase;
  background: orange;
  color: #000;
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}
#form input#submit:hover {
  background: var(--red);
}
  1. As a last finishing touch you should balance the vertical space between sections. The top and bottom spacing should match. See point 2 in this article if it’s unclear (read the full article as well).

You put a lot of effort into the page and that is always great to see, I really do think you did well. Keep it up!

1 Like

Hi @lasjorg,

the time you invested for me is impressive, thanks a lot. I try to make it perfect with the help of your suggestions and tips.
There are a lot of details that I have learned and am learning. That was and is also my goal.
I tried to implement the new points but I’m not sure if everything is as you expected.

  1. I should have been more clear. I meant the mobile menu nav links should be centered. That is why I suggested using text-align: center on the #nav-lists ul. But now that we are talking about it, personally I prefer right-aligned links for desktop nav, but left-aligned works as well and it’s up to you.

  2. Removing the box around the closing X, was the right choice, it looks better I think.

  3. You still need to change from background-color to background in the #form input#submit selector.

  4. You may want to give the whydigituar section a bit of left/right padding just so it does not bump up against the edge on small screens. BTW, you have an invalid value for the align-items property (justify isn’t valid).

  5. The vertical spacing is much better now, good job. I would suggest giving the plan cards some vertical space between them when they are stacked. So using the same max-width: 1070px media query breakpoint target the first card and give it some bottom margin.

@media (max-width: 1070px) {
  .plan:first-child {
    margin-bottom: 20px;
  }
}
  1. You fixed the overflow on the plan cards. But their content is not the same width when they stack because of margin: auto on the .columns. Specifically, it’s the left/right auto margin that is the problem (you can keep the top/bottom at auto).

I will stop bothering you now, haha, again good job on the page.

1 Like

You have never bothered me, on the contrary. I learned a lot from your tips.
As far as everything is implemented again, but to be honest I did not fully understand point 6 or, correctly said, noticed no major difference.
Did you mean "@media (max-width: 1070px) {
.features {… "
or the normal “.colums {…”?

Thanks a lot and sorry for my bad English.

You did fix it.

Auto margin:


No auto margin:

You didn’t fix the hover though, Here is the CSS, with what needs to be changed commented out and the new CSS below it.

#form input#submit {
  text-transform: uppercase;
  /*background-color: orange;*/
  background: orange;
  color: #000;
  cursor: pointer;
  transition: background 0.2s ease-out;
}

#form input#submit:hover {
  background: var(--red);
}

I’m sure if you look at the current hover off, you can see that right now there is no transition out state, it just flashes off.

Your English is just fine. I’m happy to have helped.

2 Likes

you are great. Many thanks. So far everything done. Until the next project