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:
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.
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;
}
Related
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
I created a div in my a web site so that the text on the page is neatly contained to a set width. I've also implemented CKEditor5 and am using it's CodeSnippet plugin. When there is too much code on a line, it creates a scrollable box with the text overflowing in that scrollable part (behaviour that I actually desire!). However, the background does not exert that same behaviour so that it looks quite unreadable as you can see in the picture below.
I am quite new to building websites so I don't actually know where to start, Should look into the HTML or do I need to set some configuration in CKEdtior?
https://i.imgur.com/X5FXyGU.png
Cheers,
I found that the issue only arises when I apply a custom style like monokai-sublime.css.
adding
overflow-x: auto;
to
.hljs {
display: block;
padding: 0.5em;
background: #23241f;
}
in monokai-sublime.css fixes the issue for me.
I've created a codepen for this, but the issue is basically beneath my YouTube embed there's a margin (Seperating the footer from the page) and I don't understand why, I'm still learning when it comes to web development, so I'll be grateful for any explanations.
http://codepen.io/anon/pen/yyjaVJ
Links to codepen must be accompanied by code,
but it's all on codepen, considering there's not much.
It's because an iframe element is inline by default. The reason you are seeing whitespace below the iframe is because inline elements are aligned this way so that there is reserved space below the element for letters such as p, y, q.
You could either change the display of the iframe element to block: (example)
iframe {
display: block;
}
..or you could change the value of the vertical-align property to something other than the default value of baseline. In this case, a value of top would work: (example)
iframe {
vertical-align: top;
}
You can still use what you have, if you edit your CSS and change this code:
#body_wrapper footer {
margin-top: -6px;
}
Not exactly a professional way to do things as you will see the comments i shall get for it but it does fix your problem at hand.
First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.
I am working on a blog: http://poweryogatrainings.blogspot.com/search. If you check the link you can see that currently the blog posts are just below the thumbnail. Now I am trying to make the blog posts align beside (on the right side of) the thumbnail but I am not sure how. Does anyone know what is causing the line break and what can I do to avoid it?
Also I think there was a website where you could edit codes of your website and watch the preview without actually changing the codes. Any ideas about it?
Simply add left float to the image, and give it some space to the right and bottom, as below:
img.postthumb {
float: left;
margin: 0 10px 10px 0;
}
Use float to place your contents on same line. Like float:left; for img tag will allow contents to be displayed horizontally.
if your thumbnails are all the same width, then you can do this:
article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }
a few points:
WIDTH_OF_IMAGE should be replaced by the actual width of your image, and possibly any extra space that you want to appear between it and the words of your article
the code I've recommended will line things up in columns, if you want to avoid that, then just remove the third line of css and you will have flowing paragraphs which wrap the image
there is a lot you could do to make your code a bit more consise, for instance your article's h3 tag should really be in your article's header tag etc. You also have <title> and <meta> tags in your body, when these are best placed in the <head> of your document..
anyway, good luck, I love yoga sites in general and, look forward to seeing the finished article