Solved

how can reduce column spacing? (dawn theme)?

10xfuel
Pathfinder
127 0 12

Hi! How can I reduce on www.10xfuel.com the spacing of these two column images?

10xfuel_0-1706183459522.png

thx!

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1002 259 204

This is an accepted solution.

I see

Then try and do this,

In your theme go to "Edit Code" and search for theme.liquid, then right below the tag that says "<head>", paste the following code

ThePrimeWeb_1-1706193049252.png

 

ThePrimeWeb_0-1706192960099.png

 

<style>
li:first-child .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--half-width.multicolumn-card-spacing {
    margin-right: 30px;
}

li:last-child .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--half-width.multicolumn-card-spacing {
    margin-left: 30px;
}

li:first-child .multicolumn-card .multicolumn-card__info {
    text-align: right;
    margin-right: 30px;
    transform: translateX(-17%)
}

li:last-child .multicolumn-card .multicolumn-card__info {
    text-align: left;
    margin-left: 30px;
    transform: translateX(13%)
}

@media only screen and (max-width: 992px) {
    li:first-child .multicolumn-card .multicolumn-card__info {
        transform: translateX(-10%)
    }

    li:last-child .multicolumn-card .multicolumn-card__info {
        transform: translateX(15%);
        margin-left: 0;
    }


}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need a developer? Contact me here

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
1002 259 204

Hey @10xfuel,

Please paste this into the Custom CSS

li:first-child .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--half-width.multicolumn-card-spacing {
    margin-right: 30px;
}

li:last-child .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--half-width.multicolumn-card-spacing {
    margin-left: 30px;
}

li:first-child .multicolumn-card .multicolumn-card__info {
    text-align: right;
    margin-right: 30px;
    transform: translateX(-17%)
}

li:last-child .multicolumn-card .multicolumn-card__info {
    text-align: left;
    margin-left: 30px;
    transform: translateX(13%)
}


@media only screen and (max-width: 992px) {
    li:first-child .multicolumn-card .multicolumn-card__info {
        transform: translateX(-10%)
    }

    li:last-child .multicolumn-card .multicolumn-card__info {
        transform: translateX(15%);
        margin-left: 0;
    }


}
Was I helpful?

Buy me a coffee

🙂

Need a developer? Contact me here
10xfuel
Pathfinder
127 0 12

thx - where exactly in the Custom CSS?

ThePrimeWeb
Shopify Partner
1002 259 204

Hey @10xfuel,

On your sidebar Just paste the whole thing.

ThePrimeWeb_0-1706192057155.png

 

Was I helpful?

Buy me a coffee

🙂

Need a developer? Contact me here
10xfuel
Pathfinder
127 0 12

thx! It's too long for this field:

10xfuel_0-1706192763773.png

 

ThePrimeWeb
Shopify Partner
1002 259 204

This is an accepted solution.

I see

Then try and do this,

In your theme go to "Edit Code" and search for theme.liquid, then right below the tag that says "<head>", paste the following code

ThePrimeWeb_1-1706193049252.png

 

ThePrimeWeb_0-1706192960099.png

 

<style>
li:first-child .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--half-width.multicolumn-card-spacing {
    margin-right: 30px;
}

li:last-child .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--half-width.multicolumn-card-spacing {
    margin-left: 30px;
}

li:first-child .multicolumn-card .multicolumn-card__info {
    text-align: right;
    margin-right: 30px;
    transform: translateX(-17%)
}

li:last-child .multicolumn-card .multicolumn-card__info {
    text-align: left;
    margin-left: 30px;
    transform: translateX(13%)
}

@media only screen and (max-width: 992px) {
    li:first-child .multicolumn-card .multicolumn-card__info {
        transform: translateX(-10%)
    }

    li:last-child .multicolumn-card .multicolumn-card__info {
        transform: translateX(15%);
        margin-left: 0;
    }


}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need a developer? Contact me here
10xfuel
Pathfinder
127 0 12