bsull Posted April 1, 2020 Share Posted April 1, 2020 Site URL: https://smilodon-lilac-yyrs.squarespace.com Hi, I am in need of some help to get modules stacking correctly on mobile. I am currently using an alternating module pattern on desktop - left (text) right (image) followed by left (image) right (text). With sqaurepace automatically stacking modules on the left above those on the right info the info does not display properly on mobile (i want to achieve text then image on all modules). I have tried the below css but have not had any luck. Note modules that need to stack correctly are on the 'See Inside' and 'About' pages. @media screen and (max-width:991px) { #page-section-5e8004c8799501307383fe45.sqs-row { display: -webkit-flex !important; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } } Any assistance is appreciated - note section ID in the above css is the "our programs" module on the 'See Inside' page. Link to comment
Unlikely_IT Posted April 1, 2020 Share Posted April 1, 2020 @bsull Please provide the specific link you're wanting to do this on. That would help. But actually I think you don't need any CSS. If you're just building this with text block and an image block sitting side by side, just make sure the Image block is floated to either the right or left of the image block. Then the image will always go to the top with a mobile layout. I've done this on the example site here. https://unlikelyit.com/testing If you don't know how to float a block on an text block, then just watch this video: Happy Building wishes from unlikely IT 🖥️ If you find this post helpful, please do share a thumbs up. Many thanks! Link to comment
HaleyWard Posted August 13, 2020 Share Posted August 13, 2020 Hi bsull, I'm using SS 7.1 and I had a hard time figuring out how to switch blocks on mobile too! For 7.1, the two blocks I needed to switch had to be in their own section. On my website's desktop view I have a "Well hello there" text section introducing me and my company on the left, and a photo of me on the right. Meaning, on mobile, the intro text came before the image; but I wanted my picture to display before the text – essentially swapping the block positions. Here's what worked for me: @media only screen and (max-width: 640px) { section[data-section-id="insertsectionIDnumberhere"] .sqs-row { display: -webkit-flex !important; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } } The section ID # should be a section solely dedicated to the elements you want switched. I hope this is helpful! johnbuedel, dubwebdev, sheriipop and 1 other 1 2 1 Link to comment
dubwebdev Posted September 9, 2020 Share Posted September 9, 2020 Thanks @HaleyWard - clutch answer on this one I spent the whole day working through my own and came very close to what you had but yours did the trick. Appreciate the help here! HaleyWard 1 Link to comment
RolandFuseHub Posted September 24, 2021 Share Posted September 24, 2021 On 8/13/2020 at 6:03 AM, HaleyWard said: Hi bsull, I'm using SS 7.1 and I had a hard time figuring out how to switch blocks on mobile too! For 7.1, the two blocks I needed to switch had to be in their own section. On my website's desktop view I have a "Well hello there" text section introducing me and my company on the left, and a photo of me on the right. Meaning, on mobile, the intro text came before the image; but I wanted my picture to display before the text – essentially swapping the block positions. Here's what worked for me: @media only screen and (max-width: 640px) { section[data-section-id="insertsectionIDnumberhere"] .sqs-row { display: -webkit-flex !important; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } } The section ID # should be a section solely dedicated to the elements you want switched. I hope this is helpful! THANK YOU! I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment