How can I adjust the promotion grid to 50% width on mobile view?

Store Design
1

hi,

anyone know how I can change so this promotion grid becomes 50% width and will stand on same line as on my desktop view?

Desktop view
Two last pictures are next to each other

ddcu_0-1695023115788.png
ddcu_0-1695023115788.png1492×948 360 KB

Mobile version
I would like the two bottom pictures aligned as above on desktop version (next to each other)

ddcu_1-1695023164395.png
ddcu_1-1695023164395.png350×811 373 KB

Url: https://mctasker.dk/
Using impulse theme

2

I hope you are looking for this

Jakman_0-1695024010787.png
Jakman_0-1695024010787.png430×492 190 KB

Add below code via custom css, you can get help from tutorial.

.flex-grid__item--50 {
    width: 50%;
    flex-basis: auto;
}

3

where is the css?

1 Like
4

HI @ddcu

This is David at SalesHunterThemes.

Thank you for your question.
Follow this path:

Themes => edit code => asset => theme.css

and add this code to bottom of the file theme.css

@media only screen and (max-width: 589px){
.promo-grid .flex-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.promo-grid .flex-grid .flex-grid__item {
    grid-column: span 2;
}
.promo-grid .flex-grid .flex-grid__item ~ .flex-grid__item {
    grid-column: span 1;
}
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

1 Like