Keep Shopify buy buttons on same line in blog

Technical Q&A
1

Hi all,

  1. I am putting some Shopify shopping channel Buy Buttons into my blog (also written on Shopify).

How do I keep the buy buttons on the same line rather than stacked on top of each other like in the screenshot below?

fardamintlays_0-1669190446843.png
fardamintlays_0-1669190446843.png1147×826 60.8 KB

Many thanks

D

2

Hi @fardamintlays ,

Please send me the blog link, I will help you check it.

3

Thanks.

Preview link is here.

4

Hi @fardamintlays ,

Please go to buy button render product codes and add code here, it will work fine:

Screenshot.png
Screenshot.png1077×695 28.4 KB

Code:

"img": {
        "max-height": "210px"
      },

Hope it helps!

5

Thanks - it works fine on desktop but on mobile, it’s still staggered (see below). Any way I can change this?

fardamintlays_1-1669391503389.jpeg
fardamintlays_1-1669391503389.jpeg947×2048 152 KB

6

Hi @fardamintlays ,

Please send me the preview link, I will check it.

7

https://mintlays.com/blogs/inspiration/4-autumn-and-winter-housewarming-gift-ideas

Many thanks

8

Hi @fardamintlays ,

Please change code:

img": {
	"@media (max-width: 600px)": {
		"max-height": "130px"
	},
	"@media (min-width: 601px)": {
		"max-height": "210px"
	}
},

Hope it helps!

9

Did this work for you? Also, where did you implement the code? We can’t find the source shown above.