I am working with an HTML template, and I'm trying to replace the site's logo based on browser size using media queries.
I am trying the technique I found here: #media queries and image swapping
My custom.css file has this code:
.test-mobile-logo{
display: none;
}
#media only screen and (max-width: 500px){
.test-main-logo{
display: none;
}
.test-mobile-logo{
display: block;
}
}
My html file has this code for the logo:
<div class="logo">
<a href="index.html" >
<img src="images/logo-dark.png" alt="" class="test-main-logo">
<img src="images/logo-main.png" alt="" class="test-mobile-logo">
</a>
</div>
The page is showing both images at once though. But when I remove my style.css file, the images finally show one at a time and replace properly.
The style.css file: http://demos.webicode.com/html/lucian/html/css/style.css
I'm not sure what the conflict is, I'm still new to CSS. Does anyone have any ideas?
You have this style in your css that overrides your display styles.
img {
display: inline-block !important;
}
Remove the !important to make your media-query work.
I agree with #HenrikhKantuni use a background image and change the background image in the css media query.
Otherwise users will always be downloading 2 images, that's one unnecessary http request and kilobytes the user will be requesting, especially over mobile networks you want to reduce this as much as possible.
as #VincentOrback mentioned just delete the !important from img selector
Better technique: use background-image instead and just change the url, or (even better) use CSS Sprites
Related
I have modified a Marketo responsive email template and need to swap out the header image when the media query hits its breakpoint. However many versions of outlook do not support background images (thank you Micro$uk) so is there a way to write the CSS to swap out an image in with src and not background-image? Here is a screen shot from litmus.com you can see the image doesn't appear in many versions of Outlook.
<img src="image1"/> to <img src="image2"/>
javascript probably wont work in a lot of email clients. i use the below code for my HTML email templates.
HTML
<a href="#" border="0">
<span id="mobile">
<img id="mainimg" class="headimg" src="#" alt="...">
</span>
</a>
CSS
#media only screen and (max-width: 450px) {
span[id=mobile] {
display:block;
background-image: url(#) !important;
background-repeat: no-repeat !important;
background-position: top center !important;
width: 100% !important;
height: # !important;
}
img[id=mainimg] {
display: none !important;
}
}
just replace the "#" w/ your links and/or height of the mobile img and you can set that breakpoint to whatever you need it to be. i get really good results and pass all of the litmus test w/ exception of lotus notes.
hopefully that helps.
In HTML...
<div style="src:www.google.com"></div>
And try this in javascript... (I haven't tested it)
Element.getElementsByTagName('img')[0].src='www.google.com';
I have a normal, general CSS for a website.
After creating some #media queries to make my elements have different colors, sizes and etc on mobile and different resolutions, everything is fine.
The problem is when I resize the windows from a normal size to a small one, the effects are applied, but when I resize back to the normal one, the css is not refreshed, some "mobile" rules stay there.
How can I re-render the css without the #media rules, not refreshing the page.
This is an example of my HTML:
<div class="item">
<span class="item-foo">FOO </span>
<span class="item-bar">BAR </span>
</div>
With the following css:
.item-bar{
float: right;
}
#media only screen and (max-width: 992px){
.item-foo, .item-bar{
display: block;
float: none !important;
}
}
Here is a codepen of it:
Codepen
If you resize the view area to a small size until they turn in one span each line and go back to a bigger size, the "bar" element won't be in the right place.
As #JesseKernaghan pointed out in the comments, this is a chrome bug.
The easy-fix would be increasing the specificity for the button fixes this, as suggested by #SeanKeating.
In this question's case, adding this style fixed the problem:
.item .item-bar{
float: right;
display: inline;
}
Here is the codepen updated with the easy-fix
http://codepen.io/matheusbaumgart/pen/yyzXpp
I'm searching a way to EASILY add responsive alternative images to content. For example I have three different images, one for each size (desktop, tablet and mobile) and would like to show them according to responsive breakpoints.
Foundation framework has "interchange" built in, but there is no easy way to add the images except by adding the code:
<img data-interchange="[/path/to/small-image.jpg, (small)], [/path/to/bigger-image.jpg, (large)]">
Anybody know any plugin that could do this?
You can insert all three images in the page and show every image for specific screen width;
<div>
<img class="image-small" src="/path/to/small-image.jpg" />
<img class="image-medium" src="/path/to/medium-image.jpg" />
<img class="image-big" src="/path/to/big-image.jpg" />
</div>
.image-medium,
.image-small{
display: none;
}
#media screen and (max-width: 800px){
.image-medium{
display: inline;
}
.image-big{
display: none;
}
}
#media screen and (max-width: 400px){
.image-small{
display: inline;
}
.image-big{
display: none;
}
}
i'd suggest to use the Srcset attribute and then implement fallbacks (ex. picturefill) for browsers you need to support.
by viewport
<img src="img-1x.jpg"
srcset="img-1x.jpg 500w, img-2x.jpg 800w"
alt="">
or by resolution
<img src="img-1x.jpg"
srcset="img-1x.jpg 1x, img-2x.jpg 2x"
alt="">
Ok, I solved it like this. (http://i.stack.imgur.com/jWcDD.png) I used the Visual Composer plugin and made a simple add-on plugin that enables content editor to attach two different images. The plugin just writes these image tags and Foundation frameworks css hides and show them accordingly:
<img src="default.jpg" class="show-for-medium-up">
<img src="small.jpg" class="show-for-small-only">
I couldn't get Foundations Interchange images to work inside Visual Composer. Maybe it has something to do about javascript queue. Visual Composer content loads after foundation or something..
I currently use Javascript to hide my social media buttons on the main page of my Tumblr site. It's programmed to hide them only on the main page based on the url in the browser, not on any other pages.
However, I'm curious as to if there's a way to do this with just CSS (or even CSS3), similar to how media screen can make conditions for divs based on browser size. I know you can have more conditions with PHP, but Tumblr won't allow it.
Depending on the Browser size you can hide ,for example
#media (min-width: 768px) and (max-width: 979px) {
.hidden {
display:none;
}
}
or
depending on the parent class
<body class="wrapper">
.wrapper .hidden{display:none;}
You should be utilizing {block:PermalinkPage} and {block:IndexPage}.
{block:PermalinkPage}
<div class="icons">
<p>This will only appear on permalink pages.</p>
</div>
{block:PermalinkPage}
You can go a step further by wrapping it in {block:Date} if you only want it to appear on posts and not pages.
I'm putting together some Responsive CSS for a website I'm building and I'm curious if I can use CSS to force images to render as alt text instead of images. We are displaying the logos of cosponsors but because of their variable size it's hard to fit them confidently into the responsive design. For that reason we'd like to store the company name as alt text and render that instead. Of course we could place the name in a separate element and toggle the visibility using CSS but using alt text seems DRYer.
You could store that in a data-attribute rather than the alt text, and then do something like this:
<span class='responsive' data-alt='foo'>
<img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' />
</span>
#media only screen and (max-width: 300px) {
.responsive:before {
content: attr(data-alt);
}
.responsive img {
display: none;
}
}
The reason you can't do this just with CSS and an img tag is that img tags is because they are replaced elements, which means pseudo doesn't work with them, and therefore, using :before doesn't work with them.
Another approach, taking this into account would be the following:
<span class='responsive'>foo</span>
.responsive {
background-image: url('http://www.ponyfoo.com/img/thumbnail.png');
text-indent: -9999em;
overflow: hidden;
width: 180px;
height: 180px;
display: block;
}
#media only screen and (max-width: 300px) {
.responsive {
background-image: none;
text-indent: initial;
overflow: initial;
}
}
If you ask me, I like the second approach a lot more.
Went with:
<div class="cobranding">
<span>Brought to you by</span>
<span class="sponsor">Joe Shmoe Inc.</span>
<img src="img/graphics/joe_shmoe_logo.jpg">
</div>
Using CSS to toggle the visibility of the img or the "sponsor" based on responsive breakpoints.
Both of Nico's approaches look good. The only hiccup is that these cosponsor logos are going to be added via a CMS so I want to steer away from any solution involving case-by-case CSS (:before or background-image). For the sake of time I went ahead with the two element strategy above.
(answered for any others looking for a solution)
Important aside:
Remember the purpose of alt: to display meaningful ALTERNATIVE information (if the image doesn't load).
- so any implementation should not break that... (bad for accessibility & SEO).
That said...
If the image doesn't load, the alt will be displayed. So (untested) but you could try messing up the src attribute by javascript... this should cause the browser to display the alt since the image wont load.
- you might find this approach along with lazyload useful.
Also to note: a broken img doesn't behave like an image, so you can apply a img:before css rule (and use content: attr(alt) )