Shopify themes, liquid, logos, and UX
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)
Solved! Go to the solution
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
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.
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.
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
when I do this in mobile view its look like this
I reduced text from columns and now I can see this:
Best regards!
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.
Now I can see this on mobile:
sorry if do something wrong :<
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
The code is impacting to other sizes of products and grids on the homepage.
Best regards!
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.
It's working! Thanks for your help and time.
Best regards!
welcome @MM93 😁
I tried this on my Showcase theme but I want to add 5 columns in one row to the Text Columns with Images on my home page. I can't get this to work when I try editing "text columns with image" in my theme editor. Could you help me? thank you
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025