Order of blocks changing with different screen sizes

3 replies · opened May 16, 2022

EedsadesignsMay 16, 2022

Hello again - have loved working with this great versatile Canvas theme but maybe you could assist me with a problem I seem to be experiencing.

Please see https://blocktaunton.co.uk/ - You can see I am utilising some nice flip boxes and fades on various blocks here. When I shorten the screensize, some of the boxes jump out of their original order which takes away from user experience - for example the orange box that says 'Register your interest' should immediately follow the black box that reads Enjoy co-working or private .......etc. As soon as I take the width to under 1200px it changes order.... Any advice?

SSemicolon WebSTAFFMay 17, 2022

Hello,

Thanks for the Kind Words! :)

Consider trying to add the data-layout="fitRows" on the .grid-container DIV first which will make sure that the Items are aligned according to their Order and not by Masonry which sometimes causes issues when resizing the Page.

Please consider trying this first and let us know if you are still facing any further issues.

SSemicolon WebSTAFFMay 17, 2022

Hello,

Thanks for the update.

So, yes, as we had mentioned since you are using the Masonry Layout, the Order of the Items cannot be controlled in this case as the primary functionality of a Masonry Layout is to align the items based on the available space to the next item in the grid. Thus either you will need to adjust the Size of the Items or you will need to create another grid for Mobile Devices and hide the other grid accordingly. This is not just an issue with Canvas but will work the same with all other Masonry Plugins due to the nature of this functionality.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard