'Text column with images' 4 columns in 1 row

[MM93]

Dear Community,

I want to change the view of 'Text Columns With Images' element.
I'm interested to create 4 columns in a 1 row (for a mobile and desktop).
My store is rehaclub.pl (case in home page section, screen below).
I will be grateful for any help ! 

 (now it 2 columns in a row, need to be 4 on all devices)

[niraj_patel · Accepted solution]

Replace the code with below code

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px){
   .grid__item.large--three-twelfths.medium--six-twelfths {
        width: 25% !important;
    }
    .medium--six-twelfths h3.h4 {
       font-size: 11px !important;
     }

     .grid__item {
          flex: 0 0 25% !important;
      }
 }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[niraj_patel]

Hello @MM93 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 1199px){
    .medium--six-twelfths {
       flex: 0 0 25%;
     }
     .large--three-twelfths .rte p {
         font-size: 15px;
     }
 }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

I'm not able to find this section in tablet and mobile view.

[MM93]

Many thanks for your time and help!
For now, after pasting the code, I have an mobile issue, looking like this:

 (2 rows, not centered at mobile)

Best regards
Mikołaj

[niraj_patel]

when I do this in mobile view its look like this

[MM93]

I reduced text from columns and now I can see this:

 
Best regards!

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px){
   .grid__item.large--three-twelfths.medium--six-twelfths {
        width: 25% !important;
    }
    .medium--six-twelfths h3.h4 {
       font-size: 11px !important;
     }
 }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[MM93]

Now I can see this on mobile:

 sorry if do something wrong :<

[niraj_patel · Accepted solution]

Replace the code with below code

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px){
   .grid__item.large--three-twelfths.medium--six-twelfths {
        width: 25% !important;
    }
    .medium--six-twelfths h3.h4 {
       font-size: 11px !important;
     }

     .grid__item {
          flex: 0 0 25% !important;
      }
 }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[MM93]

The code is impacting to other sizes of products and grids on the homepage.
Best regards!

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px){
  .grid__item.large--three-twelfths.medium--six-twelfths {
         width: 25% !important;
   }
   .medium--six-twelfths h3.h4 {
         font-size: 11px !important;
   }
   .grid__item.large--three-twelfths.medium--six-twelfths {
        flex: 0 0 25% !important;
    }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[MM93]

It's working! Thanks for your help and time. 
Best regards!

[niraj_patel]

welcome @MM93 😁