image with text section - how to move text above image (instead of after) in mobile view?

Solved

image with text section - how to move text above image (instead of after) in mobile view?

will70
Tourist
10 0 2

Under my hero banner on my homepage ( my site is moonryvr.com , using Taiga theme) I have a "image with text" section inserted.

 

However, for just for mobile I would like to make a change so that the text appears first followed by the image - currently the image is first and the text is then underneath.

 

Is there a simple custom code I could add that would make just this specific image with text section reverse order for mobile view?

 

Thanks so much in advance for any help! Best, Will

Accepted Solution (1)
BSS-TekLabs
Shopify Expert
450 144 158

This is an accepted solution.

try this code 

@media only screen and (max-width: 767px) {
.grid.sm-grid-cols-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.col-sm-order-2 {
grid-row: 2;
}
}
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Hi @will70 

Do you mean like this? 

Made4uoRibe_0-1718988695894.png

The image will be automatically bigger. 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.grid.sm-grid-cols-2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
}
.col-sm-order-2 {
    grid-row: 2;
}

 

And save. 

Result for the mobile screen:

Made4uoRibe_1-1718988776387.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
will70
Tourist
10 0 2

Thank you so much! This has worked well for mobile

 

One more thing however - is it possible to add something to make this only apply to mobile? I liked the side by side style on the desktop previously and would love to keep that the same as before on desktop, and only make this new change to mobile if possible

BSS-TekLabs
Shopify Expert
450 144 158
@media only screen and (max-width: 767px) {
.media-with-text grid.grid-cols-1.sm-grid-cols-2.col-align-items-center.col-justify-items-center {
display: flex !important;

flex-direction: column-reverse !important;

}
}
 

You can add the above code snippet to a CSS file in your theme, for example, theme.css or base.css. Below is result:

BSSTekLabs_0-1718990106912.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
will70
Tourist
10 0 2

thank you for your reply - unfortunately that is not working, it just puts things back to how they were with the text under the image in mobile and the text and image side by side in desktop

 

I am trying to flip the text to above the image for mobile, but keep the text and image side by side in desktop

BSS-TekLabs
Shopify Expert
450 144 158

This is an accepted solution.

try this code 

@media only screen and (max-width: 767px) {
.grid.sm-grid-cols-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.col-sm-order-2 {
grid-row: 2;
}
}
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
will70
Tourist
10 0 2

that worked, awesome - thank you!

BSSCommerce-TA
Shopify Expert
123 24 24

Hi @will70 , you can paste the following css code into base.css, theme.css (I'm not sure which is the general css file of the Taiga theme, but usually it is one of these two files):

 

@media (max-width: 768px) {
  .media-with-text {
    display: flex;
    flex-direction: column;
  }

   .media-with-text .col-sm-order-2 {
        order: 2; 
    }

   .media-with-text .p-page {
        order: 1;
    }
}

 

 

 
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Almost same of my answer. But I change the desktop. if it only changing the text this is the only code you need. 

@media only screen and (max-width: 749px){
.col-sm-order-2 {
    grid-row: 2;
}
}

Assign the row (image on the 2nd) I didnt read it right. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.