I noticed this Q & A on stackoverflow here: how to specify a different image in css depending if the user visits on a desktop or a mobile browser
His HTML:
<img src="image.jpg"
data-src-960px="image-960px.jpg"
data-src-1260px="image-1260px.jpg"
alt="">
and CSS is:
img[data-src-960px] {
content: attr(data-src-960px, url);
}
I'm trying to incorporate this for webpage, but am failing miserably...
My HTML:
<div class="container">
<div><img src="images/header.jpg" data-src-mobile="images/header_mobile.jpg" alt="Philadelphia" /></div>
</div>
My CSS:
img[data-src-mobile] {
content: attr(data-src-mobile, url) !important;
}
I have an entire stylesheet devoted to mobile devices. But this doesn't work at all. It always loads up: images/header.jpg
Is the url parameter in the attr supposed to have something in there? I've tried replacing url with ../images/header_mobile.jpg, but that doesn't work either.
How do you use this? I can't seem to find much detail for this on the internet at all... :(
For what it's worth here are some References to people saying that this works:
Using CSS/HTML to Make a Responsive Website in 3 Easy Steps
Responsive images using CSS3
Use min-width, max-width, :after and content:url. For example:
#media screen and (min-width: 961px)
{
a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png");}
}
#media screen and (max-width: 960px){
a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-426x100.png");}
}
<a tabindex="1"></a>
References
Stu Nicholls | CSS PLAY | Content: - CSS Gallery
CSS content and attr
content - CSS | MDN
Related
I have the follow html in Angular2.
<div class="col-xs-12 col-lg-8" >
<p style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
In my view, the text is aligned at the left (as I wanted). How can I say that when is for col-xs-12 it has to be centred?
Thank you.
The best approach for this would be to create a specific class for you container and only use media queries to modify the text position on mobile.
Here's the general idea following the BEM CSS naming convention:
<style type="text/css">
.thing {
... some styles
}
.thing__title {
text-align: center;
}
// tablets start at 768px width
#media (max-width: 767px) {
.thing {
... some mobile styles
}
.thing__title {
text-align: left;
}
}
</style>
<div class="thing col-xs-12 col-lg-8">
<p class="thing__title">... some text</p>
</div>
No need to increase the loading time of your site by adding jQuery to add styles to an element.
Bad idea to target modifier classes from component libraries. Especially your grid as you might removing that or the class name could be deprecated in later versions leaving your site vulnerable.
Can you use jquery?
$('.col-xs-12').css('text-align','center');
There is a good explanation of Bootstrap 3 and 4 Media Queries here at Bootstrap 3 breakpoints and media queries.
Bootstrap provides a great deal of flexibility to your project, but from minute details such as text justification between breakpoints, you will need to add a media query to your own CSS and apply the styles as desired.
So you might try something like this:
<div class="teacher-info col-xs-12 col-lg-8" >
<p class="ta-xs-left" style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
<style>
// Default to center the paragraph to center
.teacher-info p {
text-align:center;
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
// When the screen is larger than a tablet, left align the text
.ta-xs-left {
text-align:left;
}
}
</style>
Edit
In line with martinsoender's answer, I agree you shouldn't target modifier classes, and should add your own classes. This edit is to show how I would do that.
Essentially, I would add a class to the parent to denote what holds (teacher-info), then give the element I want to modify a class. In this case I create a class that looks similar to a bootstrap class. ta-xs-left ({text-align}-{Xtra-Small}-{Alignment}), then it can be reused wherever you need it.
I am setting up a custom header and footer for a client's site which you can view here:
http://gag5.rhinomarketinggroup.com/
The social media links float right just fine here...and on all pages. But for some reason on the 404 pages they do not float to the right. Very confused. Can't seem to find a reason why it would change on the 404 pages.
Example 404 page:
http://gag5.rhinomarketinggroup.com/404
clarifying images:
enter image description here
.et_pb_column.et_pb_column_1_2.et_pb_column_1 {
float: right;
}
On the normal page, you have the following CSS:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
width: 47.25%;
}
Which is applied to .et_pb_gutters3 (The part where the LinkedIn icon is)
You also have:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column, .et_pb_gutters3.et_pb_row .et_pb_column {
margin-right: 5.5%;
}
Which is applied to .et_pb_column (The part where the logo is)
I'd suggest you add this code to the 404 pages as well.
UPDATE:
Though it seems as if this does not completely solve the problem. The easy way to fix this is to add float:right; to the .et_pb_column_1 (The second half, containing the LinkedIn icon)
Solution to Header:
Change <div class="et_pb_column et_pb_column_1_2 et_pb_column_1"> to <div class="et_pb_column et_pb_column_1_2 et_pb_column_1" style="float:right"> (Line no. 202)
Problem with Footer:
You have used et_pb_column_1_3 and et_pb_column_2_3 classes in 404 page, while you have used et_pb_column_1_2 classes in normal pages.
Solution to Footer:
Replace et_pb_column_1_3 and et_pb_column_2_3 classes with et_pb_column_1_2 in the footer. (Line no. 366 and 384)
You have this problem because of #media rule
if you inspect <div class="et_pb_column et_pb_column_1_2 et_pb_column_1">
you have apply following media rule on it:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
width: 47.25%;
}
but on 404 page it is not applying #media rule
Solution: Apply #media rule on 404 page
I am a web front-end developer (newbie).
Hypothetically, if I am writing code for a web page using Twitter Bootstrap and want a responsive sidebar, I can do something like this:
<div class="col-xs-12 col-md-3">...</div>
Let's say, in the interest of separation of concerns, I would like the design people to decide how many columns wide the sidebar should be on each screen width.
Wouldn't it be better to do something like this:
<div class="sidebar">...</div>
and have the designer do something like this:
sidebar = col-xs-12 col-md-3
somewhere in the CSS?
Is this possible? Are there tools that will allow this? Am I way off base?
This is possible, with some help from a CSS preprocessor like the following:
Sass
.sidebar {
#extends .col-xs-12;
#extends .col-md-3;
}
Less
.sidebar {
&:extend(.col-xs-12);
&:extend(.col-md-3);
}
Hope this helps!
You should use a preprocesor to compile your CSS, and create semantic class from unit classes.
For example in Sass:
.sidebar {
#extends .col-xs-12;
#extends .col-md-3;
}
You can download Bootstrap in Sass on the offical website.
You can read the article "Using Sass To Semantically #extend Bootstrap", it can help you achieve what you want.
You propose instead of determining it in the html with a class on div like this:
<div class="col-xs-12 col-md-3">...</div>
determine it in the css with something like this:
.sidebar {
width: 100%;
#media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
width: 50%;
}
#media (min-width: $screen-md-min) {
width: 33%;
}
}
In any case you have to edit something: either html file or css file. Consider your project, to know which one is easier.
I would suggest to put columns into the html (it would be kind of default case)
<div class="sidebar col-xs-12 col-md-3">...</div>
and then, if needed, override it for specific pages in css with something like this:
.page-order .sidebar {
width: 33%;
}
Code is like:
<img src="a.png">
The image file a.png is 100x100 but on retina screen it's very ugly so I can generate a 2x PNG file. But how do I make it work in this HTML code?
I'll suggest to go for SVG if you are using icons. However if you want to use image you can use srcset attribute.
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">
see can i use..
Best option would be to use svg image which would fit in all resolutions.
But for your current code, you can use media query
HTML:
<img src="a.png" class="normalDisplay"><img src="abiggerresolution.png" class="retinaDisplay">
In your CSS:
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
img.normalDisplay {
display: none;
}
img. retinaDisplay {
display: block;
}
}
Pure JS solution:
var retina = window.devicePixelRatio > 1;
if(retina) {
document.querySelector("img.specifyclassname").src="mention your higher resolution image link";
}
Another option would be: Use retina.js link.
The script will check your server to see if you have any image source with #2x at the end. It will replace that image with the higher resolution image.
I was looking for a way to disable prettyphoto lightbox on mibile devices or any other small screens and after spending hours by trying different script, I discovered a very simple way to do that with css media queries:
html
<div>
<a class="lightbox" rel="prettyPhoto" href="img.jpg">
<img src="img.jpg">
</a>
</div>
css
#media all and (max-width: 479px) {
a.lightbox {
pointer-events: none;
}
}
But, I just like to know if there is a better (proper?) way? Is it better to use a JS functions ( ($(window).width() )? I want to be sure it will work on any devices. Thanks.
Just wrap it with:
if ($(window).width() >= 768) {
$("a[rel^='prettyPhoto']").prettyPhoto();
}
will work