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.
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 have modal that displays images. I set height of image in modal on 90% and width automaticly scales with it, so image is not stretched. But on the mobile phone I want the height to not be defined and I want to define only width to 100%. How do I make height of the image on small screen not defined? till now I have this code:
.image {
height: 80%;
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
/* make height not defined?!
}
}
Use height: auto; in mobile screens.
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
Currently I manage the CSS code differently based on screen size using and it works fine:
#media only screen and (max-width: 40em) {
my code
}
Now, what I'm trying to achieve is to have a piece of html code placed differently based on the screen resolution.
For instance my div id="news_box" would be placed in my header wrapper on desktop. Whereas on mobile phones, div id="news_box" would be placed in the footer wrapper.
How could I achieve that?
Many thanks,
As far as I know, there is no way to manipulate the DOM using CSS in that way, but you could use a JavaScript hack:
window.addEventListener('load', function(){
var width = this.innerWidth;
if(width < 400) {
document.getElementById('footer-id').appendChild(document.getElementById('news_box'));
}
});
Or maybe assign a class to it and have the element appear in both the header and footer (although, you would want to change the ID):
#footer-id .news_box {
display: none;
}
#header-id .news_box {
display: block;
}
#media only screen and (max-width: 40em) {
#footer-id .news_box {
display: block;
}
#header-id .news_box {
display: none;
}
}
With this you go through the diffrent resolutions. You have to change the values for your "news_box" for every different one.
e.g. For desktops you have a float:left box which will be not present in the css part for your mobiles.
example:
/* Tablets */
#media only screen and (min-width: 760px) {
#news_box { max-width: 760px }
…
}
/* midle screens */
#media only screen and (min-width: 980px) {
#news_box { max-width: 980px; float:left; margin: 0 auto; }
}
/* big screens */
#media only screen and (min-width: 1280px) {
#news_box { max-width: 1280px; float:left; margin: 0 auto; }
…
}
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 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;
}