I have the content of my page wrapped inside a mycontainer div.
The stuff should be aligned in the center of the page using a big device and left when using a small device.
I defined a margin and the with of the container, which works flawless on the desktop. However the media query is not used on smartphones. Where is my mistake?
.mycontainer {
margin: 0 auto;
width:50%;
#media only screen and (max-width: 767) {
margin:0 auto;
width:100%;
}
}
Edit: deleting margin: 0 auto in the media query does not change anything
#media ... should be on the root level. You'll see #media queries used within selectors like you have it above, but that is only possible within CSS pre-processors like Sass. The correct way in plain CSS is as follows:
.mycontainer{
margin: 0 auto;
width:50%;
}
#media only screen and (max-width: 767px) {
.mycontainer{
margin:0 auto;
width:100%;
}
}
You must have to mention proper size.
.mycontainer{
margin: 0 auto;
width:50%;
#media only screen and (max-width: 767px) {
margin:0 auto;
width:100%;
}
}
Related
I wanted to make responsive website, and I used media query.
One thing I don't understand is, iPhone 6 and LG G5 has different image size. What I figured out is many android device's image size is same.
Is this about IOS and Android problem? or my codding is wrong?
#media only screen and (max-width: 1920px) {
.btn{
width:70px;
height: auto;
}
}
#media only screen and (max-width: 764px) {
.btn{
width:50px;
height: auto;
}
}
#media only screen and (max-width: 364px) {
.btn{
width:40px;
height: auto;
}
}
Thanks for helping :)
Try with
I phone 6 media Query
#media (max-width:667px){ /* do something here */ } /*landscape view*/
#media (max-width:375px){ /* do something here */ } /*portrait view*/
#wrap {
background: white;
margin: 20px 15px;
padding: 10px;
}
#media screen and (max-width: 600px) {
#wrap {
margin: 0;
padding: 0
}
}
These styles seems to be working if I open new browser window and try to resize it. But if I refresh windows once then #media does not work. Then I need to close the browser and open it againe to open the same site to re-enable #media styles. What is going on here?
#media only screen and (max-width: 600px) {
#wrap {
margin: 0;
padding: 0
}
}
I find it works best when you have the word "ONLY" in the media query. Heres an example of the bootstrap media queries.
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
If that doesnt work try a hard refresh to clear your browser cache.
I'm trying to display a 100% width iframe on my WordPress site with an existing media query and I'm trying to figure out if I can target the iframe id to be unaffected by the original media query or combine it with a unique media query to get the full frame effect with the iframe only.
This is the original code
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 85%;
max-width: 85%;
}
}
and this is how I need it to function, but only with id tag #frame
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
}
}
I feel like this is a few seconds from complete, but I'm not sure how to finish it.
Your questions is not very clear. Then if your unique iframe ID is #frame, you can target it:
#media only screen and (max-width: 767px) {
/* your iframe */
.responsive #frame {
width: 100%!important;
max-width: 100%!important;
}
}
You can add more rules and you can target other selectors inside this media query too…
You missed a } at the end, as well as you can tag multiple elements onto CSS declarations, so you could do this if you wanted the #frame element to have the same properties, so your current code looks like this:-
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
}
} // <-- Notice the ending bracket that you missed off, I added that.
Then you could tag on another element with a , like so:-
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container, #iframe { // <-- see the , and the element?
width: 100%!important;
max-width: 100%!important;
}
} // <-- Notice the ending bracket that you missed off, I added that.
I know this is long winded, but I tried to go in depth rather than just giving you the example so you fully understood, hope I helped :)
I am learning the basics of responsive design, and started from scratch. I want a very simple page with no margin on the sides. Yet on an iphone, the site has still a fairly big white margin left and right. This is the CSS i have so far:
div#header_image img{
max-width:100%;
}
div#chart img{
max-width:100%;
}
div#Chart_place{
margin-bottom:2em;
}
#media screen and (min-width: 800px) {
div#container{
width:800px;
margin: 0 auto;
}
}
#media screen and (max-width: 800px) {
div#container{
width:max-width;
margin: 0;
padding: 0;
}
}
body{
font-family:Verdana, Geneva, sans-serif;
margin:0;
}
h1{
font-size: 1.5em;
margin-top:2em;
margin-bottom:2em;
}
ul{background-color:white;}
div#Feesboek_button{
}
input[type='text'], textarea {font-size:16px;}
What do I do wrong?
EDIT/UPDATE: Since my previous answer is not what you where looking for, use this:
html,body { margin:0; padding: 0; }
#container {
max-width: 800px;
padding: 0;
margin: 0 auto;
/*for ilustration purposes*/
background-color: #f13700;
}
#media (max-width: 800px) {
#container {
padding: 0;
margin: 0;
}
}
There you go, no margins on 800px or less.
See it here: http://jsfiddle.net/fCzT9/
Full screen: http://jsfiddle.net/fCzT9/embedded/result/
Previous answer:
In your CSS you have:
#media screen and (min-width: 800px) {
div#container{
width:800px;
margin: 0 auto;
}
This will be applied for every device with a screen that is at least 800px. You have declared the width with a fixed 800px and margin: 0 auto will center that container with 800px in the screen. Take into account that your device might have a high density screen (called Retina in iPhones).
The solution to your problem depends on how your layout is based, but try this:
#media screen and (min-width: 800px) {
div#container{
width: 100%;
max-width: 80em;
margin: 0 auto;
}
This way, the maximun width will be 80 times the base font-size, 16px, resulting in 1280px. As the width is declared with 100%, it will take the available width in the screen. If the screen is bigger than 1280px, it won't go beyond it since it's the max-width.
Note: If you are not using box-sizing: border-box, if you add padding to the class which already has width:100%, the padding will be added as an extra to the element's resulting width which will cause it to go beyond the max-width and in small screens you will be able to side scroll your pages = not good.
I would like to edit a couple things in the media queries of LENSA, a Wordpress theme. My edits do not work.
For example, I want to change this class:
.left {
width: 70%;
float: left;
}
So I write it like this:
#media only screen and (max-width: 480px) and (min-width: 320px){
.left {
width: 100%;
float: none;
}
}
There is no change when the screen is 480px....
Site: www.karaokesharksf.com
I think that #media statement might be over-complicating it. Why not try just this?
#media (max-width:480px) {
.left {
width:100%;
float:none;
}
}