BIG PROBLEM & BIG QUESTIONS - Exported site code is full of problems & CSS generally has gone haywire

Design help General
1

Hi, I’m doing a major site build of what was a quite popular website back in the day (at one point was number-1 Alexa ranked Uk site in ‘music genre’ for visits)

The site is to be exported to my server.

The main 12 product sections/history/information pages are hard coded and will be static.

Other pages are to work as templates and will load content (image, title, text etc) into the various sections & containers etc from database

==============

VERSION-1
The first version of the site I exported some months ago to test server database integration. Every test I did was good, everything worked on export 100%, so I resumed adding fine tweaks in the webflow editor.
ONLY small changes were made at this point & i simply fine-tuned the layout at the different sizes down from default desktop

=============

VERSION-2
Finished the fine tweaks & Exported again recently & everything is now nuts!!

Everything looks good in the webflow editor, but exported code is COMPLETELY different:

Things look different, in some cases critical and in others subtle.

I went in and studied the CSS file and it’s full of multiple entries for the same classes, it’s a complete mess!

For example, you drill down the CSS file & see a class for a DIV or CONTAINER object or whatever, and for example it has padding values… the object looks wrong on page… drill further down the CSS file and you find the same class repeated multiple times with different padding values (and other values) which are wrong & overriding the previous class statement in the CSS

=============

SUMMARY:

THE SITE LOOKS FINE IN THE EDITOR PREVIEW, BUT WHEN VIEWED DIRECTLY FROM THE DOWNLOAD PACKAGE:

THE WIDTH OF THE SITE IS COMPLETELY WRONG… it’s much wider so containers & divs and their content images looked stretched

RE-SIZING IS MESSED UP COMPLETELY

CSS is being added to objects that IS simply NOT present in the editor version before export!

ALL CONCERTINA EFFECTS (on 2 pages, critical to the navigation design) DO NOT WORK AT ALL
But ALL concertina effects work on the main menu-bar.

GRID boxes display different FR widths

etc

What has caused this?

The only thing I did besides tweaks was: I copied the entire project a couple of times to try variations on the design of things. I made a copy first so that if i made design changes & decided they would not work I could always go back to the original version.

Now everything is messed up with ALL versions!!!.. It’s as if Webflow has got all the CSS & JS files mixed up from the different versions I copied & has merged all the css etc together from all copies (maybe?).

I AM IN SERIOUS SERIOUS DEADLINE PROBLEMS NOW AND NEED HELP PLEASE

Some of the problems I can fix by going through the CSS, but other issues I cannot for the life of me see what the problem is:

can anyone help please?

btw. if you view the READ-ONLY version linked below there’s a bug. The hamburger menu doesn’t respond UNLESS you first click the site header branding image at the top-left to reload the home page, after that the hamburger menu works.
(This is only a bug in the preview, not exported version)

anyone ??
cheers
matt

Here is my site Read-Only: [LINK](https://preview.webflow.com/preview/dancetech-cca62dd1fef55e499447dc7745acc?utm_medium=preview_link&utm_source=designer&utm_content=dancetech-cca62dd1fef55e499447dc7745acc&preview=808bd11be7bdcf9644fb26f645c26211&workflow=preview)
(how to share your site Read-Only link)

2

hi again,

well in case anyone’s interested i figured out the problem (hopefully) - i was panicking tbh when i posted a few hours ago after 2 days of trying to figure it out I finally think I have

it’s that FINSWEET plugin! grrr! :angry:

6 months ago or so I added the 3 larger breakpoints, messed around with making the site wider & afterwards I thought the site was too wide and I used FINSWEET to get rid of them.

what happens is, FINSWEET gets rid of the extra breakpoints in the editor but leaves behind all the CSS code!

After posting my initial problem I made another copy of the site, went into it and re-added the 3 larger breakpoints & hey presto, there was all the css settings left behind but still functioning!! & those CSS styles had been carried over - invisibly - on every single copy of the site I made since that time 6 months ago. Seriously can you believe that?

So the incorrect site width was being applied from the largest extra breakpoint CSS, hence it looked too wide & different to the default width in normal desktop when viewing in the editor.

the concertina drop-downs were simply not functioning because they were set to HIDE by default at the largest extra breakpoint settings which were being applied at normal desktop size

all other issues were coming from the largest extra breakpoint

so be warned if you are thinking of using it that Finsweet - it seems you must first remove ALL CSS changes applied to the 3 larger breakpoints BEFORE using Finsweet to remove those breakpoints - and even then there may be issues, i don’t know, but I’d bet there is

anyways there it is… now we know… NOT so f’insweet after all

sorry about that. I just didn’t figure it out until after posting

:+1:
cheers
matt

3

Hey Matt!
The Finsweet extension does remove the CSS code, but it seems like your project somehow was not cleared correctly.
Thanks for posting this, just letting you know that we’ll dive into this issue ASAP.

As a temporary solution, you can do the following steps:

  1. Add back the breakpoints.
  2. Use the “Remove Styles” candy in the extension to clear the styles from the breakpoints (just the ones to be removed!).
  3. Remove the breakpoints again.

This should fix your issue.
But again, I’ll make sure that we check why did this happen to you and that it doesn’t happen anymore.

Alex.

2 Likes
4

Welcome on the forum @Alex_Iglesias !

1 Like
5

@wolfie Just letting you know that I’ve just pushed an update (v0.13.3) that will prevent this particular issue from happening again.
This update should be available to everyone in about 24-48h.

If anybody has had the same issue as @wolfie, you can now make sure that the CSS styles have been properly removed by:

  1. Adding back the breakpoints.
  2. Removing them again.
2 Likes
6

well at the least it leaves the extra screen width behind at the largest extra breakpoint size.

when you delete the extra breakpoints & then view the site on a large iMac or whatever screen it expands to the width of the deleted largest extra breakpoint plus other weirdness

actually I made a site copy & did exactly that - added the larger breakpoints back in - and THEN suddenly all was revealed. In the end I actually decided to go with it for the larger screens cos the basic desktop breakpoint is too narrow for larger iMac etc screens

hope that helps

cheers