Looking feedback for the third task, product landing page.
here’s the link,
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).
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.
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,
I was wondering if there was a workaround to resize the frame using relative sizing values?