Fix banner item spacing on tablet view

Hello,

Could someone help me fix the spacing for the banner so the mobile phone number isn’t getting squished and so there is spacing before the Facebook icon? I’ve provided an image below as a reference. Thank you!


Here is my site Read-Only: [LINK](Webflow - PHD Veterinary Services)
(how to share your site Read-Only link)

hi @Dbisbee first thing I will recommend is to stop using text columns for web design. Their main purpose is to split long text to columns like in newspaper, that is why they are called text columns. There was a time in ancient era of internet (approx 2008) where websites were not responsive and were created with HTML tables.

If you will using “text columns” you will be always in trouble with responsiveness. These days we have several years Flex and lately was added Grid. Your call. :man_shrugging:

Now back to your request, WF UI has very limited options and you can do almost nothing without custom code . Here is single line of CSS that prevent text wrap.

<style>
.nav-call-text{
   white-space: nowrap;
}
</style>

If you will change nav to Flex anyone can help you with spacing but at the time is not worth because of text columns

1 Like

Thanks Stan, I can update it. It was a component I used from a clonable made in webflow project.