Tabs Issue on live website

Hi

My website displays great in webflow and is fully responsive, however on the “live” site the right hand TAB of four is being pushed down under the first tab on the left.

I have know idea why, any thoughts anyone

regards

Paul

Here is the live site page


Here is my public share link: LINK
(how to access public share link)

Float the tabs left will resolve this issue :slight_smile:

Hi Sveky

Thanks for the reply

I tried this and it made great sense!

It was not however, mentioned in the video tutorials!

However, it still did not correct the issue

Also on the Webflow hosted site everything also looks great!

Hosted on Webflow!

Any other ideas?

Thanks so much

Paul

Hi quittoo, looks fine here. I cant see how hosting it anywhere else will result in the page rendering differently unless it’s cached on the other server ?

Hi Sveky

Where are you looking at that? On Webflow?

It looks fine on Webflow that is why it is difficult to find the error!

But on 2 websites I have placed the exported code it looks like it does here

Hosted on A2 Hosting clean install

Thanks again

Paul

I See weird isn’t it. I removed the 1% margin from your PROSPECTING tab and that fixed the issue.

Sveky

I appreciate your input… but is working when hosted on webflow!

It is when I export and host on another server that things go wrong!

I will try removing the 1% now and re uploading

Let see what happens

Paul

I had another look and the tabs are not floated left. Float them left like below. (leave the margin of 1% right)

Cheers
Sveky

I am working in the designer now.

I tried floating left …did not work
I think they may be an extra 1% that is forcing the last tab to push left

In the tutorial videos they did not use float left…

I will update shortly

Paul

No Problem, make sure you leave them floated left btw.

Well this is so strange

All the tabs are correct. If you align left then the order of the tabs changes!

Not what I want.

The site is perfect and working fine in Webflow and hosted on Webflow.

When I export I get the Tab Issue.

I have even tried on a second server… same issue

Baffled!!

Paul

P.S Screenshots below

Webflow

Live Site

I think its still a floating issue. I opened the public link and none of the tabs were floated left (unless its an old build). Also just a thought make sure you get the green saving tick before exporting the code.

Might be worthwhile making them again and having all the classes sorted before making any child classes.

Hi @quittoo, this is most often caused by having classes assigned with inline block styling, and having the float set to off.

I would check this article, it may help with the exported site: Display settings | Webflow University

I would check that next, and see if that helps to correct the issue. If not, let me know.

Hi @cyberdave

Thanks for the information

I will look at this, however I made this section simply by copying the Tutorial!

I do not know where there may be inline block… I did not add them!

However, it is part of the learning curve I guess

I will take a look a the design again, although I am not that sure of where to look!

Thanks

Paul

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.