Frontend Mentor | Niklaus Mikealson's profile

@Lalithanjali-16

Submitted over 1 year ago

I have downloaded the starter for 3 times and all the 3 times the cart icon is not displayed while opening so that's the reason cart icon is not displayed in my project

Product preview card component using HTML and CSS

Niklaus Mikealson• 20

@Dhruv-mak

Posted over 1 year ago

Hey there!

It seems like the webpage you mentioned was designed specifically for large screens like PCs and laptops, but it's not responsive and breaks down when viewed on mobile screens. To address this issue, two essential concepts come into play: the <picture> tag and media queries.

The <picture> tag is an HTML element used to provide multiple versions of an image based on different conditions, such as screen size, resolution, or device capabilities. It allows you to specify different image sources and let the browser choose the most suitable one. This tag is particularly useful for responsive design, as it enables you to deliver different images for different screen sizes.

On the other hand, media queries are a fundamental part of CSS that allows you to apply specific styles to different devices or screen sizes. By using media queries, you can define different CSS rules for various breakpoints, ensuring that your webpage adapts and displays properly across different devices and screen sizes.

To make the webpage responsive, you'll need to consider a few steps:

Start by incorporating media queries into your CSS. Media queries enable you to define different styles for different screen sizes. You can specify breakpoints at which the styles will change. For example:

/* Styles for large screens */
@media screen and (min-width: 1024px) {
/* CSS rules for large screens go here */
}

/* Styles for medium screens */
@media screen and (max-width: 1023px) and (min-width: 768px) {
/* CSS rules for medium screens go here */
}

/* Styles for small screens */
@media screen and (max-width: 767px) {
/* CSS rules for small screens go here */
}

Within your media queries, you can adjust the layout, font sizes, image sizes, or any other element to ensure they fit and look good on different screen sizes.
To handle images, you can use the <picture> tag along with media queries. Within the <picture> element, you can specify different image sources using the <source> tag, each targeting specific screen sizes. The browser will select the appropriate image based on the conditions you set. For example:

<picture>
<source media="(min-width: 768px)" srcset="large-image.jpg">
<source media="(min-width: 480px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="Fallback Image">
</picture>

In this example, "large-image.jpg" will be displayed on screens wider than 768 pixels, "medium-image.jpg" on screens wider than 480 pixels but narrower than 768 pixels, and "small-image.jpg" will be used as a fallback for screens smaller than 480 pixels.

By combining media queries with the <picture> tag and adjusting the layout and styles accordingly, you can create a responsive webpage that works well across various devices and screen sizes.

Niklaus Mikealson

All comments

Product preview card component using HTML and CSS

Responsive calculation Tool website using flexbox