I created a Wordpress site and I added a blockquote element in the about section of the homepage.
I used :before and :after to insert a qoute unicode in my blockquote element but the problem is the :after pseudo quote is not responsive.
I inserted a top: 45% right: 34% temporarily and it works only for min-width: 1200px screensize.
blockquote {
display:block;
background: #fff;
padding: 20px 20px 20px 75px;
margin: 0 0 20px;
position: relative;
width: 100%;
/*Font*/
font-family: Georgia, serif;
font-style: italic;
font-size: 36px;
line-height: 1.2;
color: #242424;
}
blockquote::before{
content: "\201C";
font-family: Georgia, serif;
font-size: 100px;
font-weight: bold;
color: #FFC107;
/*Positioning*/
position: absolute;
left: 10px;
top: -10px;
}
blockquote::after{
content: "\201D";
font-family: Georgia, serif;
font-size: 100px;
font-weight: bold;
color: #FFC107;
position: absolute;
top: 45%;
right: 34%;
}
I am not sure what you mean by "not responsive" ("responsive" isn't a very well-defined term...), but I assume you mean that the position of the inserted ::after element is only correct at a specific window size?
The opening quotation mark always appears at the same position relative to the text, but the closing mark is positioned to the edge of the <blockquote> element, not the end of the text inside it. At some window sizes, when the text wrapping leaves a large gap between the last word of the text and the edge of the element, the quotation mark is separated from the text. This is made worse because of the large font size.
In your specific case, a simple solution is to change the blockquote::after selector to blockquote p::after, and remove the top:45% and right:34% properties. The ::after element is then inserted at the end of the text, which means its position changes as the text reflows.
I was able to solve a similar issue by just adding this:
width: inherit;
Related
I created a basic page with Bootstrap and cannot make the font size of my blockquotes smaller. When I change the CSS font-size property, the margins change since they're based on it, but the size of the text itself doesn't.
CodePen
Here's the CSS applied for the blockquotes:
blockquote {
font-family: Georgia, serif;
font-size: 1em;
font-style: italic;
margin: 3em auto !important;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -20px; /* Negative moves it left */
top: -20px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
If you want to change the font size of the text inside blockquote, You have to define font size property of the <p> tag inside the blockquote like this
blockquote p {
font-size: 0.8em !important;
}
!important is must necessary here it will override the font-size defined in bootstrap.
you can not use CSS direct like this
blockquote {
font-size: 30px;
}
because this tag has it's own font-size property.
The relation between blockquote and p tag is CSS Combinators
The blockquote override your css, so you have to add !important to the difenittion.
For Example:
font-size: 1em!important;
but if you want to chang the p tag:
blockquote p{
font-size:1em;
}
This is just because <blockquote> is outer element..The inner element is <p> so you have to apply changes to <p> itself.
blockquote{
font-size:30px;
}
p{
font-size:25px;
}
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
</blockquote>
Or if you want to use font-size of blockquote, you have to use !important like this:
blockquote{
font-size:30px !important;
}
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I’m trying to draw a circle around the first letter of each first paragraph in an article using border-radius and padding, but because of the different widths of the characters, it will be displayed as an ellipse rather than as a circle.
Is there any possibility to set width and height of a letter to the same amount with CSS or to set the padding so that it matches together with the width the height of any character?
My current code looks like this:
p:first-of-type:first-letter{
font-size: 58px;
line-height: 1;
float: left;
margin-bottom: -4px;
background-color: rgb(44, 44, 44);
border-radius: 40px;
padding: 0 14px;
color: #fff;
}
Per #web-tiki - The ::first-letter pseudo element doesn't allow the width property. The only solution would be to use a monospace font or to use a container for the first letter. It would allow specifying a with for it an keep the circle round.
Building on web-tiki's excellent answer, you could size everything in em so it reacts to font-size changes as well.
span {
font-size: 58px;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
display: inline-block;
vertical-align: middle;
background-color: rgb(44, 44, 44);
border-radius: 50%;
color: #fff;
text-align: center;
margin-right: .1em
}
p:nth-of-type(even) span {
font-size: 24px;
}
<p><span>A</span>pple</p>
<p><span>Q</span>uestionable</p>
For those who may not want to add an extra element around each first letter, another solution would be using a svg as a background-image:
p:first-of-type:first-letter{
background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI1OCIgd2lkdGg9IjU4Ij4KICA8Y2lyY2xlIGN4ID0iMjkiIGN5ID0iMjkiIHIgPSIyOSIgc3R5bGU9ImZpbGw6IzQ0NDQ0NDtzdHJva2U6bm9uZTsiIC8+Cjwvc3ZnPgo=");
padding:0px 15px;
background-repeat:no-repeat;
background-position:center center;
}
I have a weird FIREFOX issue. If you go to http://www.aerlawgroup.com - scroll down and see the box on the right hand side (with the gavel). As you can see, the text and phone number are flushed too far to the right. If you see site in Chrome or Safari, it renders fine. I was advised to reset the .hr css tag, but that didn't work. I use Weebly, so while I can change the HTML and CSS, Weebly will insert it's own code upon publishing. Here is the code:
<div id="FREE2">FREE CASE</div>
<div class="PHONENUMBER" id="PHONE3">(800) 852 - 9851</div>
<div class="EVALUATION" id="EVAL2">EVALUATION</div>
<div class="CALLORCLICK" id="CALL2">CALL OR CLICK</div>
</div>
and
#FREE2 {
font-family: Arial, Helvetica, sans-serif;
color: #b2c8ff;
position: absolute;
top: 23px;
font-size: 22px;
left: 693px;
}
#EVAL2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 42px;
font-size: 20px;
left: 693px;
}
#CALL2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 65px;
left: 693px;
font-size: 17px;
}
#PHONE3 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
top: 170px;
position: absolute;
left: 824px;
margin: 0px;
padding: 0px;
font-size: 16px;
}
It isn't a good idea to use absolute positioning on the elements inside that box relative to the page. I think Chrome/Safari and Mozilla have different ideas as to what those pieces of text should be relative to. Having them relative to the box itself will remedy your problems (from what I've been messing around with in developer tools, it's fixing it).
To make left: xx and top: xx reposition the element relative to the box, simply set the positioning of its container (.bigimg) to relative.
.bigimg {
background-image: url("http://www.aerlawgroup.com/uploads/2/1/1/5/21159280/9150872_orig.jpg");
width: 282px;
height: 199px;
position: relative;
}
Now if you change your values for #FREE2 for example to make them visible
#FREE2 {
font-family: Arial,Helvetica,sans-serif;
color: rgb(178, 200, 255);
top: 30px;
font-size: 22px;
left: 20px;
position: absolute;
}
You will need to adjust the values for all elements inside the box, and then it will be consistent between browsers. These values are just an example, you'll need to find the difference between the old and the new values yourself.
If you're using position absolute, you have to set position relative to its parent element. For example, the parent element for ".PHONENUMBER" would be ".bgimg".
.bgimg {position:relative;}
.PHONENUMBER {position:absolute; top:170px; right:20px;}
So ".PHONENUMBER" will position absolute, relative to ".bgimg".
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}