Squarewebsites Plugins

View Original

Mobile images zipper

Often we use alternate text/image and image/text layouts and it looks cool on desktops. But when you'll go to mobile, you probably want to see the image and its description under, not on the top.

So there some CSS ways to fix with flex-boxes or CSS Grids.  But I'm simple man, I do not like all your new shiny trendy stuff, we will use JS to find an alternate layout (where the image is under the text on mobiles/on the right hand on desktops) and just append columns in the right way.

I'm simple man, I do not like all your new shiny trendy stuff and frameworks

So here is the quick code snippet which works for 2 columns in one row (.sqs-row>2*.sqs-col-*)  and with Image block in one column structure.  Inserting on different pages or using different selectors, you may use it for pages you need.  Try to resize this page and check the code below.

Features Overview

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Sed a ligula quis sapien lacinia egestas. Donec eget risus diam. Vivamus sit amet semper lacus, in mollis libero. Mauris egestas at nibh nec finibus.

Feature 1

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Mauris egestas at nibh nec finibus. Fusce at massa nec sapien auctor gravida in in tellus. Donec ac fringilla turpis. Mauris id fermentum nulla. Aenean eu justo sed elit dignissim aliquam.


Feature 2

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Maecenas non leo laoreet, condimentum lorem nec, vulputate massa. Nulla eu pretium massa. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Maecenas non leo laoreet, condimentum lorem nec, vulputate massa.

And Some Table Here

CityPopulation, millionDensity, men/km2
New York8 537 6734 042 000
Los Angeles10 831 1003 198 000

Feature 3

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Nulla lectus ante, consequat et ex eget, feugiat tincidunt metus. Mauris id fermentum nulla. Integer tempus, elit in laoreet posuere, lectus neque blandit dui, et placerat urna diam mattis orci. In sit amet felis malesuada, feugiat purus eget, varius mi.

See this content in the original post