CODEWITHSUNDEEP
htmlcss
hoodakaushal
hoodakaushal

Reputation: 1293

Empty space on right side of page

There is some empty space on the right side of a subreddit that I moderate, r/Fantasy. The page looks normal on load, but there's a horizontal scrollbar, which if I scroll shows the empty space, with just the background, like so: enter image description here

Same issue on mobile. The CSS for the subreddit can be seen here.

I think the element causing the issue is the div containing the AMA schedule in way down in the sidebar, but can't figure out what's wrong with it. I'm pretty much dead in the water when it comes to web design/CSS, so any help is appreciated.

And yes, I realise plenty of similar questions exist already, but none of their solutions helped me yet.

Upvotes: 0

Views: 1095

Answers (1)

Deep
Deep

Reputation: 9794

Problem is caused by the class .side .md blockquote:nth-of-type(1):after , which is used to create the separator. This has the property display:block and width:400px; which is causing it to overflow. You can change the display type to initial or put a overflow-x hidden on parent element.

you can add the property overflow-x: hidden to the class .side .md blockquote to get rid of the empty space.

.side .md blockquote {
    color: #000;
    font-size: 13px;
    overflow-x: hidden;
}

Upvotes: 1

Related Questions