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;
}
}
Related
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
I have a responsive site which displays form buttons at the standard width at all monitor sizes, down to 481px, where after the width of the button is set to 100% of the containing div.
This works fine in all modern browsers with the following code:
#media screen and (max-width: 480px)
.button {
width: 100%;
}
#media only screen and (min-width: 769px)
.button {
width: initial;
}
As the CSS is mobile-first, "width: initial;" is resetting the button to the original size, exactly as I would like.
However IE8 doesn't recognise this, so it thinks "width: 100%;" is the button's width for all monitor sizes, causing the button to always span the page width. How would you get around this other than giving an absolute pixel value?
IE8 does not respect media queries you will need a polyfill script to add this functionality.
https://github.com/scottjehl/Respond
I have a problem creating a responsive image (the cloud) using CSS. I want that cloud to be fixed.
This is my HTML:
<div class="r-img" style="background:url(./img/cloud.png); width:587px; height:330px;">
</div>
This is my css:
.r-img img{
top:30px;
right:5px;
overlow:hidden;
display: block;
}
I want the page to look like this:
http://imgur.com/NAsDsNy
When I use a lower resolution or CTRL + Scroll I see this:
http://imgur.com/OHSAvrE
I just want the image to stay fixed when someone use ctrl + scroll or when someone access the page with a lower resolution than mine. My resolution is 1920 x 1080.
You can try to use background-size with some percent value (e.g. background-size: 30%).
DEMO
Percent value here is a key: when using it sets background size relative to the background positioning area. When browser window zoomed this area changes accordingly. So visual effect is that image size is the same no matter what zoom level is.
Place the image inside a container whose dimensions are defined and then place inside the image and maximize it`s size to 100%.
img { position:absolute; max-width: 100%;}
That way, the image size will always change, but the changes will respect the dimensions and proportions of the container (parent). This is called image resizing under the scope of RESPONSIVE DESIGN.
To assign dimensions to the image container, use fluid grid dimensions, like:
.2_cols {width: 153px;}
or if want a 100% width:
.12_cols {width: 920px;}
Other method is to use a background image:
body.cloud {
background: url(/img/ban_home.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute; z-index: -1;
}
Everything is funnier with #media (into your css):
#media (max-width: 767px) {
// Your css (of the image) when you are on mobile
}
#media (min-width: 768px) and (max-width: 991px) {
// Your css (of the image) when you are on tablets
}
#media (min-width: 992px) and (max-width:1199px) {
// Your css (of the image) when you are on medium screen
}
#media (min-width: 1200px) {
// Your css (of the image) when you are on large screen
}
This could help you to handle your image better.
Just configure your size wherever you want:
.r-img {
width:587px;
height:330px;
...
}
Check out http://www.w3schools.com/cssref/css3_pr_background-size.asp for sizing a background image. Zooming into the page will make everything bigger, but people on smaller screens will see the image as the exact same size as you unless you use percentages on your widths and heights.
To test different resolutions instead of zooming in and out, just change the browser window to different widths and heights. Firefox and IE11 now have responsive tools to change the browser window to the different resolutions of screens which you can use to test your websites.
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%;}
I'm testing out my CSS at http://flexibletheme.tumblr.com/ and trying to make the website responsive to a small screen size.
Only problem is, I can't get the padding to work on aside element. To reproduce the problem resize your browser window till the sidebar stops floating to the right (this will appear at the bottom, once the screen size is below width of 600px.
All the CSS is inline for now, to view the css. Part relevant to the resizing starts at:
#media screen and (max-width: 600px) {
Edit: This image shows the padding in purple (via Firebug) not displaying properly:
What about the padding isn’t working? Chrome’s web inspector seems to confirm that the padding is there as declared.
I do notice that your <aside> element ends up positioned outside the left edge of your layout, but that’s because it’s floated right and has width: 100%; assigned to it.
from reading your code in Chrome's Inspector, I can see that the following rule is applied when you minimize the screen
#media screen and (max-width: 600px) {
#content {
width: 100%;
}
aside, #title, #menu, .photo img, .asker {
width: 100%;
}
}
This is why you are having the problem. Find your media query in your CSS and sort it out there. :)