How to use CSS to make this works on retina screen? - css

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.

Related

map / area tag on img loaded through css

I'm working on a homepage, where, depending on the screen size, image A or B is loaded. Image A is using the
usemap
tag to display captions upon mouseover.
For now, both images are loaded into cache and I'd like to only load one, which I've achieved through the use of css's
#media screen and (min-width: 601px) {
.mobile {
display: none !important;
}
.desktop {
content: url("../assets/a.jpg");
}
}
. Problem being, the usemap tag won't work anymore. How can this be resolved?

Centering text on mobile only

I'm pretty new to advanced CSS. I have a custom heading section which i want to make centered on mobile only. I have added a class name and the following code but nothings happened.
.mobile-text {
text-align: right;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center;
}
}
This is the homepage of this site and the paragraph is the following:
REAL ESTATE THAT CHALLENGES NORMS & ELEVATES EXPECTATIONS. THIS IS COLOURFUL THINKING IN A BLACK AND WHITE WORLD.
Your class on the website is .mobile-text, and it should be mobile-text - The . is only used in selectors to say that the following text is a class name
Also, your inline styles on the element ( style=font-size: 35px... etc ) is overwriting your changes - you can use !important to handle this lazily
.mobile-text {
text-align: right !important;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center !important;
}
}
max-device-width will target the width of the entire device area (i.e the device screen). Instead use max-width, which will target the width of the entire browser area.
#media (max-width: 600px) {
.mobile-text {
text-align: center;
}
}
Note: device-width queries are deprecated.
When I check the html of your page I can see the class="" of this <h4>:
class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
In your css you want to manipulate it using the .mobile-text class. Problem here is that you define this class in your html using .mobile-text. That's actually wrong, you need to define it with only mobile-text like this:
class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
The . is actually a css selector for a class like # is a selector for an id.
Your media query is not working on desktop if you are check in desktop view.
And also your class declaration is wrong please remove . from mobile-text. :)
max-width is the width of the target display area, e.g. the browser
max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
Please use #media all and (max-width: 600px){}
For more details please visit here
Hope it will help you. :)

How to hide background image on mobile devices (SP Page Builder)

I am currently working on a website using Joomla and I am using SP Page Builder extension to construct my content pages. I have a background image on one of these content pages and it just messes up the mobile display of the webpage so i want hide the background image on mobile devices. I have used this css code which has worked for me before (on pages without SP Page Builder) but it seems not to be working, here is the code:
#media all and (max-width: 768px) {
section.sppb-section.bg {
background-color: #ffffff;
background-image: none;
}
}
here is the auto generated HTML code of the element with a background image:
This is a screenshot of page the layout of a row with two columns, somehow this row and columns are constructed using <div></div> tags
Is there a solution to this or a work around. Thank You.
In your html you have inline style which force the background to be there so you will need to use !important to force background-image to be none
#media all and (max-width: 768px) {
section.sppb-section.bg {
background-color: #ffffff !important;
background-image: none !important;
}
}
Just have the background image display on screens > 768px, not the other way around.
.bg {
background:#fff;
}
#media screen and (min-width:768px){
.bg {
background-image:url(img.jpg);
}
}
Inline CSS is always take preference over external css that's why your css code is not working. Try to keep that inline css style code in external css file.
It looks like the bg image is being added in the style attribute which will override your css class. You'll need to decorate your css with important.
#media all and (max-width: 768px) {
section.bg {
background-color: #ffffff !important;
background-image: none !important;
}
}

disable prettyphoto on small screens (or any a href link)

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

Do background images load if they are replaced with media queries?

I'm creating a responsive design so my website is viewed well on both Desktop and Mobile devices. On my website I have a pretty large background image on one of my divs.
Now what I have been wondering is: Does the background image on my div load if it is replaced by a color in a media query?
Example:
div {
background: url(img/large-image.jpg);
}
#media screen and (min-width: 240px) and (max-width:830px) {
div {
background: #000;
}
}
No it wouldn't as you're completely overriding the background property*.
For reference, however, if you wish to keep your image and add in a colour, rather than using the background property, use the individual background-image and background-color properties:
div {
background-image: url(img/large-image.jpg);
}
#media screen and (min-width: 240px) and (max-width:830px) {
div {
background-color: #000;
}
}
* Note that this is browser-specific; to save time the majority of browsers will only load resources when they're required. See also: Are unused CSS images downloaded?
Your images are still loaded by browser, as long as they are in your CSS. You can check it by using Chrome Debugger Tool > Network.
There is a interesting article about image load & performance in responsive design:
http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/

Resources