Jump to content

Two text blocks on one line causing spacing and mobile issues

Go to solution Solved by DeathRobot,

Recommended Posts

I have three pages that show examples of work. At the top of each page, there is either one or two text blocks with text navigation links, below that a spacer block, and below that another text block. On the two pages with one text navigation link, the spacer is larger than on the page with two text navigation links:





I am using some CSS code on this page to reduce the height of the spacers, but even without that code the same issue occurs - both spaces are just larger but are still different sizes.

When I'm editing the pages, all the similar blocks on each page appear to match in height. It's only once I'm viewing as a webpage that the differences show up.

Also, on mobile, the text navigation is being split into two lines:



Looking for a way to address these two issues, or learn a better way to create the navigation links. Thanks.





Link to comment

By default, Text Block has top/bottom padding, here, Commercial page has bottom padding.



On Corporate Film Page, the padding disappear



There are some solutions to fix this

(1) Add padding to Corporate Film Page

(2) Remove padding bottom on Commercial Page

(3) Use Code Block to create this Navigation, I usually use this, I think it will will be faster more than use Text Block. But It will take some time to code it.

You can consider and let me know. I will give you code.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
Posted (edited)

Actually, poking around for info on your idea I was able to fix it with:


  <span style="float: left;"><a href="https://musicorange.com/commercials">&#60; COMMERCIALS</a></span> 
  <span style="float: right;"><a href="https://musicorange.com/other-work">OTHER WORK &#62;</a></span>
  <div style="clear:both;"></div>


Edited by DeathRobot
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.