Solved

'Text column with images' 4 columns in 1 row

MM93
Tourist
12 0 1

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 ! 

Obraz 26.02.2024, godz. 20.51.jpg

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

Accepted Solutions (2)
techlyser_web
Shopify Partner
1609 299 322

This is an 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>

techlyser_web_0-1709029275725.png

 

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

techlyser_web
Shopify Partner
1609 299 322

This is an 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 11 (11)

techlyser_web
Shopify Partner
1609 299 322

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>

techlyser_web_0-1709023693446.png

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MM93
Tourist
12 0 1

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

Obraz 27.02.2024, godz. 09.54.jpg

 (2 rows, not centered at mobile)

Best regards
Mikołaj

techlyser_web
Shopify Partner
1609 299 322

when I do this in mobile view its look like this

techlyser_web_0-1709024676407.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MM93
Tourist
12 0 1

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

Zrzut ekranu 2024-02-27 o 10.18.33.png


Best regards!

techlyser_web
Shopify Partner
1609 299 322

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>

techlyser_web_0-1709025910258.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MM93
Tourist
12 0 1

Now I can see this on mobile:

Zrzut ekranu 2024-02-27 o 10.59.23.png

 sorry if do something wrong :<

techlyser_web
Shopify Partner
1609 299 322

This is an 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>

techlyser_web_0-1709029275725.png

 

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MM93
Tourist
12 0 1

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

techlyser_web
Shopify Partner
1609 299 322

This is an 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MM93
Tourist
12 0 1

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

techlyser_web
Shopify Partner
1609 299 322

welcome @MM93 😁

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com