Mobile layout issue

On my home page on desktop I have a grid of 9 tiles, 3 x 3 to direct visitors to different pages. I want to use the same grid on mobile, except organised vertically 1 x 9.

If I set the mobile layout to ‘automatically scaled’ it re-organises my grid for me but I then have an unusable header squashed from the desktop site which I can’t edit. But it I set mobile layout to ‘custom’ my grid gets totally messed up with the images and text for all the different tiles plastered all over the screen.

Obviously I would like my grid to reorganise nicely and to have a custom header with a hamburger when in mobile view. Is this possible?!

Yes very possible @MarcusJim!
It is definitely not a good idea to Automatically Scale the 320 mobile device. The 320 device needs to be Custom Layout which means you’ll need to manually move things around and resize images and text.

I would kill your 320 Device and go back to your desktop layout and start Group(ing) elements and then place them inside a Layout Block(s). This way it will be easier when it comes to manually refining the 320 device layout.

Thanks for this, I was hoping not to have to manually rearrange, because it’s a terrible mess when I switch to custom layout in mobile. Text and images all mixed up, all different sizes, everything all over the place (it’s already arranged in a layout grid, so not sure why that’s happened). Oh well, I’ll have to grit my teeth and do it!

Deleting and re-adding the 320 layout might reset things enough to help. Either way if you can send us the project ( we’d love to see if there’s something we can improve in Sparkle to make the mobile adaptation faster.

Thanks Duncan, in the end I made the page again from scratch and it works as it should now :slight_smile: