Hi,
Looking feedback for the third task, product landing page.
here’s the link,
https://itsjustmygit.github.io/fcc_LandingPage_Repo/
Your page looks good @ItsjustMe. Some things to revisit;
- Don’t use in-line styling. Keep all your styling external.
- Make your page responsive. Remember, the R in RWD stands for Responsive
- There’s a horizontal scrollbar on smaller screens. The video is not responsive and falls out of its container.
It’s not a bad design, I like it. As said the responsiveness needs a little love. Some of it is just moving breakpoints up a bit (e.g. the cards grid).
FYI, If you want to have multiple transforms you have to chain them.
This is what you have on your card buttons hover:
transform: scale(1.2);
transform: translateY(-5px);
It should be:
transform: scale(1.2) translateY(-5px);
I would suggest you add transition to the hover effects.
Here is also an example of how you can do responsive videos (don’t use aspect-ratio
as it’s not well supported yet).
https://codepen.io/lasjorg/pen/mdObZbR
I’ll try to correct those issues.
Thank you for the reply.
I’ll address those issues, before moving on to next project. Thank you for your reply.
HI,
I corrected the code to make the frame adjust using media queries.
I tried using ‘em’ , ‘rem’, ‘vw’ values, but wasn’t able to resize them properly, so i used the ‘px’ value, it seems to be working.
Please take a look again,
https://itsjustmygit.github.io/fcc_LandingPage_Repo/
I was wondering if there was a workaround to resize the frame using relative sizing values?
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.