I am making great progress on a current project, but of coarse, now I need to go through and fix all the various bugs popping up in Internet Explorer - one of my biggest issues right now is that the text lines for a div added via a jquery script is not wrapping properly.
I tried using this, but didnt work in IE7:
.AuthorBlurb, .AuthorBlurb p {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera < 7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
Here is a link to view an example: http://arcaspicio.squarespace.com/insights/2010/7/23/risk-management-for-border-security.html -- when i view it, the "Contributor" info on the left is not wrapping properly in Internet Explorer 7. I have tried all sorts of stuff with no success!
Any help is greatly appreciated!!
IE Developer Toolbar is showing that the containing <p> has white-space: nowrap; set, coming from .journal-entry-tag .posted-by. Most likely IE has the white-space setting overriding the word break, so the whole thing is being treated as one big long single word, hence it running off the screen the way it is.
Related
enter image description here
enter image description here
Hello, I have an issue. I did add 2 inner sections in Elementor which contain 3 columns. For desktop, it looks great but for the phone, I cannot make it into 2 columns. Anybody can advise me, please?
You'll have a hard time doing this if your content is split between different inner sections.
Here's how you could do it with a little CSS.
(1) Create a new section with just one column, and add all your content to this one column. For illustration, I'm using paragraphs but the same principle will apply for other content.
(2)Go to section settings > advanced > advanced, and give this section a class of 'item-wrap'
(3) Go to section settings > advanced > custom CSS and add the following
/* set default widget width to 50% */
.item-wrap .elementor-widget-wrap>.elementor-element {
width: 50%;
}
/* set widget width to 33.33% on tablet and desktop */
#media(min-width:768px){
.item-wrap .elementor-widget-wrap>.elementor-element {
width: 33.33%;
}
}
(4) Here's the end result. Depending on the specifics of your page, we may need to tweak the CSS selectors in step 3. Give this a try and let me know how it goes.
Sorry I'm not sure how to say this (I don't remember the exact term for that).
But if the user writes for example:
Hi
My Name is
Phil
The result should be (as it is in Instagram)
Hi
My Name is
Phil
I don't how I can change it with Purifier, because I get only one line:
Hi My Name is Phil
How should my config be?
Ok it was easier than thought.
I changed the DOM Element (in my case span) with CSS to:
white-space: pre-wrap;
word-wrap: break-word;
And before getting my Result I'm going through this line
preg_replace("/(^[\r\n]*|[\r\n]+)[\s\t]*[\r\n]+/", "\n", $string);
It works perfectly
I am trying to use variables to specify breakpoints using the CSSnext plugin.
Currently my css looks like this:
#media (width <= var(--screen-md-min)) {
background-color: var(--brand-purple-dark);
}
but when i try to run this I get the following warning in the console:
5: Missing #custom-media definition for '--screen-md-min'. The entire rule has been removed from the output.
This code works fine if I replace var(--screan-md-min) with actual pixels. I am sure this is just a problem with syntax, but the CSSnext documentation does not make the use of variables very clear.
cssnext only implements future-proof specifications.
And per specification, it's not possible to use custom properties (that' depends on the dom (:root is html) in a media query (that does not depend on the dom, but instead depends on the device).
However, people working on CSS specifications have thought about a solution for custom media queries. It's #custom-media.
#custom-media --small-viewport (width < 30rem);
#media (--small-viewport) {
/* styles for small viewport */
}
Some other informations
http://cssnext.io/features/#custom-media-queries
https://github.com/MoOx/postcss-cssnext/issues/253
I have to accomodate an MREC advertisement in my layout. The ad is 300pixels wide, and cannot resize as the fluid grid otherwise contracts.
Further, the ad needs to be the first item on smartphone, before the headline block. So, on the breakpoint I am setting it to omega to push it "after" the headline, as in this screenshot (gray rules just to make it easier to see).
The headline is 8 cols, the ad is 4. All is fine except on ipad the ad column and the ad reduces to under 300 pixels, which we are not allowed to do. So, how to keep everything fluid except the ad container?
Set max/min widths on the container?
This is not hard to do, but it means the grid up top won't exactly match the flexible grid below. I assume that isn't an issue. You have to use some functions to lay out these two elements, but everything else can be done exactly as it was before.
You can keep the ad flexible down to a minimum width:
.ad {
#include span-columns(4 omega);
min-width: 300px; // you can use any width you want.
}
Or you can make the ad completely static:
.ad {
float: right;
width: columns-width(4); // you can use any width you want.
}
The important part is that you must not set a column width on the headline.
You have a few other options. The simplest might be to set right margins and padding equal to the static ad size (plus gutter):
.headline {
margin-right: columns-width(4) + $gutter-width;
}
Or, if you want that gutter to flex, try:
.headline {
margin-right: columns-width(4);
padding-right: gutter();
}
You can add clear: both; to the main content to make sure it clears the headline and ad.
If this approach doesn't work for you, try creating a new "formatting context" for the headline. One of the classic techniques is simply overflow: hidden;. Nicole Sullivan has a good blog post on how they do it for oocss, but it gets a bit more complex and you may not need all that.
UPDATE:
All these solutions require the ad coming first in the markup. The only way around that is if you know the height of the ad. In that case, you could position the ad absolutely rather than floating it, create space for it in the same way, and set a min-height on the headline (or row-container if you have one).
While practicing different scenarios in which CSS3 pseudo-classes and selectors might come in handy, I ran across something I just can't figure out!
Here's the situation. I want to modify the :first-of-type::first-letter of the first non-empty paragraph for a block of text. I'm not sure that pseudo-classes can be stacked though. Here's what I've come up with (Doesn't work, of course)
.article-body > p:not(:empty):first-of-type::first-letter { ... }
Given the following markup:
<div class="article-body">
<p></p>
<p>The "T" in this paragraph should be the one affected.</p>
</div>
The only guess I can come up with is that pseudo-classes (ie; :not() and :first-of-type) can not be stacked upon each other. Which is odd since you can stack pseudo-elements upon each other, and other pseudo-classes...
Any ideas for how this can be accomplished?
:first-of-type selects the first p, as the name suggests, not the first non-empty p as you might want.
They stack just fine, but :first-of-type purely operates on the tag (i.e. type), not on the preceding complex selector. So you just end up looking for the first p, and that first paragraph also shouldn't be empty. And that doesn't exist.
Assuming empty paragraphs might appear throughout the text, and you only want the first, non-empty paragraph to be affected, I don't think it's possible to do this with just one selector. This is the best I can come up with:
p:first-of-type::first-letter,
p:empty + p::first-letter { text-transform: uppercase; /* ... */ }
p:not(:empty) ~ p::first-letter { text-transform: inherit; /* reset */ }
That will apply the CSS only to the first non-empty paragraph (well, and to a first empty paragraph, but it won't do anything then anyway).
Removing the empty paragraph causes
.article-body > p:first-of-type::first-letter { ... }
to behave properly. Is there any reason that the empty paragraph needs to be there? Can you alter the spacing of the first paragraph to account for the empty one not being there?