multicolumn align text and image side by side refresh theme

[skjoldet]

I would like to put the images and text side by side in the multicolumn section. Normally they stack on top of each other but I would like the image in the box and the text to be side by side on both desktop and mobile view. How do I do that?

[namphan]

Hi @skjoldet,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.multicolumn-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.multicolumn-card__image-wrapper {
    flex: 1 0 30%;
}

[skjoldet]

Thank you, it worked. Now i have a new problem of the image placement, as it is not in the middle of the column. It touches the button of the frame. How do I fix that?

And if I only want the side by side image on desktop, what do I write?

[namphan]

Hi @skjoldet,

Please change code:

.multicolumn-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.multicolumn-card__image-wrapper {
    flex: 1 0 30%;
}

[skjoldet]

Thank you that worked! What if I only want the above code to work for a desktop, what should I write?

[namphan]

Hi @skjoldet,

Please change code:

@media screen and (min-width: 750px) {
.multicolumn-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.multicolumn-card__image-wrapper {
    flex: 1 0 30%;
}
}