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
Related
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 need help about a very specific problem concerning some of my "media queries".
To make text readable on mobiles, I wrote this :
html{font-size: 100%}
for normal devices, and this :
#media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){html{font-size: 190%;}}
for mobile users to be able to read a larger text.
I was really happy because it worked perfectly, and all the elements and texts displayed perfectly.
(Precision: all my font-size / and some of my paddings between elements are sized in "rem" unit.)
I had another div width some properties (but not font-size) on which I used media queries like this:
#media screen and (max-width: 700px){
.ftrsection{
float: none;
/* some other code */
}
The initial code of this div is :
.ftrsection{
float:left
}
but I decided to apply this media queries in other conditions, which are the same that for html{font-size: 190%} :
#media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){
.ftrsection{
float: none;
/* some other code */
}
}
And I actually can't understand why, but when I apply that previous code, some of my texts are like twice bigger... Can someone help me please ? That's very anoying.
Thank you.
I have a logo in my header that's too small. I found this piece of code where I can increase the size but I only want it to apply to computer screens and not to mobile or tablet. The code is:
.site-title img {max-width:100%; height:auto}
.site-description {display:none}
I want to change the 100% to 200% but only on computer screens.
Can somebody tell me which code makes that happen?
Responsive Web Design, using media-queries:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
Media Queries are used to apply CSS rules to only matching devices. Specify a max-width or min-width to apply the style rules to.
#media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
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 can't seem to get my media queries to actually display.. I'm trying to eventually get it so that my text will re-size based on browser size, but I'm just trying to do a test run to see if it will even work.
I'm trying to have it so that when the browser resizes to 1200px in width the page background turns red. Here's my css:
#media screen and (min-width: 500px) and (max-width: 1200px) {
.main {
background-color: red;
}
}
and here is my stylesheet link:
<link rel="stylesheet" media="media screen and (min-width: 500px) and (max-width: 1200px)" href="tek_bigscreen.css">
I also have another stylesheet with no media queries in it linking to the page:
<link rel="stylesheet" type="text/css" href="tekstyle.css">
Any idea why the media query won't work? Also any insight as to how to properly resize the text would be appreciated. Thanks!
I'm not entirely sure why your background is not turning red. But the best way I've found to properly resize your text is to use ems.
Something like:
body {
font-size:100%;
}
h1 {
font-size:2em;
}
#media only screen and (min-width:500px) and (max-width:1200px) {
body {
font-size:15px
}
}
font-size:100% will make 1em equal to the browser's default font size, usually 16px, and when you reduce the font size on the body tag, everything that is set in ems inside the body will be proportionally reduced in size.
Edit: Also, and this is just a suggestion because it's the way I do it, but instead of putting the media queries in the link tags. Just keep all of your media queries inside the CSS file and use this poly-fill to make them work with old IE.
There's no need to include the media attribute in the style sheet link if you have #media in the style sheet itself. Indeed, it may be causing an error—I'm not sure. Perhaps try putting your code into the regular style sheet and see what happens, or just put the color declaration in the first style sheet without the #media wrapper.