Jason Schwartz Posted April 6, 2017 Share Posted April 6, 2017 I have a section on our home page labeled "Quick Links" and there are five Links stacked on top of each other. I wanted to tighten up the space so there wasn't as much null space around each link. Is there a way to change the pitch between links? Link to comment Share on other sites More sharing options...
Gary Wipperman Posted May 11, 2017 Share Posted May 11, 2017 Great question and would love to know this as well. It would be also handy for the space between titles and text elements. Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted May 16, 2017 Share Posted May 16, 2017 I think this is probably do-able, but since each link comes in as a separate page element, this becomes pretty tricky. Each page element would have to be identified in the page's code, and then the spacing between those specific page elements would have to be manipulated. Well above my skill level, but I'm curious if anyone has a solution for this as well. Link to comment Share on other sites More sharing options...
kpetersatl Posted June 6, 2017 Share Posted June 6, 2017 In case you haven't managed a solution for this yet... To reduce the invisible/blank/white space between each link, modify the top and bottom margins of the containing div element (currently at 15px). <style> .pageElement.linkElement { margin: 10px 0px; } </style> Or <style> .pageElement.linkElement { margin: 10px 0px 10px 0px; } </style> Or <style> .pageElement.linkElement { margin-top: 10px; margin-bottom: 10px; } </style> If you're referring to the orange color, you'll want to modify the padding of the a element (though doing so will just create even more white space between links). <style> .linkElement h4 a { padding-top: 5px; padding-bottom: 5px; } </style> The modified styling will most likely be applied to any other Link page element, though there are currently no others that I could see. If that's a problem there are ways around it (specifying parent containers, etc.), but this was the easiest/simplest fix I could come up with given the example. Link to comment Share on other sites More sharing options...
docnzok Posted June 13, 2017 Share Posted June 13, 2017 Excellent work kpetersatl. I would add the following. If you add the style code to the cascading <head> code option (in page options) you will apply that style to that and every page underneath it in the menu system. If you only want to apply it to a single page, use the section above that called Single Page <head> Code So if you see something in the pages under that page, try just modifying the head code for that page and see if it fixes it. Otherwise kpetersatl's CSS code is great and works! Let either one of us know if we can help further. Mark Link to comment Share on other sites More sharing options...
Jason Schwartz Posted June 13, 2017 Author Share Posted June 13, 2017 I tried all of the code snippets above by copying and pasting into the Single Page <HEAD> Code section. Unfortunately none appeared to modify the space surrounding the LINK elements I have that are stacked on each other. I can only guess something else is overriding this code. Best guess is there is padding around all elements which is global to the site and won't allow specific elements to be modified. The pitch between the links appears consistent between all elements on the page. Any other suggestions? ______________________________ 6/20/17 OK Forget everything above this line... I came back to it and tried it again and it works! kpetersatl you're a genius! I'm trying to work on some other minor tweaks on the two sites I manage and using this post as a template. I owe you a drink! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.