On this site: http://goo.gl/VNct8O I made a widget for available payment methods. All the logos in it are expected to be retina ready.
I used coolrunnings to develop the sprites using spriteme service.
However, when I zoom to 200% in chrome all logos looks stretched. Positions are correct, just the images are stretched. How can understand what's wrong...
I dont have a ton of experience with Retina but this might help, i think you need to use a media query for it
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
Here is a good article about it http://css-tricks.com/snippets/css/retina-display-media-query/
Changing the background-size to 64px 584px; on your ul.accepted-payment-methods li.american-express span class resolves the stretching. From there, just adjust each payment type's background-position and you should be good to go.
Related
My apologies for writing so much but I wanted to put what I’m doing into context. So I’ll ask my question first:
Why does the HTML and CSS this link to a responsive navbar stop working when I change its “max-width” media queries to “min-width”, pixel-based media queries?
https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav
All I need is to understand why I can’t make the HTML and CSS behave exactly the same way with min-width, pixel-based media queries. What do I not get? I’ve been working with Responsive web design and development for a few years. But this clearly proves I don’t understand responsive css the way I need to. I’m coding up a responsive website from scratch for a client of my own without Bootstrap so I can hard-wire my understanding on the principles that Ethan Marcotte sets out in the second edition of Responsive Web Design.
I’m not trying to be lazy by not posting my own code. This is the exact same structure navbar I want to use for the site I’m building, and you can go straight to the relevant HTML and CSS in the above link. I’ve tried making a linked stylesheet of the embedded CSS and HTML in the above link. I’ve injected it into my own site as a separate linked-stylesheet but I’m still running into the same brick wall.
My breakpoints structure in my own stylesheet is:
`/* ====MOBILE FIRST===== */
/* Custom, iPhone Retina */
#media only screen and (min-width: 320 px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width: 480 px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width: 768 px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 1024 px) {
}
/* Desktop */
#media only screen and (min-width: 1280 px) {
}`
I also don’t want to have one big monster stylesheet, so I’m trying to link the navbar stylesheet to the main stylesheet, using:
`#import url('mainstyles.css');`
I know that essential css rules for breakpoints must go into specific media queries. But if all the CSS in the above navbar link have to go into all five “min-width” based media queries - that’s just CSS bloat - isn’t it? And too much unnecessary CSS code?
I’ve spent three days on it and I just can’t get the fundamental reason. How do I make the above nav bar BEHAVE EXACTLY THE SAME WAY after changing the “max-width” media queries to “min-width” pixel-based media queries? I’ve tried changing the “width” and all style rules relevant to display to percentages - but it’s not solving the fundamental reason. Many thanks in advance for all advice.
Keith :)
max-width means the query will work up UNTIL the specified width.
min-width means the query will START working at the specified width.
Your first query will work from 320px to 479px. Your second will work from 480px to 767px, and so on (you have no query for 0-319px).
In order to change max-width to min-width you'd need to bump each query down a level (XS would become min-width: 320px, Desktop would become min-width: 1024, etc.)
I've included a simple answer below, as I found, once you get the basics right with Media Queries, its an easy concept to then apply to more complex ideas...
The example below could be used for firstly, a smartphone, then going up to an iPad, then finally a landscape iPad and a desktop device...
#media screen and (max-width: 600px) {
/* Stylings for all devices with screens with a width of 600px or less.*/
}
#media screen and (max-width: 992px) {
/* all screens with a max width of 992px or less */
}
#media screen and (min-width: 992px) {
/* all screens with a width of 992px or higher */
}
We are looking for a way to create a div class to only appear on mobile, ie. when the resolution is below 1024x768. We currently use:
hide-below-768
for resolutions above 768.
Would anyone be able to advise on setting for below?
Thanks in advance.
You're looking for media queries
#media screen and (max-width: 768px){
/* add css here */
}
This allows you to apply different class behaviours, wrapping and sizing rules depending on the browser view port size.
But this won't be just for mobiles. It's also works when reducing the width of the browser window on desktop browser.
It's part of a technique called responsive design.
http://www.w3schools.com/css/css_rwd_intro.asp
Today, i discovered The resolution CSS data types and i don't find a real usage for this. Has anyone ever used this functionality or any examples use case ?
One real-world example usage is when performing printing of web document:
#media print and (min-resolution: 300dpi) { ... }
The above media query will display given styles when printing DPI is set at minimum of 300dpi.
If you have some content that requires at least 300dpi (artist / photographer etc.) you could require the viewer to have at least a 300dpi screen. If the viewer does not, you can put out a message saying they don't have a screen with high enough pixel density to view the content.
Imagine you’re displaying images, via CSS, in a same-sized element:
.my-image {
background-image: url(path/to/image.jpg);
/* Exact dimensions of image */
height: 200px;
width: 200px;
}
This will look fabulous until you see this on a higher DPI screen. Incidentally, many smartphones and tablets do have higher DPI screens. With a media query, you can serve higher quality images.
#media (min-resolution: 72dpi) {
.my-image {
background-image: url(path/to/image-large.jpg);
}
}
Basically progressive enhancement. Users with lower DPI screens will run at you, hold you in their arms, and thank you for saving precious bandwidth.
I'm currently making a webpage and testing it in chrome works fine, but in Firefox - it is zoomed in.
This is because my DPI in Windows is set to 125%, and Firefox detects this, and adjusts every webpage accordingly.
However, my webpage is not meant to be viewed at such a zoom level, the images aren't made to be displayed that big, and hence it looked blurred/pixelated. The general layout of the page is messed up too, because everything is so big.
Now, this doesn't affect most people - as their DPI would be at 100% in Windows. However, I want it to be the same on all browsers.
I've searched and have found solutions as for the user to disable this "feature" - but I want to be able to disable it from my website - so it doesn't look wrong to the user in the first place.
e.g. one post says:
1) Type about:config in address bar
2) search for layout.css.devPixelsPerPx
3) change value of layout.css.devPixelsPerPx from -1.0 to 1.0
But that isn't what I'm looking for.
Is there any way to disable this from CSS/HTML/anything?
Thanks.
You could easily let your website address users with settings at higher zoom levels by including a media query like:
#media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
only screen and( -o-min-device-pixel-ratio: 5/4 ),
only screen and( min-resolution: 120dpi ),
only screen and( min-resolution: 1.25dppx ) {
body {
font-size: 1rem;
}
}
See this article for an extended explanation and why the cleaned up solution of the media query is sufficient for a broad browser support: IE9+, Fx3.5+, Opera9.5+, Webkit Browsers Chrome and Safari, both Desktop and Mobile.
Your could try something like this below. There are some caveats using this, but for some situations
it is worth using it.
#media screen and (min-resolution: 120dpi) {
/*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;}
}
Commented /*body....*/ example scale may be easier to understand yet worse, f.e. because
scaling should be done based on transform-origin css rule top left edge. Then things can be rendered better especially in Chrome.
if you use width: 125%, your RWD css should react differently to changing browser sizes on account of this from what you expected when screen ratio was 100%.
And you might reasonably accept this - this is RWD and the difference is 25%. But some people might want to adapt their css like this:
#media screen and (min-width: 1000px)
you also need to adjust:
#media screen and (min-width: 800px)
probably not 1250px but 800px like I did.
Edge, Chrome, FF do pretty good. IE 11 rendered the worst yet not hopelessly.
There are some problems in FF (not edge, chrome) when expanding select fields - solution css select.
Some borders can can be visible some dissapear on FF (maybe not edge, chrome)
There can be some issues not mentioned here like when you use carousel like owlcarousel on your page.
Yet I think it is greater probability to save more time with this example tested still too little.
You have to use exact scaling like 0.8 for 125% screen for your images to be rendered as sharp as possible.
I noticed that when switching to different dpi resolutions using ctrl +/i in a desktop browser and for sure using multitouch gestures in mobile browsers, a browser changes dpi too, so any solution using #media min/max-resolution may not work as expected. What is needed in css is to read system resolution not a browser. However as i see this resolution change doesn't take place like then when someone changes browser size manually or by rotating a mobile device.
Thank you Tatsuyuki Ishi for correcting some errors of my answer.
This frustrated me too, but luckily there is a solution.
Navigate to about:config. (Click accept on any warnings telling you to be careful with advanced features)
Search for layout.css.devPixelsPerPx and change its value to 1.0 and your issue should be fixed.
It was something implemented in Firefox 22.
I did this way, zoom works better than transform, it doesn't make fixed elements absolute:
#media screen and (min-resolution: 120dpi) {
body {zoom: 0.8;}
}
Set it to 1.25: that keeps the user interface larger, but resets the website to 100% pixel mapping.
My idea, assuming you start with a 200x200 sprite (meaning the double resolution image is 400x400) is this:
.sprite {
background-image:url('1x.png');
background-repeat: no-repeat;
background-size: 200px 200px;
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.sprite {
background-image:url('2x.png');
}
}
Live example: http://ov3rkill.com/temp/a5dii52/
I've struggled for a while trying to determine the best way to deliver higher resolutions images (previously I kept all images separate and sized them individually) and this frankly seems too simple.
Can anyone see any potential drawbacks? I'm toying with this for production use and so far it appears to work.
Since the media query for retina is being called at load it should override the original call to load the small image.
I've never witnessed the low-res image flashing in when using this method on retina displays.
Has anyone used JS to confirm that the smaller image loads on a retina display? I curious to know.