jwncreative Posted May 21, 2022 Share Posted May 21, 2022 (edited) Site URL: https://dachshund-point-4lc2.squarespace.com Hey all, I'm struggling a bit with my footer -- looks great on desktop, but once the navigation starts to break for smaller screens, it doesn't seem to center or stack in a way that makes sense. I've tried removing my custom css bit by bit to see if I can target what specifically is making this happen, but no luck. Edited May 21, 2022 by jwncreative Better screenshot Link to comment
Solution creedon Posted May 21, 2022 Solution Share Posted May 21, 2022 The issue is that the HTML SS generates for the text block is the following. <p style="text-align:center;white-space:pre-wrap;" class=""><a href="/home">HOME</a> <a href="/autos">AUTOMOBILES</a> <a href="/news">NEWS</a> <a href="/#services">SERVICES</a> <a href="/contact">CONTACT</a> <a href="/about-brine">ABOUT</a></p> The white-space property has the value pre-wrap which means preserve the white space when wrapping. So you'll need something like the following to stop white space preservation. #block-yui_3_17_2_1_1649176964557_3402 p { white-space : unset !important; } You may want to wrap in a media query or even control the space between items yourself. Let us know how it goes. jwncreative 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
jwncreative Posted May 23, 2022 Author Share Posted May 23, 2022 That certainly solved the issue but I think you were right to keep pushing it and I instead decided to have the navigation stack on mobile. I wouldn't have come to that solution without your help, so thank you! creedon 1 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