CSS broken after publishing

Hi everyone,

CSS seems to break on some pages on this site after publishing.
https://webflow.com/website/GODPO

Pages are:

Blog List:
http://godpo.webflow.io/blog-list

Jobs List:
http://godpo.webflow.io/jobs-list

This is how the look in the designer. Any idea?

wanted to clarify…
you site is hosted on webflow…
so the problem is not after exporting
it’s after publishing.

Did you change any of your class names recently ?

Your css file doesn’t match your code:

Your code:

<div class="w-clearfix job-list-row" style="background-color:#ffff00;">
<div class="w-clearfix job-list-col">

Your appear to be define your row as job-list-row and each of the 2 columns as job-list-col.

The css defines these 2 class though

.card-col {
      display: block;
  width: 50%;
    background-color: #ffff00;
  float: left;
}
.card-row {
    width:50%;
    background-color: #ffff00;
  padding: 10px;
}

And when you change your code to

   <div class="w-clearfix card-row" style="background-color:#ffff00;">
   <div class="w-clearfix card-col">

You get much better results.

If I am correct… (which I might not be)

  • this appears to be related to an issue I posted several times about
  • Changing Class and Interaction Names

Yes, sorry, I meant publishing.

Yes I did change a lot of classnames. What should I do?

I just updated my reply… see above.

How do you mean “change the code”. I’d very much like not to get into the custom code stuff here.

Did you change those 2 specific class names ?

job-list-row to card-row and
job-list-col to card-col ?

It would be so easier on you if you changed all those divs to a webflow grid.

Ok, you lost me. :smiley:
How to “change to a webflow grid”.

I actually changed quite a lot of classnames. I have no idea what the names were before. I changed back these two and it seems to work but the classes inside those divs are still borken. How do I solve this?

Also, why can I change class names if it breaks the site? :smiley:

not “you changing the code”.

I downloaded your website to my computer and reviewed your code (html + css).

Your html uses a class to define a row (of jobs) with 2 columns (1 job per column).

So 2 jobs per row.

Then you repeat the row over and over.

Each time displaying 2 jobs per row.

So if you had 10 jobs… you would have 5 rows of 2 columns each.

Is this the process you wanted ?

It’s not an actual row, just the class name. The divs are just below each other in the colums. I have 2 colums and the divs just stapled into them. But that’s beside the point. How comes the CSS is broken? Is everything broken where I changed the name? Do I have to redo every class now where I changed the name and don’t remember the original?

I think you ran into a bug that I’ve seen several times :frowning:

It seems to happen when you rename classes directly on the stlyle panel (the new feature). Doesn’t seem to happen when you do it in the style manager.

yes. you are correct. I have the same finding.

did you understand “the grid” comment

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