I needed a picture in the desktop version of a website and in the mobile version another image.
Since the counter would be on the desktop (as it already is) on the desktop and the mobile would show another image, and the counter below.
The page is this here:
I do not have much programming experience.
In your CSS file you can use Media Query, which makes it possible to change the behavior of CSS for different resolutions.
In this case it would be ideal to have two different images in your html. Since the desktop image is visible by default, and for mobile hidden
Using the example below ((max-width: 700px)) if the screen resolution is at most 700px, you can put custom css code that will work only in this situation.
Example:
/** Para mostrar somente no celular*/
@media (max-width: 700px)
{
.imagem_mobile
{
display: block;
}
.imagem_desktop{
display: none;
}
}