How can I adjust image descriptions for mobile viewing?

Solved

How can I adjust image descriptions for mobile viewing?

Vlavlip
Excursionist
49 0 7

Hi all,

 

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

Vlavlip_0-1696508059211.png

 

 

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

Vlavlip_1-1696508059151.jpeg

 

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 :))))

Accepted Solution (1)
topnewyork
Navigator
310 35 47

This is an accepted solution.

@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.

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

View solution in original post

Replies 6 (6)

topnewyork
Navigator
310 35 47

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 </body> 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

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

 

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
Vlavlip
Excursionist
49 0 7

HI @topnewyork 

 

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

topnewyork
Navigator
310 35 47

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

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
Vlavlip
Excursionist
49 0 7

Screenshot 2023-10-05 at 14.39.49.png

topnewyork
Navigator
310 35 47

This is an accepted solution.

@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.

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
Vlavlip
Excursionist
49 0 7

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