I have :before and :after pseudo elements. I have these to change when the media rule has a screen width max-width:760px.
When the max width is 760 or > I should see a different graphic but the same :before and :after text content.
I see the new graphic but not the :before and after elements displaying.
I have tried adding the :before and after pseudo elements in the css under #media all and (max-width:760px) but without any success.
Does anyone have any idea why this is not displaying?
CSS
#infoGraph::before {width:100%; content:"Did you know..."; line-height:3rem; font-weight:bold; font-variant-caps:all-small-caps; font-size:1.4rem; margin-top:1.5rem;}
#infoGraph::after {width:100%;content:"Full text here..."; font-style:italic; font-size: 0.8rem}
#infoGraph {width:100%}
#infoGraph img {width:100%}
#media all and (max-width:760px){
#infoGraph{content: url('/site_images/new-graphic.png');}
}
Youare missing the brackets around the media rule:
#media all and (max-width:760px) {
#infoGraph{content: url('/site_images/new-graphic.png');}
}
Related
Please explain me how the following responsive media query works.
#media not screen,screen and(max-width:400px)
{
nav,ad{
display:none;
}
a{
text-decoration:none;
color:inherit;
}
}
not screen means it will apply to media types that arent screens (Print etc.)
screen and(max-width:400px) means it will apply to all media types using a screen where window width is 400px or lower.
There seems to be a problem with the CSS as the "ad" tag does not exist. Are you sure its not
nav.ad {
Please check and correct that error first.
nav.ad{
display:none;
}
The above CSS will hide the element with the class="ad" when the display screen width is 1px to 400px
and
a{
text-decoration:none;
color:inherit;
}
The above CSS will inherit the URL/href font-color from the parent ID/tag
Hope this helps.
There are three .navbar bootstrap classes in bootstrap.css file.
first .navbar rule sets display property to none.
second .navbar rule sets position, height, margin and border.
third .navbar rule is encapsulated into a media rule min-width: 768px, and sets the border-radius.
Now If I create a div with class="navbar", I expect it to be hidden. But it is not. I am not able to find out why the first .navbar is not getting applied.
If you check the CSS file the .navbar { display:none } is inside #media print {} so the browser will only apply that class when printing or using print preview.
Display:none; is under media print that is why
Making responsive website,
I wrote this, it doesn't work.
#media (max-width: 767px) {
#nav { display:block; }
}
but, I wrote this, it works!
#media (max-width: 767px) {
#nav { display:block !important; }
}
Why? :(
Check your css code , something with higher specificity is changing your #nav element.
This is a little concept:
!important after the style attribute gives high priority to that style. That is why your css is working then.
!important override the existing stylesheet attribute defined in same context.
!important will override any inline style, or more specific style that may be taking precedence on your page.
For example, you can override the style on this element...
<div style='background-color:white'></div>
by adding this in your stylesheet...
div { background-color: black !important }
But!, if you add !important to the inline style, it will then take precedence, for example...
<div style='background-color:white !important'></div>
here is a good stackoverflow answer explaining the concept in a bit more detail.
Why I can't add a margin to the first line of my p like this ?
p:first-line{
color:red; /* ok */
margin-bottom:20px; /* nothing */
}
http://jsfiddle.net/xtb5M/
According to the W3C, the margin property doesn't apply to the first-line selector:
The ::first-line pseudo-element is similar to an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:
font properties
color property
background properties
‘word-spacing’
‘letter-spacing’
‘text-decoration’
‘vertical-align’
‘text-transform’
‘line-height’
You could fake it with line-height
p{
margin-top:-10px;
}
p:first-line{
color:red;
line-height: 40px;
}
http://jsfiddle.net/willemvb/Y9M28/
i set up a style for all my links but the problem is that any anchor that has an image obviously will have the same style.
is there any way i can overwrite the style for the images without having to apply a class to all the images that removes that style?
a img {
/* alternative style for hyperlinked images */
}
I would recomend rewriting your code to not use images but for your links with images just use clickable divs displayed as blocks.
<div id="x"></div>
.y {
display: block;
}
#x {
width:..;
height:..;
padding:0;
margin:0;
background-image:url(IMGPATHHERE!);
}
#x:hover {
width:..;
height:..;
padding:0;
margin:0;
background-image:url(THEHOVERIMGHERE!);
cursor:hand;
}
No, there is no CSS selector which will capture <a> elements which contain only an <img> element. You will need to apply a class either at design-time or at run-time with javascript.
You can use jQuery qualified selectors $('a:has(img)')