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

Store Design
,
1

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

1 Like
2

Hi @will70

Do you mean like this?

Made4uoRibe_0-1718988695894.png
Made4uoRibe_0-1718988695894.png1000×772 483 KB

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
Made4uoRibe_1-1718988776387.png417×803 292 KB

1 Like
3

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

4

@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
BSSTekLabs_0-1718990106912.png660×540 103 KB

5

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

6

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;
}

}

1 Like
7

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;
    }
}
1 Like
8

that worked, awesome - thank you!

9

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.