How do I change my text with image columns from 3 to 4 on desktop?

Store Design
,
1

Hi there, I’d like to change my “How To” steps from 3 columns to 4 on my text with image columns on landing page, I have tried following others steps I’ve found on the forum but to no use. Any Help is greatly appreciated!

My site is loyaldoggo.com and I’m using effortless theme.

Thank you

how to steps shopify.png
how to steps shopify.png1082×636 82 KB

2

The url you gave is wrong and needs to be re-given by you, I can provide the corresponding code to you!

3

What do you mean my url is incorrect? www.loyaldoggo.com here is my site but I don’t understand what you mean by resubmit the URL

4

Simonsron_0-1673577273031.png
Simonsron_0-1673577273031.png1920×912 212 KB

I see that the backend may be able to set a width for this piece, if not, please go to the code, find the code for this piece and change [is-4-desktop] to [is-3-desktop].

5

hello @Josh993

Can you fixed thi issue through css so please past this code

step 01:

  1. Go to your Store > Theme > click to edit code.
  2. in Assets folder open base.css file
  3. Add this code below at the bottom and click Save button
@media only screen and (min-width: 1025px){
.text-columns-with-images-section .column.is-4-desktop {
    flex: none;
    width: 25%;
}
}

this idea helps you

6

@Josh993
Put below css into base.css file (Online store ->Themes->Edit code->Assets->base.css)

@media (min-width:1025px)
{
.column.is-4-desktop.is-6-tablet.is-12-mobile.aos-init.aos-animate {
    width: 25% !important;
}
}

Ujjaval_0-1673585374987.png
Ujjaval_0-1673585374987.png1600×751 177 KB

7

Hi @Josh993

Please follow these steps:

Go to Admin => Online Store => Theme => Edit Code. Then, go to base.css file and insert the following CSS at the end of the file:

@media screen and (min-width: 1024px)
#template--14896617128019__1653687234763c51b0 .column.is-4-desktop {
    width: 25%;
}

I hope that it will work for you.

8

Worked right away! Thank you very much