Need Feedback for my Product Landing Page

[geeth9792]

Just completed my product landing page and I need your feedback on it

I came up with the company name “Oracle” and the video used in the iframe is a random YouTube video on how to customize your Laptop (my page is about laptops)

link : https://codepen.io/durden_20/pen/xxdONoq?editors=1100

does this page requires any improvements ?

thanks

[AndyG]

Hello, your page looks good, however, I think you should revisit your Scatter plot tests results. When a test fails, you can click the red button to see what happens.
Hope this helps

[geeth9792]

@AndyG

Hello, your page looks good

Thanks : )

@AndyG

I think you should revisit your Scatter plot tests results.

scatter plot tests? I don’t get it.
do you mean “product landing page test suite”?
I already did that ( passes: 16 failures: 0)
And also ran the code through w3c validator

[Jenrykster]

Wow your page looks cool, but there’s horizontal scrolling on my phone, and the prices section is overflowingoverflowing

[geeth9792]

@Jenrykster

Wow your page looks cool

Thanks : )

@Jenrykster

but there’s horizontal scrolling on my phone, and the prices section is overflowingoverflowing

yea, that’s because I was testing some things out…
I fixed that now

[AndyG]

Ups… Maybe I was wrong.
Is only that these results seems a bit unusual.

Sorry if I cause a misunderstanding.
Best wishes, congratulations in your project.

[geeth9792]

@AndyG

Sorry if I cause a misunderstanding.

It’s fine , you just accidently got the results for the D3: Bar chart instead of Product Landing Page

also… can you help me with something?
when I scroll using the bookmark id, it scrolls further than needed in the mobile version. Do you know how to fix it?

[AndyG]

Mmm, sincerely I don’t completely know.
Maybe this could help.

Well-Controlled Scrolling with CSS Scroll Snap  |  Web

Also, you can search past issues on FCC forum. I found some that could be of help:

Scroll Event not working in mobile browsers

I changed it but still it hasn’t come. Have I missed any file?:thinking:

CSS `scroll-snap` not working

I haven’t really used scroll snapping. As far as I can tell, it isn’t working because main is not your scroll container. If you move the parent container CSS scroll-snap-type to the html selector it should work. Although, I’m not sure why it is behaving so aggressively when doing so. Another option is to hide the overflow-y on the body and then add it to main by forcing a scroll overflow. But when doing so you will have to adjust how you are doing your centering in the sections. I would suggest…

Hope this helps

Horizontal Scroll, need only vertical scroll

Hey, Thanks very much, i almost dismissed this because i thought i had tried it already, changing it from vw to %, but after looking over my code i only changed some elements to % and left others at vw. It made me think it didnt matter. But when i changed all the elements from vw to % it resolved the issue and no more Horizontal Scroll Thanks!!

[lasjorg]

@geeth9792

when I scroll using the bookmark id, it scrolls further than needed in the mobile version. Do you know how to fix it?

You can add scroll-padding inside your 600px media query.

@media only screen and (max-width:600px) {
  html {
    scroll-padding-top: 170px; /* height of header */
  }
}

[geeth9792]

Thanks it works now