How can I adjust image descriptions for mobile viewing?

Store Design
,
1

Hi all,

For my desktop version I moved the description to the right of each image. (see below)

Vlavlip_0-1696508059211.png
Vlavlip_0-1696508059211.png399×197 20.1 KB

However this doesn’t work well for the mobile version:

Vlavlip_1-1696508059151.jpeg
Vlavlip_1-1696508059151.jpeg507×999 46.5 KB

How would I move the description under each image for the mobile version, but keep the desktop version the way it is???

website: ordinarythings.club

Thank you so much for the help :))))

2

Hi @Vlavlip

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag

@media only screen and (max-width: 425px){
    .collection .card.card--standard.card--media{
    display: block;
}

.collection .card.card--standard.card--media .card__inner {
    width: 50%;
    margin: auto;
}

.collection .card.card--standard.card--media .card__content {
    width: 100%;
    padding-left: 10px;
    margin: auto;
}

}

topnewyork_0-1696508825926.png
topnewyork_0-1696508825926.png423×570 29.3 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.

3

HI @topnewyork

thank you, I have tried but it doesn’t seem to work. any idea why?

4

@Vlavlip can you share screenshort in which file you paste code?

5

Screenshot 2023-10-05 at 14.39.49.png
Screenshot 2023-10-05 at 14.39.49.png1318×845 150 KB

6

@Vlavlip Try this..

{% style %}
@media only screen and (max-width: 425px){
    .collection .card.card--standard.card--media{
    display: block;
}

.collection .card.card--standard.card--media .card__inner {
    width: 50%;
    margin: auto;
}

.collection .card.card--standard.card--media .card__content {
    width: 100%;
    padding-left: 10px;
    margin: auto;
}

}
{% endstyle %}

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.

7

@topnewyork you’re a star thank you!!!