I am using wordpress to develop a website called littleboyauciton.com. I added an image at the top right of my header, and added css code:
img.sslsecure {
max-width: 40%;
min-height: auto;
}
This is displayed normally on my computer screen. But when I use chrome to simulate the ipad screen, the picture cannot be displayed on the header.
I added the css code corresponding to the screen in css, but it still has no any effect:
#media only screen and (max-width: 768px) {
img.sslsecure {
background-attachment: scroll;
}
It is doing exactly what it should do, it takes up 40% of the width of it's parent div. When you inspect the element, you can see that the parent actually almost takes up 100% of the screen width.
You can fix this by adding extra css for different screen sizes. This can be done in the theme you are using.
Or you can add extra css and write a media query yourself.
See:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Edit.
I just saw that you've tried adding a media query. You did it right, yet you have to change the width of the element or the parent element. background-attachment: scroll; only applies to elements with a background-image. Since this is an img, it doesn't apply to this element.
Let'say, I don't want the image to be wider than 100px:
#media only screen and (max-width: 768px) {
img.sslsecure {
max-width: 100px;
}
}
In a mobile view, the video element is resized according to the video aspect ratio. But the captions settings box is too large and some options cannot be seen.
Is there a way to lower that box or change it's height with css?
Pic that demonstrating the issue
you can do that by adding this to your code :
#media screen and (max-width: 600px) {
.intendedObject {
height: 128px; //Desired value instead of 128px
}
}
In (max-width: 600px) part, 600px is the maximum size of screen you want. If it be less 600px, the style written will be applied.
Is there a way to scale down/up all elements including texts, images, etc. depending on the browser width? It is like 'zooming out' using your browser just to avoid the browser horizontal scrollbar.
You can resize images and video with just this css rule.
img, video { max-width: 100%; }
For text, you can work with em's to adjust to the viewport and resolution. You should also set the font size on the html and body element
html {
font-size: 100%;
}
body {
font-size: 1em;
}
/* Adjust the font size here to upscale the font when you've resized the page to 700px */
#media screen and (max-width: 700px) {
html { font-size: 110%; }
}
If you're actually thinking about literally zooming in/out for certain viewports, just use media queries. Like this:
#media all and (max-width: 700px) and (min-width: 400px) {
/* some funky stuff */
}
EXTRA
To smoothen the transition between different viewports, use this css property on the html tag
transition: all 1s ease;
Yes, though it requires JavaScript and doesn't work with all browsers, only those which support CSS zoom (which I know at least Firefox does not). How I do it, is say the standard non-zoomed page width is 1024, I use jQuery with the line
$("html").css("zoom",window.innerWidth/1024);
every time the window is resized (using window.onresize). The site I'm using it on is still non-public so I can't show you the example, but it works pretty well.
I'm setting breakpoints in css using '#media only screen and (max-width: 500px)'.
When I set it to change colour upon reaching the breakpoint it works:
#media only screen and (max-width: 500px) {#container{color:black;}}
the container div does go black when I resize the browser, however when I set the breakpoint to change the margin of the div the breakpoint is not triggered.
So when I set the query to:
#media only screen and (max-width: 500px) {#container{margin-left: 0px;}}
nothing changes when the screen is resized in exactly the same way as when I resized when testing for colour change.
the main css file sets #container at margin-left; 18% and when this is changed manually to 0px it does shift the document all the way to the left of the viewport
I've tried various different styles and html elements but colour changes seem to be very reliable, they work in pretty much any combination, but resizing divs or repositioning does not seem to work at all. Why might this be?
Answer:
I was putting my #media query at the head of my css file , when I moved it to the foot of the css file it now resized. It leaves the question though, why did it change the colour at the head of the file but not resize?
You can change margins just as reliably as you can background colours through media queries.
See this for example:
http://jsfiddle.net/Q55MC/
#container {background: blue; margin: 50px; width: 200px; height: 200px;}
#media only screen and (max-width: 500px) {
#container{background:black; margin: 0px;}
}
Try creating a demo so that people can have a better idea about what your trying to achieve.
It looks like the 18% style is taking precedence.
Try to override it with this:
#media only screen and (max-width: 500px) {#container{margin-left: 0px !important;}}
Would the #viewport meta declaration help?
Elegantly Resize Your Page With the #viewport CSS Declaration
be aware that this post uses #-viewport when it should just be #viewport
img {
max-width: 100% !important; /* Set a maxium relative to the parent */
width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
height: auto; /* Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
display: block;
-ms-interpolation-mode: bicubic;
}
The above CSS is taken from Twitter Bootstrap which allows for responsive images. The only problem is this has no effect in Firefox and IE.
In the following case:
<div class="row-fluid">
<div id="logo" class="span4">
<img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" />
</div>
</div>
http://dev.netcoding.net/lowsglass/about-us/ - Here is a page showing the problem.
In Firefox or IE, shrink the page to below 432px and you will see that the images do not follow max-width anymore (while above 764px they do).
How can I fix this – without using image containers – to make responsive images work in Firefox and IE?
I've struggled a lot with Firefox / IE and max-width, specifically when on elements of display: inline-block. I use the CSS only solution below to add my fixes.
// Styles for Firefox
#-moz-document url-prefix() {
#logo img {
width: 100%;
}
}
// Styles for IE10
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#logo img {
width: 100%;
}
}
Firefox fails to scale images with max-width/height if width/height is not defined. So there are two ways.
1. Set width and max-width:
width: 100%;
max-width: 100%;
2. Use max-width and max-height in vw and vh:
max-width: 90vw;
What means the image will have max 90% of visible width. Have fun!
Instead of width:auto, try width:100%.
Best,
Cynthia
Actually, the problem isn't the img tag being affected, but the span* containers. When Bootstrap Responsive gets to a certain point, it turns off floating, and sets width to 100%. When that container pops back to 100%, the child within (your img tag) does exactly what you told it to do, which is expand to max-width of 100%.
Look at this from responsive.css... above the declaration in the stylesheet, you'll see this:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
}
That is what is causing the img to "resize" ... its container no longer shrinks past a certain point, due to the way Bootstrap's responsive styles are set up.
To block this, you could either modify the Bootstrap stylesheet (in which case you will have to redo the change anytime you want to update your Bootstrap files), or you can, in your own stylesheet, do something like the following:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: inline-block;
float: left;
}
That will put the floating back, however, you're still left with width as an issue, as the default Bootstrap style at that screen-width is trying to set width to 100%. You could try setting width:auto and then hopefully the widths for each specific span-step (.span1, .span2, etc.) will be allowed to take over, but you'll really have to test it out to see what is going to work best for your situation.
Bumped in similar problem after implementing large amount of site design using Bootstrap framework and only Chrome for debug... Biiig mistake © :) It appeared, that cool fluid Bootstrap styles didn't work for images in IE and Mozilla at all. All images were not resized and had original width, sometimes much wider than I've expected to see...
I had a lot of similar places with two columns of divs - span6 for left column and span6 for right one (those are styles for fluid Bootstrap grid). Sometimes in those columns images were placed between text lines, and as you see, images didn't resize well in IE\Mozilla and all of the cool design became not good at all :(
After googling and trying some advices from github I've decided to use jQuery :) I added class to column container (imageContainer for fluid span12 row), and added classes 50perc for images which I needed to resize properly (size of each image should be 50% of container's size). And here's the code:
$(function(){
var cont = $('.imageContainer');
$('.50perc').each(function(i, el){
$(el).width(cont.width() / 2);
});
p.s. Actually it will be much effective to use this function in window.resize event handler :)
Ran into the same problem and still haven't found a fix or CSS only hack, except for forcing width: 100% at small browser sizes, when the natural width of the image will usually be larger than the width of the page (here I've assumed I don't have any images narrower than 480px):
img
{
width: auto;
max-width: 100%;
height: auto;
}
#media screen and (max-width: 480px), only screen and (max-device-width: 480px) and (orientation: portrait)
{
#-moz-document url-prefix() {
/* Firefox doesn't respect max-width in certain situations */
img
{
width: 100%;
}
}
But that will still force images that have naturally smaller widths to get blown up, which is bad. So at that point, if Javascript is feasible or already in use, I would add this to hit every image:
PSEUDO CODE:
$('img').css('max-width', this.actualFullSizeWidth + 'px');
...which should override the CSS max-width rules, and guarantee the image doesn't get larger than it's actual width.
Responsive images for Firefox, IE, Chrome. Simple solution that works in Firefox
<div class="article"><img></div>
.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}