I'm using the "blockquote" element to add a quote on my website. Here's the code that I'm using:
blockquote {
#extend .no-margin;
position: relative;
padding: 15px 60px;
text-align: center;
font-size: 2.5em;
font-style: italic;
font-weight: 400;
line-height: 1em;
}
blockquote:before, blockquote:after {
position: absolute;
font-size: 3em;
line-height: 1;
font-weight: 300;
}
blockquote:before {
top: 0;
left: 20px;
content: "\201C";
}
blockquote:after {
top: 0;
right: 20px;
content: "\201D";
}
Here's the HTML:
<blockquote>
Here's my quote
</blockquote>
That's the result in Safari/Chrome/Firefox/Edge:
and here's how it displays on Internet Explorer 11:
How can I fix this?
Related
I came across this amazing looking 404 error page https://codepen.io/dsenneff/pen/mjZgmN
I followed the tutorial here to make the SVG mobile responsive but I couldn't get it to work.
Any hint you can provide would highly be appreciated.
Thanks
CSS
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900");
body,
html {
margin: 0;
padding: 0;
font-size: 16px;
-webkit-font-smoothing: antialiased;
background-color: #09334f;
position: relative;
}
#yetiSVG {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: inline-block;
}
#lightSVG {
position: absolute;
top: -24rem;
left: 0;
overflow: visible;
display: inline-block;
}
.content {
padding: 5rem 3rem 0 25rem;
position: relative;
z-index: 10;
font-family: "Source Sans Pro", sans-serif;
color: #fff;
}
.content h3 {
margin: 0 0 0.8rem;
font-size: 2.625rem;
font-weight: 900;
line-height: 120%;
}
.content p {
font-size: 1.25rem;
font-weight: normal;
line-height: 150%;
color: #d1e2ed;
}
.content p span {
text-decoration: line-through;
}
svg {
max-width: 100%;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
padding-bottom: 100%;
/* vertical-align: middle; */
/* overflow: hidden; */
}
I have a content management system supplying one of our applications with HTML.
I have been asked to change all "ul"s to use a <mat-icon>check_circle_outline</mat-icon> instead of the default "."
The problem is; I can't modify the content so I have to do it through css.
is there a way to add the icon to the css directly instead of using <mat-icon>check_circle_outline</mat-icon> ?
For example, with font-awesome you could do something like
.list-style-checked {
margin-left: 2.5em;
padding: 0;
li {
position: relative;
span {
font-family: "Font Awesome 5 Free";
position: absolute;
left: -2em;
text-align: center;
width: 2em;
line-height: inherit;
&:before {
content: "\f14a";
}
}
}
}
is there a similar way to do it with angular material?
Turns out it's not that different:
.list-style-checked {
#include bodyLight;
color: black;
margin-left: 36px;
margin-bottom: 0;
padding: 0;
list-style: none;
p {
margin-bottom: 0;
}
li {
position: relative;
text-align: left;
span {
font-family: 'Material Icons';
font-size: 24px;
position: absolute;
width: 24px;
height: 24px;
left: -30px;
text-align: center;
line-height: inherit;
&:before {
display: block;
margin-top: -4px;
content: 'check_circle_outline';
}
}
}
}
&.list-style-strikethrough p {
text-decoration: line-through;
}
Using LESS, is it possible to create a multi-selector variable that can extend each selector in the variable independently? For example, I have the following LESS:
#icons: .fas, .far, .fal;
#{icons} {
font-size: 1.33333em;
line-height: .75em;
vertical-align: -.0667em;
text-align: center;
width: 2.5em;
&.fa-search {
position: absolute;
font-size: 1em;
width: 1em;
top: 12px;
padding-left: 9px;
}
&.fa-question-circle {
font-size: 1.1em;
}
}
This compiles to the following, obviously only applying my nested styles to .fal, the last selector in my list
.fas, .far, .fal {
font-size: 1.33333em;
line-height: .75em;
vertical-align: -0.0667em;
text-align: center;
width: 2.5em;
}
.fas, .far, .fal.fa-search {
position: absolute;
font-size: 1em;
width: 1em;
top: 12px;
padding-left: 9px;
}
.fas, .far, .fal.fa-question-circle {
font-size: 1.1em;
}
When what I really want is the nested styles to apply to each selector independently, like so:
.fas,
.far,
.fal {
font-size: 1.33333em;
line-height: .75em;
vertical-align: -0.0667em;
text-align: center;
width: 2.5em;
}
.fas.fa-search,
.far.fa-search,
.fal.fa-search {
position: absolute;
font-size: 1em;
width: 1em;
top: 12px;
padding-left: 9px;
}
.fas.fa-question-circle,
.far.fa-question-circle,
.fal.fa-question-circle {
font-size: 1.1em;
}
Thanks for any suggestions.
You should make use of extend.
http://lesscss.org/features/#extend-feature-extend-all
.fas {
font-size: 1.33333em;
line-height: .75em;
vertical-align: -.0667em;
text-align: center;
width: 2.5em;
&.fa-search {
position: absolute;
font-size: 1em;
width: 1em;
top: 12px;
padding-left: 9px;
}
&.fa-question-circle {
font-size: 1.1em;
}
}
.far:extend( .fas all ) {}
.fal:extend( .fas all ) {}
I'm having real issues with blockquotes in IE, IE disables ignores any styling leaving just plain text. Hoping anyone knows a solution :D
The code is:
.testimonial
{
margin: 0;
background: #0054a4;
padding: 15px 50px;
position: relative;
font-family: Georgia, serif;
color: #fff001;
font-style: italic;
font-size:20px;
line-height:20px;
}
.testimonial:before, .testimonial:after
{
content: "\201C";
position: absolute;
font-size: 80px;
line-height: 1;
color: #fff001;
font-style: normal;
}
.testimonial:before
{
top: 0;
left: 10px;
}
.testimonial:after
{
content: "\201D";
right: 10px;
bottom: -0.5em;
}
My goal is to hover on next_wrapper and nav_text_title_next appears.
Now both the image and the p tag nav_text_title_next appears, but unfortunately I can't see any of the text in p tag nav_text_title_next. I use the same code for other sections, and it works well but it's not working in this part. Can you help me figure out what goes wrong?
HTML:
<div class="next_wrapper" id="next_wrapper_title" style="position:absolute; left:1050px; top:300px; z-index:5;">
<a class="next_button" href="#blah" style="background:none;">
<p class="navigation_text_next" id="nav_text_title_next">
HI!
</p>
<img class="next_button" src="img/next-icon.gif" onmouseover="this.src='img/next-icon-stop2.gif'" onmouseout="this.src='img/next-icon.gif'">
</a>
</div>
Here is the CSS:
.next_wrapper {
position: absolute;
top: 0px;
left: 95px;
}
#nav_text_title_next {
display: none;
}
#next_wrapper_title:hover #nav_text_title_next {
display: block;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
your display is none delete that and you will see your text
also delete it on your image
then do something similar to this
in html
<p>bla</p>
in css
p {
opacity:0;
}
p:hover {
opacity:1;
}
You have hidden it from view that is why.
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none; <-- remove this
}
You can remove display: none; as it parents is hiiden and not required.