Webflow site not working on external server

Design help General
1

Hello everyone,

I have a problem with a site that I made in webflow and was hoping someone could help perhaps.

I have exported my webflow site and uploaded it onto my server to test it. The site doesn’t display correctly now though.

Here is a link to the site working correctly:
kfz-winne.webflow.com/

And here is the site on my server not working correctly:
http://winterfoto.com/test/index.html

I was thinking it could perhaps be the php version of my server, but I tried all available versions in the server settings and it didn’t fix the problem.

Thanks very much in advance to everyone that takes the time looking into my problem!

Kindest regards,
Dennis

––––––––

EDIT: To sum up the core problem … the navi in this is link has 5 divs set to 20% width of the parent div but the last item gets pushed in the a second row when it is exported to my server (http://winterfoto.com/test3/index.html)

2

Hey!

  1. Change the last nav item size to 154px
  2. Those icons in bottom-right corner :: remove the width.

The whole website is built with Webflow, but there are few mistakes you have made during this process. Why didn’t you use the container object in Webflow?

1 Like
3

Hey! Thanks I’ll check out what you said I should change.

I didn’t use the container because I wanted to make a non responsive site , with a custom width and not being locked to 940 pixels.

4

So I applied what you said. It did fix the bottom bit where the opening times are and the navi is there too now (though the mouse over is a bit off now)

But there is still similar issues on the other pages of the site. I’m just wondering if there is a general problem. I mean the site works fine on the webflow server … but what is causing the site to be different on my server.

5

I managed to fix pretty much most of it except for the navi which is now having problems with the mouse over. But if I build something in webflow, isn’t it then supposed to come out the same when I put it on my server. I mean the construct is pretty solid in webflow and works in other browsers too if I open the webflow server url.

I have just tested another site I made and there I used containers and percentage values on the divs, and its still pushing the divs in the another row when I put it on my server, even though it works fine in webflow (http://winterfoto.com/test2/index.html) - if you scroll down to the 4 categories.

I’ll put the website version from the beginning up again so other people reading this can look at the initial problem.

Thanks for your help bartekkustra!

6

What I see in your projects is that you don’t understand the Box Model.

Let’s say you have an object width class awesome-box and you set following css properties:

.awesome-box {
  width: 300px;
  height: 300px;
  padding: 10px;
  margin: 10px;
  border: 10px solid #333;
}

As you can see I’ve set a width and height to 300px which should mean that the box will be of that size. While padding is INSIDE your box (it will reduce the size of text inside your box, but will not resize the box itself) leaving 280px width and height for your text, the border and unfortunatelly are outside of that box. That means that with 10px border your box is currently the size of 320px width and height.

Your elements have 235px which is quarter of the container width. You are using fixed pixel value to determine the 25% while you could have as well use the percentage value. Ok… Now, few of your objects inside the main object have the border property set to 1px. That means that each box will be 2px bigger. With 4 elements it’s already 8px over the container size.

On the other hand I’ve lowered the size of your boxes by 3 pixels and they fit well. That is not a type of behaviour I could’ve expected. I’d suggest @danro to take a look on your case. Please attach a public link here as well (best would be to the first post). Instructions are in the following link:

Good luck :)

1 Like
7

@bartekkustra, it’s funny that you mention a 3px space - it could be that @dennis makes use of inline-block elements, which have weird behavior when the HTML contains line breaks due to pretty formatting (as is the case with our exported code).

More info here: Fighting the Space Between Inline Block Elements | CSS-Tricks - CSS-Tricks

@dennis - can you see if the above applies to you? If it does, we might want to change our export behavior so that you have a choice to minify all the HTML to remove the spaces/tabs/linebreaks between inline-block elements.

1 Like
8

So I managed to fix my problems thanks to the both of you.

The last and most difficult was fixing the navi, but thanks to the link you gave me Vlad I managed to get that done too.
I just took the least difficult approach and made them to blocks and let them float to the left.

Thanks again that you both put so much effort into helping people. Really saved me some bad headaches.