Different order of section blocks in desktop and mobile

Different order of section blocks in desktop and mobile

Pedro_73
Shopify Partner
28 1 14

Hello there,

I would like to change the order of the section blocks so they have different positions in desktop and mobile.

Anyone has an idea ?

Thanks in advance.

Replies 3 (3)

Sheesh_b
Shopify Partner
514 113 117

Hi @Pedro_73 

Yes, we can do that by adding some sort of CSS but to check what sections you want to move on mobile in different place, I need the section mentioned with your website link.

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
Pedro_73
Shopify Partner
28 1 14

Thanks for your reply, 

To be more precise the 3 blocks are inside a display:grid. The structure is like this.

<div class="display-grid">

  {% for block in section.blocks %}

    <div class="grid-column">BLOCK MENU</div>

    <div class="grid-column {% if block.type = 'newsletter'% } display-none-mobile {% endif %}">BLOCK NEWSLETTER</div>

    <div class="grid-column">BLOCK MENU</div>

 {% endfor %}

</div>

 

I would prefer to dont create another block-newsletter for mobile. Just move the 2nd block to be the 1st in mobile, if it's achievable.

Sheesh_b
Shopify Partner
514 113 117

Hi @Pedro_73 

I just prefer the website url here please.

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION