How do I make my Product Landing Page Responsive

1

This project took time to figure out Flexbox and Grid but finally near completion.
Please, can I have your suggestions on making it a better Product Landing Page? Thanks

2

You need to add some @media queries for different screen sizes in CSS.
Try this to start: Responsive Web Design Principles: Create a Media Query from the Responsive Web Design certification.

1 Like
3

Media Queries are a new technique introduced in CSS3 that change the presentation of content based on different viewport sizes. The viewport is a user’s visible area of a web page, and is different depending on the device used to access the site.

Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.

Here’s an example of a media query that returns the content when the device’s width is less than or equal to 100px:

@media (max-width: 100px) { /* CSS Rules */ }

and the following media query returns the content when the device’s height is more than or equal to 350px:

@media (min-height: 350px) { /* CSS Rules */ }

Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.

1 Like
4

Thanks for the hint @MadTheMadCoder

1 Like