Streaming live at 10am (PST)

CSS broken after publishing


#1

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?


#2

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


#3

Yes, sorry, I meant publishing.

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


#4

I just updated my reply... see above.


#5

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


#6

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.


#7

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


#8

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 ?


#9

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?


#10

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


#11

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.


#12

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

did you understand "the grid" comment


#13

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