how can reduce column spacing? (dawn theme)?

10xfuel · ‎01-25-2024

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

thx!

ThePrimeWeb · ‎01-25-2024

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

<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 help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎01-25-2024

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 help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

10xfuel · ‎01-25-2024

thx - where exactly in the Custom CSS?

ThePrimeWeb · ‎01-25-2024

Hey @10xfuel,

On your sidebar Just paste the whole thing.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

10xfuel · ‎01-25-2024

thx! It's too long for this field:

ThePrimeWeb · ‎01-25-2024

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

<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?