q2a-faq by NoahY breaks down in SnowFlat theme, but works fine in FlatBox themes.

Question

As the title says, the q2a-badges by NoahY breaks down in SnowFlat theme though it appears perfectly in FlatBox themes. Please see the screenshots below. The first one is for FlatBox and the second one is for SnowFlat. You will see, in SnowFlat, there are lots of empty spaces and unnecessary horizontal lines.

  

Below is the FlatBox theme, which correctly shows the FAQ page.

Anyone have any idea to fix this problem in SnowFlat theme please?

 

UPDATED SCREENSHOT after applying pupi1985's codes

Comments

That's weird. I see the FAQ page differently. See the answer below. Are you sure you're testing it in SnowFlat?

---

artists are free to use the style they want :)

---

The below answer still works nicely in 1.8beta

Answer 1

Formatting that HTML is really a pain in the neck. Anyway, this should make it look better. Add this CSS to the FAQ custom css field in the plugin options:

.notify-container {
    left: 0;
    right: 0;
    top: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 10000;
}
.notify {
    background-color: #F6DF30;
    color: #444444;
    font-weight: bold;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    padding: 10px 0;
    position:relative;
}
.notify-close {
    color: #735005;
    cursor: pointer;
    font-size: 18px;
    line-height: 18px;
    padding: 0 3px;
    position: absolute;
    right: 8px;
    text-decoration: none;
    top: 8px;
}
.qa-faq-section-title {
    font-size:125%;
    font-weight:bold;
    margin:10px 0 5px;
    cursor:pointer;
}
.qa-faq-section-text {
    display:none;
}
[class^="qa-part-custom"]  {
    margin-bottom: 0;
}
.qa-faq-list-item div {
    margin: 0;
}
[class^="qa-part-custom"][class$="-title"] {
    padding: 0 0 0 20px;
}
[class^="qa-part-custom"][class$="-text"] {
    padding: 2px 0px 10px 40px;
}

Example after the changes in SnowFlat:

Comments

I removed the plugin from qa-plugin. Then copied a clean one there. Then it works! :) Thank you!

---

I have the same problem.
Could anyone help?
q2aversion: 1.7.1 Snowflat

---

In my case this CSS removed the extra padding and fixed most of the issue. But, now it shows the Question title (in FAQ) below the dot on the left, instead of being perfectly aligned in a row.

---

Styles change over the different Q2A versions so it makes sense that something that looks in a given way on 1.7.0 looks different in future releases. Bearing that in mind, I posted the answer with a screenshot :)
The plugin needs to be rewritten so that the HTML output is different and not so ridiculously hard to style. As I said, it makes no sense to fix the HTML using CSS (unless you don't know anything of PHP to fix the HTML, of course).

---

You're absolutely right, we definitely need to reconfigure this plugin.