Any tips for getting blocks of code to appear side by side in mobile view?

Site URL: https://amalfimedia.com/binge-test/3qf81s6jhgfr6aswexviakq9yyhe96-sg6rx-fyacd

Hello all!

So I have 4 "listen on" badges at the top of my blog for things apple podcasts, spotify, stitcher, and google podcasts. I've attached how they look on desktop and how they look on mobile. They are code element. Does anyone know how I can make the badges on mobile stack the same way they do on desktop? I'd like for Apple pod & spotify to be next to each other; google pod and stitcher next to each other. On mobile they all stack on top of each other.

Thanks for the help! 

16 hours ago, TheNattyD said:

Site URL: https://amalfimedia.com/binge-test/3qf81s6jhgfr6aswexviakq9yyhe96-sg6rx-fyacd

Hello all!

So I have 4 "listen on" badges at the top of my blog for things apple podcasts, spotify, stitcher, and google podcasts. I've attached how they look on desktop and how they look on mobile. They are code element. Does anyone know how I can make the badges on mobile stack the same way they do on desktop? I'd like for Apple pod & spotify to be next to each other; google pod and stitcher next to each other. On mobile they all stack on top of each other.

Thanks for the help! 

Use this css

@media only screen and (max-width: 600px) {
      #block-8fa1184a2f92463bd584 + .row .span-2,
      #block-8fa1184a2f92463bd584 + .row .span-10{
         width: 50% !important;
        float: left !important;
      }
      #block-8fa1184a2f92463bd584 + .row + .row .span-2,
      #block-8fa1184a2f92463bd584 + .row + .row .span-10{
         width: 50% !important;
        float: left !important;
      }
}


@media only screen and (min-width: 600px) and (max-width: 768px) {
      #block-8fa1184a2f92463bd584 + .row .span-2,
      #block-8fa1184a2f92463bd584 + .row .span-10{
         width: 30% !important;
        float: left !important;
      }
      #block-8fa1184a2f92463bd584 + .row + .row .span-2,
      #block-8fa1184a2f92463bd584 + .row + .row .span-10{
         width: 30% !important;
        float: left !important;
      }
}

6 hours ago, bangank36 said:

Use this css

@media only screen and (max-width: 600px) {
      #block-8fa1184a2f92463bd584 + .row .span-2,
      #block-8fa1184a2f92463bd584 + .row .span-10{
         width: 50% !important;
        float: left !important;
      }
      #block-8fa1184a2f92463bd584 + .row + .row .span-2,
      #block-8fa1184a2f92463bd584 + .row + .row .span-10{
         width: 50% !important;
        float: left !important;
      }
}


@media only screen and (min-width: 600px) and (max-width: 768px) {
      #block-8fa1184a2f92463bd584 + .row .span-2,
      #block-8fa1184a2f92463bd584 + .row .span-10{
         width: 30% !important;
        float: left !important;
      }
      #block-8fa1184a2f92463bd584 + .row + .row .span-2,
      #block-8fa1184a2f92463bd584 + .row + .row .span-10{
         width: 30% !important;
        float: left !important;
      }
}

You are amazing! Follow up question, if I did this for 100+ blog posts would it dramatically slow down my website? I know how to customize the code for each blog post but I also don't want to jeopardize the user loading experience. Thanks so much for a solution 🙂

2 minutes ago, TheNattyD said:

You are amazing! Follow up question, if I did this for 100+ blog posts would it dramatically slow down my website? I know how to customize the code for each blog post but I also don't want to jeopardize the user loading experience. Thanks so much for a solution 🙂

If you x100 this snippet it may add ~100kb to the site, i dont think it effect that much. But if you are after the most effective way, then javascript may need to be used