Solved

Symmetry theme MOBILE: how to change text-picture order without changing it in the desktop version

Delasoul
Excursionist
44 0 3

Could anybody help me with the following:

I have three image-text blocks in my desktop version like this:

Delasoul_0-1711573035643.png

On my mobile view this reverse order causes that two pictures are following to each other and it seems very confusing with the header and text order:

 

Delasoul_1-1711573124903.png

Is it possible to change the order of the text - picture allignment/order ONLY for the mobile version?

 

Thank you very much for help!

 

 

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2049 592 464

This is an accepted solution.

Add on this code as well, instructions are the same as shown above.

 

<style>
@media only screen and (max-width: 989px) {
div#block-id-text_cTabVM {
    margin-bottom: 0;
}

div#block-id-text_cTabVM > div > .subheading {
    margin-top: 40px;
}
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 7 (7)

ThePrimeWeb
Shopify Partner
2049 592 464

Hey @Delasoul,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    div#section-id-template--20779550966098__custom_row_qt6Cbw > div {
        flex-direction: column-reverse;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711577561955.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Delasoul
Excursionist
44 0 3

@ThePrimeWeb thank you very much, it worked. 

But do you know how I can get space between the picture and my subheader and also less space below the grey button? Right now it looks like this:

 

Delasoul_0-1711575163293.png

 

ThePrimeWeb
Shopify Partner
2049 592 464

This is an accepted solution.

Add on this code as well, instructions are the same as shown above.

 

<style>
@media only screen and (max-width: 989px) {
div#block-id-text_cTabVM {
    margin-bottom: 0;
}

div#block-id-text_cTabVM > div > .subheading {
    margin-top: 40px;
}
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Delasoul
Excursionist
44 0 3

Thank you, much appreciated!

Delasoul
Excursionist
44 0 3

Hi @ThePrimeWeb ,

 

sorry to bother you again but I have a problem again with my spacing on the mobile screen. Any chance you could help me out one last time? After the second picture there is too much space now: 

Delasoul_0-1712744993519.png

.... while the extra space is now missing here: 

 

Delasoul_1-1712745047691.png

Thank you so much for help!

ThePrimeWeb
Shopify Partner
2049 592 464

Hey @Delasoul,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    div#section-id-template--20779550966098__custom_row_qt6Cbw {
        margin-top: 0px !important;
    }
    
    div#section-id-template--20779550966098__custom_row_kdtj6y {
        margin-bottom: 10px;
    }
    
    #section-id-template--20779550966098__custom_row_qt6Cbw .subheading.subheading--over {
        margin-top: 10px !important;
    }
    
    div#section-id-template--20779550966098__custom_row_qt6Cbw .rimage-background-wrapper {
        margin-top: 30px !important;
    }
    
    div#section-id-template--20779550966098__custom_row_qt6Cbw {
        margin-bottom: 20px !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1712748943748.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Delasoul
Excursionist
44 0 3

thanks @ThePrimeWeb that worked with the spaces. Now the picture order is still wrong, for the very first part it works (first picture then header then text) but then it changes...  How can I change this for the other parts as well?

 

Delasoul_0-1712835558014.png