Clean theme has multiple positioning problems

Question

The first issue is that the feed (RSS) icon overlaps with the favoriting (star) button in the Categories page. This problem may exist on other pages where it's possible to both favorite something that has an RSS feed.

The second issue is that when the askbar ("Ask a question") is positioned at the top of the page, it overlaps with the login/search navbar. There may be other positions that cause problems as well.

Finally, when using the Markdown editor in comments, the right side of the editor is cut off, as if the editor's width is too big for its container's width.

Comments

Please provide your site URL

---

It's an internal site, so there is no public URL that I can share.

The issues I listed should be reproducible on a new Q2A 1.6.3 deployment running Clean without any modifications.

---

If it is on local than please provide some screenshots. That will helps a bit.

---

I am waiting for the screenshot. If you would not post than I will close this ticket declaring inactive.

---

This is already in our production environment with a manual fix to the style.css file, so it's difficult to get time to revert to the broken version to get the screenshots, but I will try to find time to mock it up ASAP and reply. Thanks for your patience :)

---

How do I attach a screenshot to a post?

---

You just upload on postimage and add image by clcking on image tool on the toolbar and place URL

---

Ok, thanks.

Here are the links to the images (image #1, image #2), since they don't seem to
show well at their current sizes when embedded.

Here's the first screenshot, showing the RSS icon overlapping with the Favorite icon:

Here's the one for the Askbox overlapping with the navbar (see the top):

---

Thanks for the references. I will post fix soon as possible.

Answer 1

Favorit fix

line #665 Find

.qa-main {
    float:left;
    width:710px;
    margin:0;
    clear:left;
    overflow:hidden;
}

Replace with

.qa-main {
    float:left;
    width:710px;
    margin:0;
    clear:left;
}

line #940 Find something similar

.qa-favoriting {
    /* float:right;
    margin-right:8px; */
    position:absolute;
    right:0;
    bottom:5px;
}

Replace with

.qa-favoriting {
    /* float:right;
    margin-right:8px; */
    position:absolute;
    right:0;
    bottom:20px;
}

---

Top widget fix

On line #157 Find

body {
    background:#fff;
    text-align:center;
    margin:0;
    padding:0;
    position:relative;
}

Replace with

body {
    background:#fff;
    text-align:center;
    margin:0;
    padding:32px 0 0;
    position:relative;
}

line #314 Find

#qa-login-bar{
    background: #eee;   
    position:absolute;
    left:0;
    right:0;
    margin:0;
    height:32px;
    border-bottom:1px solid #ddd;
}

Replace with

#qa-login-bar{
    background: #eee;   
    position:absolute;
    left:0;
    right:0;
    margin:0;
    height:32px;
    border-bottom:1px solid #ddd;
    top: 0;
}

line #545 Find

.qa-header{
    width:1000px;
    margin:0 auto;
    padding:60px 0 0;
}

Replace with

.qa-header{
    width:1000px;
    margin:0 auto;
    padding:28px 0 0;
}

---

Markdown editor is a third party plugin and we do not support for any third party fix. However try below fix it may helps to resolve the issue for the editor

Add below code at the end in your stylesheet file

.wmd-input, .wmd-preview{
    width: 100% !important;
}