How to apply a code to made multicolumns 1:2 ratio? In Taste theme

[kimi1]

Hi all, I’m trying to adjust the column widths so that the right column takes up a little more than 2/3 of the section, and the left column stays at 23% width. Is there a code for this? I’m using Taste theme

I have a code I found on another forum but it still shifts the two slightly left and doesn’t take up the entire section width, and doesn’t show up well on mobile.

Thanks

[mageplaza-cs]

Hi @kimi1

I am from Mageplaza - Shopify solution expert.

Can you share the link to your website so I can assist you better?

Best regards!

[kimi1]

https://69d88d-2.myshopify.com/ password is “etrawn” @mageplaza-cs

I’m experimenting with it so there are 2 sections that look similar, one is the multicolumn and the one under it is an image + text section. I’m not leaning towards the latter but if I can’t solve the first code I will have to settle for the bottom

[mageplaza-cs]

@kimi1

Please replace it with my following CSS code in the Custom CSS section. It will resolve your issue on both desktop and mobile.

.multicolumn-list__item.grid__item{
    max-width: unset !important;
    width: unset !important;
}

.multicolumn-list__item.grid__item:nth-child(1){
    flex: 1;
}
.multicolumn-list__item.grid__item:nth-child(2){
    flex: 2;
}

@media only screen and (max-width: 768px){
    .multicolumn-list.contains-content-container{
        flex-direction: column !important;
    }
    .multicolumn-list__item.grid__item{
        max-width: unset !important;
        width: unset;
    }
    .multicolumn-list__item.grid__item:nth-child(1) .multicolumn-card.content-container{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .multicolumn-list__item.grid__item:nth-child(1) .multicolumn-card.content-container .multicolumn-card__image-wrapper{
        flex: 1;
        min-width: 100px;
    }
}

Please let me know if it works as expected!

Best regards

[kimi1]

Hi @mageplaza-cs

Thank you a lot for trying, I’ve been trying to figure this out for hours. Unfortunately my side has reached a word limit of 500 words? And the CSS you sent me is 800 words, is it possible in any way to shorten it? I’m also happy to just have it work on Desktop and tell my viewers to use PC whenever possible.

Thank you

[mageplaza-cs]

@kimi1

Instead of adding Custom CSS. You can add my css code to base.css file. It will also work effectively.

1. Click Themes > Edit code

2. Open the file assets/base.css

[kimi1]

@mageplaza-cs

it’s worked for the front page, thank you! But now it’s messing up other multicolumn sections on other pages - I don’t particularly mind the different widths here as it’s not too important, but one of the boxes is running off the screen

[mageplaza-cs]

@kimi1

To prevent the added CSS from affecting other pages unintentionally, I suggest the following methods:

->The idea is to add a CSS file specifically for the homepage.

1. Go to Online Store > Themes > Actions > Edit code.

2. Find the theme.liquid file.

3. Before the closing tag, add the following code:

{% if template.name == 'index' %}
  
{% endif %}

4. Save the file.

5. Create a new CSS file:

• In the Assets section, click Add a new asset.
• Select Create a blank file and name it custom-home.css.
• Add my CSS code into this CSS file.

Note: Please remove the old code in the base.css file.

[kimi1]

Hi @mageplaza-cs

I can’t seem to find the closing tag in the theme.liquid file, only one that says . I tried your instructions for this one since I couldn’t find the closing tag but it doesn’t seem to work

[kimi1]

nevermind! looked a bit harder and did some tweaking, finally found the closing tag and it worked. thank you so much for your help!