I am facing trouble in adjusting image size in mobile website. Unfortunately the image stretches the width of the screen. This issue comes up on blog on my website.
The blog software generates this code for images with declaration of the width/height which unfortunately I can not change. Therefore I am looking to overwrite them with CSS file.
<div class="leftbox">
<img src=".mysite.net/blog/media/Photo/Indian_tourists.jpg" width="400" height="267" alt="Indian tourists" title="Indian tourists" />
I tried using the following code to overwrite image size to fit the screen however it is not working.
I use this css code to overwrite floating image for the leftbox.
#media screen and (max-device-width: 640px) {
.imgLeft {
float:none;
margin:0;
}
}
This is the code to fit the image size in the screen.
.leftbox img {
height: auto !important;
max-width: 100% !important;
}
.content img {
width: auto!important;
height: auto!important;
max-width: 100%!important;
max-height: 100%!important;
}
For some reason, none of these codes are working on my website - http://www.easydestination.net/blog/. See a blog through a mobile browser to understand. How can I prevent the image from stretching the screen.
Basically, all you have to do is add a media query that will decrease the image size accordingly, try:
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
.leftbox img {
width: 400px;
height: 300px;
}
}
Then you could see this:
#media screen and (max-device-width: 640px) {
.leftbox {
float:none;
margin:0;
}
This is your solution, not
#media screen and (max-device-width: 640px) {
.imgLeft {
float:none;
margin:0;
}
So replace .imgLeft with .leftbox and you will have what you want.
Edit:
You will still have horizontal scroll, because of footer.
Remove margin: 0 -10px; from footer, so do:
#media screen and (max-device-width: 640px) {
.leftbox {
float:none;
margin:0;
}
.footer{
margin:0;
}
Related
How to handle Banner image responsive for different devices like small and medium mobile and tablet.?
Width:
.banner
{
max-width: 100%;
height: auto;
}
Media Query:
#media only screen and (min-width: 960px) {
.banner
{
width: 960px
height: auto;
}
#media only screen and (min-width: 1440px) {
.banner
{
width: 1440px
height: auto;
}
}
#media only screen and (min-width: 2000px) {
.banner
{
width: 2000px
height: auto;
}
}
#media only screen and (max-device-width: 480px) {
.banner
{
width: 480px
height: auto;
}
}
#media only screen and (device-width: 768px) {
.banner
{
width: 768px
height: auto;
}
}
You can use bootstrap framework. add img-responsive class to image
<img src="1.jpg" class="img-responsive" alt="image" >
It also depeds on your image, does the main content of your image occupies all the space?, is there anything you can cut? if that's the case, you can achieve it with object-fit, object-position, and the width and height will not vary too much.
If you can modify by yourself the image, use the img srcset property, where you designate which image should be displayed in different resolution breakpoints.
If none of previous options suits you, try with vmax, you'll have fun guessing the right measures, but once that it's done, you won't need too much media queries
Finally, there's the tedious way, setting various media queries.
I just got this theme and tried to import background image like the recommended size in the documentation but It seems something is odd
and these images have CSS problems in theme style.css
here is the link of my website
http://test.doublelift.kr
and here is the demonstration of the actual template
http://www.cssvillain.com/hungry/
the problem is abovious if you resize the window and see the image file shrink slowly instead of changing width based on px.
The image width is based on percentage on the template I've got, so I tried to make it to auto and write the style based on the height just like the original template
but It seems It is reading the style from somewhere else
no success on chrome's developer tool
I appreciate your help
#single-page-header {
height: 1000px !important;
overflow-y: visible !important;
}
.cycle-slideshow {
position: relative !important;
}
#single-pager-header .cycle-slideshow img {
display: block !important;
max-height: 1000px !important;
width: auto !important;
}
#media screen and (max-width: 1370px) and (min-width: 1025px) {
#single-page-header {
height: 720px !important;
}
#single-page-header .cycle-slideshow img {
max-height: 720px !important;
}
}
#media screen and (max-width: 1024px) {
.single-page-header-content {
overflow: hidden !important;
}
.single-page-header-content .cycle-slide-show {
overflow: hidden !important;
}
}
#media screen and (max-width: 1024px) and (min-width: 768px) {
#single-page-header .cycle-slideshow img {
max-height: 1000px;
}
}
#media screen and (max-width: 767px) {
#single-page-header {
height: 500px !important;
overflow: hidden !important;
}
}
#media screen and (min-width: 1025px) {
#single-page-header .cycle-slideshow img {
max-height: 1000px;
}
}
You may change the revolution slider setting for specific screen sizes options over there and then change the css according to your requirements.
This is the best way to handle i see.
I have got a Bootstrap carousel with 3 images (480x320px). Width of carousel itself set to 480px. How to scale carousel when you resize browser size?
.carousel{
width: 480px;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
Thanks!
You need to make the width of your .carousel class as 100%..
You need to make the below change to your CSS,
.carousel{
width: 100%;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
However if you want keep them at 480x320px initially and want to handle them while the browser is getting resized, then you will need to go for media queries.
/* For devices which are smaller than 960 pixels */
#media only screen and (max-width: 959px) {
//Write your CSS here.
}
/* For Tablets */
#media only screen and (min-width: 768px) and (max-width: 959px) {
//Write your CSS here.
}
/* For all mobiles */
#media only screen and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Landscape Size to Tablet Portrait */
#media only screen and (min-width: 480px) and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
//Write your CSS here.
}
Hope this helps!
It's possible that a simple width:100%; on the css, and apply img-responsive to it may fix it.
Let me know!
I am trying to make container fixed size 750px for all sized windows.
Here is HTML:
<div class="container">
<div class="thumbnail" >
..........<br/>
..........
</div>
</div>
and custom CSS:
#media (min-width: 1200px) {
.container {
width: 750px;
}
#media (min-width: 992px) {
.container {
width: 750px;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
But the problem is when I am resizing window from big to small at some point size of thumbnail is getting a little larger and then reverses to its initial size.
Here is a fiddle http://jsfiddle.net/Wy22s/718/ . You can just resize browser window or slide inner window in fiddle itself to left and then to right to reproduce this behavior.
I have tried to add another div with row class. Tried combinations with col-sm, col-md etc, but I can not manage to achieve desired behavior. How can I fix this so the container/thumbnail size stays the same?
you forgot to close the #media brackets.
#media (min-width: 1200px) {
.container {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container {
width: 750px !important;
}
}
#media (min-width: 768px) {
.container {
width: 750px !important;
}
}
.container{ width: 750px !important;}
.thumbnail{ width: 750px !important;}
I am using media queries as below
#media (min-width:100px) and (max-width:639px)
{
}
#media (min-width:640px) and (max-width:960px)
{
.box {background-color:red;}
}
#media (width:768px)
{
.box {background-color:green; }
}
#media (min-width:961px)
{
}
I want to specifically target some div element for screen 768 pixel so that it appears exactly as i want for example in general i want to overwrite css defined in #media (min-width:640px) and (max-width:960px) by css which is targeted for screen 768 #media (min-width:768px)
At present it is still showing me box as red while it should be red, I am not sure how css is complied i defined it after the second media query so that it will over right it.
How can i target certain element using media queries for specific devices
example :http://jsfiddle.net/X43Et/
Update:
I am not sure what exactly was wrong with it put i copy pasted #media (width:768px) { part from fiddle & it works in my actual page.
May be some invisible typo mistake..
This is just an example of media queries You would want to have your normal css before the media queries
#gallery-1 img {
width:375px;
}
#media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
#media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
#media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
#media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}
And when you're using media queries, you want to specify that you want the screen size so you use screen after #media. I hope this is what you were looking for and will help you!
Here is a small example script I made
<style>
#box {
width: 500px;
height: 200px;
background: yellow;
border: 1px solid #000;
}
#media screen and (max-width:1000px) {
#box { background: red; }
}
#media screen and (min-width:1000px) and (max-width:1200px) {
#box { background: green; }
}
#media screen and (min-width:1200px) and (max-width:1400px) {
#box { background: blue; }
}
</style>
<div id="box">
</div>
On JSFiddle the screen size isn't the whole screen, it's the small box the preview is in so you would need to make the sizes smaller to see the effect, here is a DEMO resize your screen browser to see the preview.