Make three blocks in a row next to each other

Site URL: https://www.queenofsol.com/music

Hi!

I need some help making the three blocks that you can see on my music page, to appear in a row next to each other on mobile version. I also want these blocks to be smaller on laptop/computer version.

Can anyone help me with this? 🙂 

1 hour ago, SolveigTraeet said:

Site URL: https://www.queenofsol.com/music

Hi!

I need some help making the three blocks that you can see on my music page, to appear in a row next to each other on mobile version. I also want these blocks to be smaller on laptop/computer version.

Can anyone help me with this? 🙂 

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1610638258061_22611 + .row > .col {
    width: 33.33% !important;
    float: left !important;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing on mobile

@bangank36Thank you, it worked great! 🙂 

@bangank36 Can you help me make the three blocks smaller on computer version? they are too big. 

51 minutes ago, SolveigTraeet said:

@bangank36 Can you help me make the three blocks smaller on computer version? they are too big. 

Try 

#block-yui_3_17_2_1_1610638258061_22611 + .row {
  display: flex;
  justify-content: center; 
}

#block-yui_3_17_2_1_1610638258061_22611 + .row > .col {
  width: 30% !important;
}

Let me know how it works on your site

@bangank36 Thank you, that fixed it! 🙂