bgraphicdesign Posted November 1, 2022 Share Posted November 1, 2022 (edited) Hi - I'm having trouble styling sections & blocks. I've inserted code to do two things: 1. reverse the display order on mobile (using section id) 2. split the text into 2 columns on desktop/laptop (using block id). The site is https://spinach-crow-ktsp.squarespace.com/publications-speaking I've inserted this code for the "Publications" section of the page: @media screen and (max-width:767px){ section[data-section-id="635c34bedeb2fd442065ab8f"]{ .sqs-row{ display: flex !important; flex-direction: column-reverse !important; } }} #block-yui_3_17_2_1_1666977167775_361208{ @media screen and (min-width: 768px){ -webkit-column-count: 2 !important; -moz-column-count: 2 !important; column-count: 2 !important; -webkit-column-gap: 60px !important; -moz-column-gap: 60px !important; column-gap: 60px !important; }} but it doesn't work (I've checked in Chrome / FF / Safari on Mac desktop, and Safari on iOS). Any ideas are greatly appreciated, as from what I can tell the code and block/section ids seem correct. Site is password-protected with password kralowec. Thanks! Edited November 1, 2022 by bgraphicdesign add page URL Link to comment
Ziggy Posted November 1, 2022 Share Posted November 1, 2022 Can you share your website URL and the page that this is happening on? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
bgraphicdesign Posted November 1, 2022 Author Share Posted November 1, 2022 Yes, sorry. https://spinach-crow-ktsp.squarespace.com/publications-speaking Link to comment
Ziggy Posted November 1, 2022 Share Posted November 1, 2022 And the password? Thanks! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted November 1, 2022 Share Posted November 1, 2022 Here's some revised code for columns: @media screen and (min-width: 768px) { #block-yui_3_17_2_1_1666977167775_361208 .sqs-block-content { -webkit-column-count: 2 !important; -moz-column-count: 2 !important; column-count: 2 !important; -webkit-column-gap: 60px !important; -moz-column-gap: 60px !important; column-gap: 60px !important; } } What are you wanting to reverse the order of? The sections, so Speaking goes above Publications? bgraphicdesign 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
bgraphicdesign Posted November 1, 2022 Author Share Posted November 1, 2022 Thanks! That 2-column code does the trick. Re: the other item, in mobile view the word "Publications" appears after the bullet list; I want it to appear before the bullet list as it does on desktop. Link to comment
Ziggy Posted November 1, 2022 Share Posted November 1, 2022 Fantastic glad that's working. If you want Publications above the text then you just need to get rid of the CSS that is swapping the order, easy! Delete this: @media screen and (max-width:767px){ section[data-section-id="635c34bedeb2fd442065ab8f"]{ .sqs-row{ display: flex !important; flex-direction: column-reverse !important; } }} Can you mark my post as the solution and give me a thumbs up? bgraphicdesign 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
bgraphicdesign Posted November 1, 2022 Author Share Posted November 1, 2022 I added that code to try to fix the problem; it didn't work. I've removed the code but I'm stuck with the same issue: "Publications" appears after the list of bullet points. Link to comment
bgraphicdesign Posted November 1, 2022 Author Share Posted November 1, 2022 (edited) Duh. I think all I have to do is edit in Mobile view to change the order. That's easy. Thanks for your help on the 2-column issue! Edited November 1, 2022 by bgraphicdesign Link to comment
Ziggy Posted November 1, 2022 Share Posted November 1, 2022 Yes, if you're using the Fluid Engine, you must edit the mobile layout every time you make a change or addition to the page. I don't know why Squarespace don't do better at telling users this. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? 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