All my images should be responsive so i defined image width 100%. But most of the pictures are getting too big on a bigger screen than the iPhone.
These images don't need to have full height so i want them to be stripes.
What you seem to be looking for are css media queries.
As an example:
img {width: 50%;}
#media only screen
and (max-device-width : 767px)
{
img {width: 100%;}
}
This will make your images 50% width on a desktop, but on a mobile device with a screen of 767px or less the images will be 100% width.
Related
I am using a Bootstrap jumbotron to display list results. This jumbotron uses an image as the background which is set to cover 50% of the width and 100% of the height initially. Please find below the style code implemented in the HTML div of the jumbotron:
style="width:80%;max-width:750px;min-height:220px;
background:url({{ property.properties_pictures.property_image1.url }});
background-size:50% 100%;background-repeat:no-repeat;
list-style-type:none;border:solid;border-width:1px;border-color:#d6d0ca;"
I would like to inverse the coverage of the background image to 100% of the width and 50% of the height for devices that have a screen width of less than 500px.
I tried using media queries with no luck:
#media (max-width: #screen-sm-min)
{
.jumbotron
{
background-size: 100% 50%;;
}
}
It would be great if anyone could help on this.
Thanks.
You should use your media queries in this format--
#media only screen and (max-width:500px){
.jumbotron
{
background-size: 100% 50%;;
}
}
Hope this helps!
I have a website. The content is set to 960px wide and devices that are wider than that see the solid colored body element. I am trying to add a background-image to that body, but I only want it to load on devices that can see the body, so that other devices don't need to waste time loading it if they can't see it.
For example, my viewport meta tag is set to a static 960px (I know it's not recommended), so phones won't be able to see the body because they are automatically scaled to 960px in width.
How can I display the background-image on only devices that are more than 960px wide, using the #media in the CSS?
How can I display the background-image on only devices that are more than 960px wide, using the #media in the CSS?
Do you mean this?
body{
background:url('http://mobilemarketingwatch.com/wp-content/uploads/2016/01/Is-Google-Searching-for-the-Next-Big-Thing1.jpg');
}
#media only screen and (max-width: 960px) {
body{
background:none;
}
}
DEMO
If you resize your browser the body background image will gone.
I'm using CSS #media to adjust my website depending on the screen resolution
Whether i switch to a resolution with the height of 768 or 720 it will still act as if i'm my screen resolution has a height of 720px
.group-container{
min-width:1210px;
max-width:70000px;
width:1210px;
margin-left:2.5%;
height:87%;
margin-top:1%;
}
#media only screen and (max-height: 768px) {
.group-container{
margin-top:150px;
}
}
#media only screen and (max-height: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
For the first media query you should use also a min-height set to 720px and max-height set to 768px
And if you try to use (max-width: ...px) instead?
#media only screen and (max-width: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
This way you won't rely on your height, but the width of the window it's being displayed on. example:
your resolution is 900x1600.
Resizing the height of the window wouldn't have much effect. If you where to use max-width, that way if you resize to 600x1200 for example, it would have more effect.
EDIT: The reason why I think you should use is, the height doesn't really matter when it comes to responsive design. The height might change but it will always be scrollable, so using the height will have little to no effect.
The width of the device DOES matter, the width is important when it comes to responsive design (assuming your website isn't horizontally scrollable). It would be better to create query's based on the width of the display, then to rely on height for that matter.
our site is not responsive, and one of the requirement is to render the images on mobile devices so they fit the screen and we are running into a problem, becasue different sized images are uploaded to a web page
And this is what our CSS code looks like
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: 214px !important;
}
}
So this works fine for 600 X 400 images, because the aspect ratio is the same. However, when we have a different size images, say 400X578, the above CSS code won't work and the images look really stretched and distorted.
What is a good solution here, since I am no front end Dev.
Any help is appreciated.
Thanks
Modify your CSS to the following:
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: auto;
}
}
This will allow you to specify the width of the image and the height will automatically adjust itself proportional to the width.
Is there a pure css way to make images fit in a row across a container with variable size?
I have a row of images I want to fit.
There are 2 ways I know of to fit images in a row. If I set the image width as a percent ie, width: 20%, then if the screen is wide then the images becomes very large or if the display is small the images becomes very small. If I set the images as absolute width ie, width: 100px;, then the images are shown with the size I want it to. But the container isn't totally filled and there's unseemly left over space at the right.
Right now I'm using javascript to adjust the percentage width based on the user screen width.
Is there a pure css method of controlling the way that images are shown, such that if the screen is wide more images fit into a row rather than blowing them up but still ensuring that all the images fit snuggly into the container with no left over space.
you can add float property to each of your image container (float: left). see http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
I'm using media queries like this:
#media all and (max-width: 900px) and (min-width: 600px)
img
width 50%
#media all and (max-width: 1050px) and (min-width: 900px)
img
width 33.3333%
#media all and (max-width: 1280px) and (min-width: 1050px)
img
width 25%
#media all and (max-width: 1910px) and (min-width: 1600px)
img
width 16.6667%
I think there's a better answer.