How can I freely move elements within my theme?

[aaronvelasquez]

Hello dear community,

I'm having some issues with moving elements within my Shopify theme and I wanted to know how to fix it.

this. So I put them in context:

1. "Icons with text": Within the homepage of my website, I have a block called "Icons with text" which, as its name indicates, shows icons with text. In its desktop version, all elements (4) are displayed linearly next to each other, and in the version for mobile devices they are displayed one below the other. The intention is that in the mobile version, not a single column is displayed, but two (I have left a reference image as well), with 2 icons on one side and 2 icons on the other.

Desktop Version (This is perfect, nothing to change)

Mobile version (This is what we want to change)

(This is how we want it to look on our website)

2. Badge "offers": On the other hand, in the section of each product of our store, we have added "badges". These badges fulfill a solely visual function, the problem is that, when adding more than one, they are grouped next to each other, creating rows of 3 columns. I want to find a way that these badges can be seen one below the other, if I try to place them as different blocks, the amount of space between one badge and another is abysmal. I am going to show the problem and the expected result:

(This is what we have in the store)

(This is how we want to have it)

Thank you in advance for your help. All the best.

[Ole_]

Can you tell us your website domain? Then I can look into your source code and can probably give you an exact code to edit.

It seems to me like the elements are placed in a flex-box and you just have to change the width of the icons from 100% to 50% or reduce the min-width.