I try to load my resizes images using HTML srcset and sizes, but the browser still loading only the larger image.
My HTML looks like that:
<img
srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
sizes="(min-width: 651px) 146px, (min-width: 361px) 121px, 97px"
src="/logo-146x30.jpg"
alt="alt text"
/>
I have also try to opposite media queries like:
<img
srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
sizes="(max-width: 360px) 97px, (max-width: 650px) 121px, 146px"
src="/logo-146x30.jpg"
alt="alt text"
/>
In both cases, I always get the image /logo-146x30.jpg.
I have tried re-load the browser in scaled downsize, but either way, the only loaded image is the /logo-146x30.jpg.
Also the viewport meta is like that:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
>
Do you see anything wrong with what I have done so far?
Instead using srcset and sizes, use CSS media queries. This is from the top of my mind, but try somenthing like (this is based on your first image):
HTML:
<div class="image" />
CSS:
#media screen and (min-width: 651px) {
.image {
background-image: url(/logo-146x30.jpg);
}
}
#media screen and (min-width: 361px) and (max-width: 650px) {
.image {
background-image: url(/logo-122x25.jpg);
}
}
Remember to use min-width and max-width in #media so it won't be overriden.
Try using min-width and max-width in your solution also.
Related
the demo: https://codesandbox.io/s/bold-cloud-zsnss?file=/src/styles.css:937-1010
in the css file I have a media query that targets any device which has a width under 500px
#media all and (max-width: 500px) {
.wrapper {
display: flex;
}
}
However it didn't have any effects on the
<div class="wrapper">
A couple people are saying it is working fine. I have attached a screenshot to show that it is in fact not working.
I cannot figure out where it went wrong.
Another question is, what is the different between
#media all and (max-width: 1000px) {
}
and
#media (max-width: 1000px) {
}
I have seen both in examples of media queries.
The media query doesn't apply because the effective browser width is not small enough.
Add
<meta name="viewport" content="width=device-width, initial-scale=1" />
… to the <head>.
Without it mobile browsers (and tools which simulate them) will assume the design is intended for desktop browsers only and will zoom out to simulate having a desktop width screen.
See MDN for further reading.
I have an image that is a link also at the top of my website, like a banner, and when I go on my mobile to look at it, it stays the same size. How do I make it smaller for mobile devices?
Assuming the rest of your website is responsive you can just add a width of 100% to the image.
So for example, if your image had a class of 'my-img'
.my-img {
width:100%;
max-width:600px;
height:auto;
}
Or if you wanted to do it inline
<img src="" class="my-img" style="width:100%;max-width:600px;height:auto" />
probably it allready is responsive, even if you didn´t notice. you must have something like this in your code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add media queries on your code like:
#media screen and (max-width: 600px) {
#logo{
width: 100%;
height: auto;
//in case you want a max-width-> max-width: 200px;
}
}
1. Use Bootstrap js and Bootstrap CSS in that use media queries according to
screen
2. width do the coding or use class xs sm md lg.
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Please make sure that you have the following tag in your web-page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then add image like following
<img src="your image path" alt="" class="heroImage">
<style>
.heroImage{width: 100%;max-width: 100%;}
</style>
I want to hide a div on all devices with a screen resolution that is less than 1024. This is the div that adds the space after 3 images:
<div class="page-banners clearer"> </div>
And this is the page:
http://m.theseolounge.co.uk/
and this is the code I am using:
#media only screen and (max-device-width :1024px)
{
.page-banners
{
display: none !important;
}
}
What am I doing wrong?
Make sure you have a <meta> viewport tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Don't use !important for the style, and use max-width instead of max-device-width, like this:
#media only screen and (max-width:1024px){
.page-banners {
display: none;
}
}
I have placed
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
in my header. I want a specific css for screen width 768px but my div with class price-tag is not taking style from
#media only screen (min-width:768px) {.price-tag{left:180px;}}
If I write
#media (min-width:768px) {.price-tag{left:180px;}}
it takes the style and applies it to all screen width. Am i doing this in wrong way ?
You need to use and.
This isn't valid:
#media only screen (min-width:768px)
It should be:
#media only screen and (min-width:768px)
Applying to 768px specifically:
If I've understood your comment correctly you'd like to apply styling to screens specifically at 768px wide. No lower; no higher. While I can't quite picture why such code would be useful or practical I can show you how to do it.
Combine min-width and max-width using the same value:
#media only screen and (min-width: 768px) and (max-width: 768px) {
I have this simple media queries:
#media screen and (min-width: 1440px) and (max-width: 1600px) {
body {
font-size: 14px;
}
}
But this just doesn't work. My screen resolution is 1600x900, so it should work, I think. What the hell is wrong here? I put this on the end of .css file, I added
<meta name="viewport" content="width=device-width,initial-scale=1.0">
to the HTML file... I don't know what else should i do to make this working.
min-width and max-width refer to the width of the window, not of the screen. #media screen means that the styles apply to the "screen" medium (as opposed to the "print" medium for example).
To target the resolution, you can use min-resolution and max-resolution.