Is there a way to leave a blank space incase a word is too long and breaks into 2 lines?
It's kinda hard to explain, please take a look at my screenshots
What it's like right now:
What I want it to look like:
You can see how the line break messes up the horizontal layout and I'm looking for a way to prevent that.
Adding a min-height to the product-title div worked out as suggested. Thanks!
Related
Ran into a really weird problem and hopefully somebody can help...
I have a few rows of inline-block elements stacked on top of each other, so that they all merge into one guitar fretboard. On web/desktop, there is no visible line break (they are merged well). However on mobile, you can see a line break, until you zoom in all the way. Here are some pictures:
This first pictures shows the line breaks. I don't want these.
This second picture shows the line breaks disappearing when I zoom in further. This is what I would like.
Does anybody know why this happens? How can I fix it? I would prefer not to have to recode everything and step away from this inline-block element approach, but if I have to I will. I figured out a temporary work around which is to stick a background-color of brown behind the entire fretboard div, but the light line breaks will show up for anything that's not brown.
I have a h2 on a slider being populated from a Wordpress post title. Part of that title is a trademark, so I want that to be all on one line, with Welcome to on the line above.
Currently I have...
Welcome to The Happy Foundation
I want...
Welcome to
The Happy Foundation
Using max-width in css I can achieve...
Welcome to The
Happy Foundation
or
Welcome to
The Happy
Foundation
Is there a way to set a max-width for each line, or otherwise get a line break after Welcome to using css?
I have tried a few tricks out there like making the text transparent and adding it back in with content. But this creates all sorts of issues with alignment and also resizing on mobile browser. I don't want to over think it.
Edit: As mentioned above, the text on the slider originates from a Wordpress post title. I can't edit the original text/html markup without changing the post title. Even if I did I can't add selectors.
Edit 2: Adding a (With Option+Shift+Space on OSX) worked but threw out the alignment of my text-align center. I need the text to be centered. Or it just looks skewed anyway and is no good to anyone.
Did you try with a <br/> after Welcome to ?
You can use unbreakable spaces inside The Happy Foundation: http://jsfiddle.net/nusa3y03/
Edit: you don't even have to know max-width if you add an unbreakable space between Welcome and to: http://jsfiddle.net/nusa3y03/1/
Yes it is possible using the max-width property
h2{max-width:236px; color:red}
<h2 id="p1">Welcome to The Happy Foundation</h2>
CSS has the ability to break lines based on the width of the containing element - without wrapping the text you want to treat differently within a different element, such as a span tag, it's hard to specify how those sections of your content should be treated.
The easiest solution IMO for your case is to manually add a line break to the title. However, if you'd like to try using non-breaking spaces [http://blog.liveeditorcms.com/html-tip-keeping-some-words-together/][1] to keep the title of the foundation together, try giving this a shot:
`Welcome to The Happy Foundation`
This will treat your foundation's title as if it's one word, preventing it from being broken up onto different lines. This might cause issues in the future depending on how you display on smaller screens.
How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...
Here you can see what I'm trying to do: http://jsfiddle.net/smogg/QFa4J/2/embedded/result/
I was trying to achieve this look so hard, and right now this code may be really confusing. If you have some tips which may clarify that, please tell me. It is all made by trial and error.
Anyway, this looks good. The only problem is my text inside .article is not selectable. Borders inside .article:before cause this problem. How can I solve this? Or maybe I should take some different steps to achieve this look (right now, with my solution I have to define height of articles which is problematic).
#edit:
I forgot about this. I can't use z-index cause my #mainhas shadow on it (which is not included in jsFiddle to clarify code) and then shadow shows on top of border. If I use borders without :before then my #main gets wider, which is not what I want.
There are cleaner and easier ways to do this. Enjoy!
http://www.css3d.net/ribbon-generator/
http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/
http://www.webresourcesdepot.com/creating-nice-3d-ribbons-with-pure-css3/
I am looking to wrap text around an image that will lie in the bottom left hand corner of a CSS table. The amount of text changes when I use it because I will be using it numerous times with different amounts of text in it. I am wondering if this is possible and if so, how I can accomplish this?
Ok I got really confused with your question, maybe this answer has nothing to do with your question, please tell me if so, but this is the closest I could think of a css table that adjusts the height when the "amount of text changes" I not sure where the image came in.
http://www.jsfiddle.net/5m5Eh/
Good luck! hope it helps!