@BartoszZ26
@AA-David
Submitted
I didn't know how to change images when the device's screen was larger so that I could have the image on the left and the rest on the right.
How can I change an image based on the size of the screen?
For some reason the browser can't load in the .svg for the "Add to Cart". And on Chrome the bullet point is at the side of the button, It's an easy fix, but I don't have the time.
Feedback and constructive criticism is welcome :)
@BartoszZ26
Posted
One way to switch images depending on screen size is by adding both images to your HTML and utilizing the display: none; property. Basically, you set the image that should be invisible to display: none; while setting the one that should be visible to display: block, flex etc.;. In your case it'll look similar to this:
desktop-image-element {
display: none;
}
@media (min-width: 800px) {
mobile-image-element {
display: none;
}
desktop-image-element {
display: block;
}
...
}