With the exception of the content in the slides, I have the same slider on this test site as a I have on this site, and both of these sites are running the latest WordPress installation.
For some reason, I've noticed that the <ul class="slides"></u> on the latter site (not the test site) has extra space at the bottom, before the clearfix. The space is not coming from the list items. The extra space is much more noticeable on mobile browsers than desktop. I don't know what is causing it, or how to get rid of it.
It's becаuse you have very long title on a second last slide (Random Midday Hotness: Winter Is Coming, So Scoot A Little Closer, Baby.), which occupies two lines
You may cut a title by adding this:
.headline {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Related
I'm fairly new to coding and I just can't figure out to make the text in one row of a column to wrap. Right now they overflow into the next column. The table is responsive, but this one line refuses to cooperate. I do not have access to the html so it has to be fixed with just css.
I've tried overflow, text-overflow, white-space, overflow-wrap, nothing works!
I know I'm targeting the right div and class since i'm able to make that exact text red, but when I try to make the words wrap, in Chrome Dev Tools, it automatically gets a strikethrough.
What am I doing wrong?
#IDX-showcaseGallery-3643.IDX-showcaseTable .IDX-showcaseCityStateZip span.IDX-showcaseAddressElement {
overflow-wrap: break-word !important;
color: red;
}
This is how it looks like:
The website is newtraditionrealty.com .
Thanks for an advice!
This rule is preventing your white space from wrapping:
.IDX-showcaseCityStateZip span {
white-space: pre;
}
Removing it allows the text to wrap again.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
I have a website hosted on Github Pages, using Jekyl with the Lanyon theme. However, no matter how I fiddle with the CSS, I can't seem to get the code blocks to have a horizontal scroll bar. By default they wrap, and I was able to get the text to extend beyond the box, but I can't get a scroll bar.
The first code block on this page has several lines that wrap: http://nicktobey.me/2015/07/29/monads/
I tried every suggestion at How to support scrolling when using pygments with Jekyll, but none of them worked.
With Jekyll 3.4.0 and Poole, Lanyon, I was able to get the horizontal code scrolling right by adding the following CSS:
pre.highlight {
word-wrap: normal;
overflow-x: auto;
white-space: pre;
}
I'm trying to achieve a combination of three goals...
Determine if I should use <code><pre>...</pre></code> or <pre><code>...</code></pre>?
Make code not wrap, not create horizontal scrollbars and not overflow any parent element.
Ensure that when a visitor copies code that the white-space is maintained when they paste it in to any (competent) editor.
So far I've had the most luck with white-space: pre-wrap; however I do not want the text to wrap. If they're interested enough they'll copy-paste it for themselves. While I do not want it to wrap I also do not want it to make the element overflow outside of any parent element and I don't want the text to appear outside of it's direct parent element.
I'd be okay with a horizontal scrollbar for the code itself (pre or code element, whichever) though I'd generally prefer not to.
Just in case it's relevant I don't use any CSS frameworks or the likes, I only do a basic reset...
* {border: 0px; margin: 0px; outline: none; padding: 0px; }
I test in Firefox, then Chrome, then (actual) Opera and then maybe IE if I have sanity to spare. Thoughts please?
On number 2 and 3: Hopefully I haven't misunderstood your question--I got what I understood your goal to be working easily by by adding a fixed width and overflow:hidden to the css class.
On 1: it's working with <pre (outer)><code (inner)> so... hey.
http://jsfiddle.net/A2zhH/2/
FYI, border: gray; isn't doing anything. You need to use the format border:1px gray solid;
Goal 1 is simple: code inside pre is valid, pre inside code is not. On the other hand, pre is what matters here. You can use code inside it as a matter of principle if the content is computer code.
Goal 2 is self-contradictory as such, unless you are referring to an idea of reducing font size so that everything fits. More realistically, with regard to the statement that it is okay to have a horizontal scroll bar for the code block, use just
pre { width: 100%; overflow: auto }
This causes a horizontal scroll bar to appear for the block, instead of overflowing the content.
Goal 3 is achieved when you use normal spaces. What is copied contains spaces, and what happens to them after paste depends on the software.
I got it working to an accuracy of about 99.8% of the time using the following...
XHTML
<pre><code>/* Code here. */</code></pre>
CSS
pre {white-space: pre; width: 75vmax;}
This is a problem that I run into frequently:
Given some horizontal nav links, what ways are there to ensure that the links don't squash together such that they'll push up or down onto two lines?
I thought that just setting a min-width for the container of those nav links would work (e.g. setting the ul or a container div of the ul to min-width:500px) but as the example shows, that isn't enough. I feel like I'm just missing something simple, but it's an unknown unknown.
Edit: I removed some margin on the li elements and it finally stopped wrapping to two lines. I still don't understand why added padding was causing the wrapping as opposed to simply expanding the width of the containing elements, though.
So what techniques do you guys have for making nav links stay in a horizontal bar formation?
Here is a jsfiddle with roughly the current example that I'm working with:
http://jsfiddle.net/tchalvakspam/nE8yU/5/
Do you want them to be visible? One option if you don't want them to wrap is to just have them not be shown. If you want to do that, this will work:
#admin-header {
overflow: hidden;
white-space: nowrap;
}
On Facebook, using the FBML box add-on, you can create a tab that contains custom code. One of the things you can do is hide content from people who don't "like" you and reveal content immediately once they click the "like" button. This is done via this code:
<fb:visible-to-connection>
<div class="fan">Content for fans</div>
<fb:else>
<div class="no-fan">Content for non-fans</div>
</fb:else>
</fb:visible-to-connection>
The problem is that Facebook applies a visibility:hidden to hidden content, which means the content is gone, but the white space remains. You can set margin-top of .no-fan to a negative value, which will move up the content, therefore hiding the white space. This generally works quite well. It actually works flawlessly if the height of the content of .fan is equal to .no-fan. In my case they aren't. My .fan content is longer and therefore once they "like" us, the bottom image gets cut off (on .fan). It seems to do the equivalent of overflow:hidden, taking the height of the .no-fan content. When I force the height of the .fan content, everything is revealed, but then when you are not a fan, there is white space above the .no-fan content. I've tried various combinations of applying padding, forcing heights, but there's always an inconsistency.
Has anyone had this problem? What have you done to solve it? Even if you've never worked with FBML, what would be another logical approach?
Thanks,
Ryan
You need to add this code on top:
<style>
#wrapper {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}
</style>
I had this same white space issue in the facebook like box but it was solved by defining height. did u tried that?
OK, after another hour of playing with this, I figured out what the problem is.
Let's say my fan content is 100px tall and my non-fan content is 75px tall. When Facebook loads the non-fan content, it places a span around all of it, with overflow: hidden being one of the inline style attributes. When you "like" the page, it switches over to the fan content, but the height of the div containing overflow: hidden isn't updated, which means 25px of my fan content gets cut off.
The solution was to force the non-fan content to be 100px in height, so during the switch to becoming a fan, all the fan content would have room to be displayed. The down side is that there's some extra space below the non-fan content, but it's beyond the content I care for visitors to see. At least there's no white space above my content and all of my content is visible 100% of the time.
That's the solution I found, if anyone has recommendations or something I can try, I'd appreciate feedback.
-Ryan