cjp2380 Posted November 18, 2021 Share Posted November 18, 2021 Site URL: https://www.satya-consult.squarespace.com Hi I'm struggling to get a footer to stack the way it looks on desktop. My client has a very specific layout and I am trying to get it as close as possible. I've tried lots of different CSS but none are quite doing it! For the mobile view : He wants the 2 blocks of links side by side centered (with LI icon under the 2nd block). Then the Satya logo Then the 2 brand icon images (Esomar and MRS) And finally the Terms and Conditions etc at the bottom. Any help to create this very gratefully received!! Thanks website: www.satya-consult.squarespace.com Password: satya Link to comment
Beyondspace Posted November 18, 2021 Share Posted November 18, 2021 1 hour ago, cjp2380 said: Site URL: https://www.satya-consult.squarespace.com Hi I'm struggling to get a footer to stack the way it looks on desktop. My client has a very specific layout and I am trying to get it as close as possible. I've tried lots of different CSS but none are quite doing it! For the mobile view : He wants the 2 blocks of links side by side centered (with LI icon under the 2nd block). Then the Satya logo Then the 2 brand icon images (Esomar and MRS) And finally the Terms and Conditions etc at the bottom. Any help to create this very gratefully received!! Thanks website: www.satya-consult.squarespace.com Password: satya Hi, Try adding to Home > Design > Custom Css /*Footer arrange layout in mobile*/ @media only screen and (max-width: 767px) { section[data-section-id="61701175402a0f5783dd5f80"] .content > .sqs-layout > .row { display: flex; flex-direction: column; } section[data-section-id="61701175402a0f5783dd5f80"] .content > .sqs-layout > .row > .col > .row > .span-1{ display: flex; flex-direction: column; } section[data-section-id="61701175402a0f5783dd5f80"] .content > .sqs-layout > .row > .col:nth-child(2) { order: 3; } section[data-section-id="61701175402a0f5783dd5f80"] .content > .sqs-layout > .row > .col:nth-child(3) { order: 2; } } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Beyondspace Posted November 18, 2021 Share Posted November 18, 2021 My testing result Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
cjp2380 Posted November 19, 2021 Author Share Posted November 19, 2021 Thanks so much @bangank36. That's great. I've reduced the 2 logos Esomar and MRS - is there a way of moving them so they are next to each other on one line. Also is there a way of centering the whole footer? Appreciate your help! Link to comment
Beyondspace Posted November 19, 2021 Share Posted November 19, 2021 2 hours ago, cjp2380 said: Thanks so much @bangank36. That's great. I've reduced the 2 logos Esomar and MRS - is there a way of moving them so they are next to each other on one line. Also is there a way of centering the whole footer? Appreciate your help! Is it the result you intend to? tuanphan 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
cjp2380 Posted November 22, 2021 Author Share Posted November 22, 2021 On 11/19/2021 at 2:42 PM, bangank36 said: Is it the result you intend to? Hi @bangank36 Sorry I missed your last reply. I would like the Esomar logo sitting next to the MRS Evidence Matters Logo below the Satya logo. Is this possible? Link to comment
cjp2380 Posted November 22, 2021 Author Share Posted November 22, 2021 Sorry me again! I also wanted to know if it possible to center the 2 columns of link (including the LI link) ? Thanks Link to comment
cjp2380 Posted November 23, 2021 Author Share Posted November 23, 2021 (edited) Hi @tuanphan I'm having a problem finishing a footer to get the look a client wants. They ideally want everything centered. So the layout would be Column Column Satya Logo Esomar logo MRs Logo - they want these side by side Terms and Conditions etc links I've tried a few things but I can't center the 2 columns and I can't get the 2 smaller icons to sit on the same line. Can you offer any solutions? Any help gratefully received! Thanks website is: satya-consult.squarespace.com password: satya Edited November 23, 2021 by cjp2380 Link to comment
tuanphan Posted November 26, 2021 Share Posted November 26, 2021 On 11/23/2021 at 5:37 PM, cjp2380 said: Hi @tuanphan I'm having a problem finishing a footer to get the look a client wants. They ideally want everything centered. So the layout would be Column Column Satya Logo Esomar logo MRs Logo - they want these side by side Terms and Conditions etc links I've tried a few things but I can't center the 2 columns and I can't get the 2 smaller icons to sit on the same line. Can you offer any solutions? Any help gratefully received! Thanks website is: satya-consult.squarespace.com password: satya Hi It looks like you figured some things To make 2 icons same line, add this CSS /* Mobile footer icons side by side */ @media screen and (max-width:767px) { div#page-section-61701175402a0f5783dd5f80 .span-4 .row:nth-child(2) .span-1 { width: 30% !important; float: left !important; } div#page-section-61701175402a0f5783dd5f80 .span-4 .row:nth-child(2) .span-1 .image-block { width: 70%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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