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;
}
}
I'm trying to set overflow-x: hidden on my react app, I have set it on the index.css body, it works on desktop screens, but not on mobile, I read the best way would be to add it to the parent element, but it doesn't seem to work on React, is there another way to do this?
The best solution is to wrap all your elements in a div for example and apply the overflow-x: hidden on it.
You can also try to use media queries and apply the overflow-x: hidden on the body of your app. For example:
#media screen and (max-width: 375px) {
body {
overflow-x: hidden;
}
}
So here is the removed link
It is in russian but it doesn't matter.
The thing is that bootstrap grid sometimes gets broken and I don't know why. Some times it looks normal but then I zoom page to 75% and it brokes.
I gueess it also brokes on different laptops screens without zooming.
Should I provide you some code or something else?
You can add a CSS clear "reset" every 4 items like this. This will work without setting a specific height.
#media (min-width: 992px) {
.category-wrap:nth-child(4n+1) {
clear: left;
}
}
http://codeply.com/go/ubs5zGee5g
Add height: 150px; to ur .category-wrap to fix it.
.category-wrap {
margin-top: 15px;
height: 150px;
}
I've a question, I'm trying to structure a site so that when it is in desktop mode a particular div which contains an img element is set to display:none;
When the screen size gets to 450px or less I would like to set the div to display:block and show it.
However, I'm having an issue doing so as the display:block never get's applied. I can do the reverese (display:block to display:none) . I'm guessing my issue is that I'm trying to apply a style to an element which does not exist on the page, if that is the case is there a way I can hide it, so that it takes up no space and show it when the screen is less than 450px?
Any help is much appreciated.
This is my CSS
#toplogo{
display: none;
margin-left: auto;
margin-right: auto;
}
This is my Media Query
#media screen and (max-width: 450px){
#toplogo{
display: block;
}
}
This is the HTML
<div id="toplogo">
<img src="/images/myimage.png"/>
</div>
Any help is much appreciated.
Your code seems just fine right now.
But I'd suggest mobile first approach, so the global style is aimed at mobile devices and later altered for bigger screens. Be sure to check what are you altering with your css media queries and check your code order so you are not overwriting media queries with your styling later in the 'global' css code
This snippet below wont work as intended if my media query will be placed at the top of css file, as it will be later overwritten - example of badly organized css media query
Working example
/* mobile first approach */
#toplogo {
display: block;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
.hey {
display: none
}
#media screen and (min-width: 450px){
/* hide block when window width is at least 450px */
#toplogo {
display: none;
}
.hey {
display: block
}
}
<div id="toplogo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>
<div class="hey">Hey, I'm bigger than 450px!</div>
http://jsfiddle.net/gfuunyak/4/
No need to apply any js.
Your css & media query are perfectly written; It works in my end; if not work in your end; then just add !important after display: block;
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%;}