I have this CSS for desktop version:
div.bottomnav_table_left {
width: 50%;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
display: table-cell;
}
div.bottomnav_table_spacer {
width: 10px;
display: table-cell;
}
div.bottomnav_table_right {
width: 50%;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
display: table-cell;
}
And this CSS for a small window version:
#media screen and (max-width: 700px) {
div.bottomnav_table_left {
width: 100%;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
float: left;
}
div.bottomnav_table_spacer {
display: none;
width: 0px;
height: 0px;
}
div.bottomnav_table_right {
width: 100%;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
float: left;
}
}
(I have tried limit the CSS code examples to the core. I hope that is okay.)
On IE, Opera, Chrome and FireFox I can resize window up and down and it works well. However, on Safari it will work on the initial size, but resizing the browser window will only work once.
If you resize Safari back (e.g. small to desktop to small) it no longer works. It does not place the DIVs on top of each other, instead they are placed next to each other horizontally.
Related
I made a Netflix clone and I was working on making it responsive. It was working fine and giving the desired output in VS Code but then I uploaded it to a live website to check if it is working then, but the responsiveness was no longer working as expected.
Below is the media queries code >>>>
#media screen and (max-width:768px) {
.logobtn img{
height: 30px;
}
img.dropdown{
height: 10px;
width: 15px;
}
.btn:nth-child(1){
margin-right: 10px;
}
.content{
/* padding: 0px; */
width: 330px;
margin-left: -20px;
}
.content h1{
font-size: 30px;
line-height: 37px;
padding: 0;
}
.content h3{
padding: 0;
width: 375px;
font-size: 24px;
}
.form{
flex-direction: column;
position: relative;
height: 40px;
}
.email{
margin-left: -155px;
/* margin-right: -100px; */
padding-right: 0px;
}
.submit{
position: absolute;top: 50px;
/* border-radius: 10px; */
}
.row{
flex-direction: column;
}
}
Im so new in CSS and trying to fix the following code..
I want a simple thing where the screen size is smaller than 400 change the image size..
it should work but it doesn't..
I tried to make
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
}
}
Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
}
}
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
I think this will work.
#media screen and (max-width: 500px) {
.left__img2 {
max-width: 10px;
}
}
Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
background-color: red;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
background-color: yellow;
}
<div class="left__img2"><div>
I've recently discovered media queries as a tool, so don't have much experience (seconds day, really).
I have a #logo that uses a margin-left of 7% of the width, but the rule that changes it to 25px doesn't work for some reason. Interestingly, the rest of the particular media query works fine, just the logo one doesn't. What could be the problem?
#media (max-width: 1320px) and (min-width: 105.1px){
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 25px;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 7%;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
Your media query needs to go after the normal set of rules for #logo for your query to override your default rules. You can remove your important flag once you do that.
You need to clean up your media query a bit, as there is some redundancy. Also, you need to decide how you want to structure your CSS, as in mobile first approach or large screen then target down for smaller screens. In your code there isn't really a good reason to use !important as structuring the initial CSS will correct the issue.
Also in your example, a min-width:105 is sort of useless as mobile screens have a min-width of roughly 320px (I'm speaking generally). Here is how you would have it set up if you want all your styles to apply until the screen width goes wider than 1320px.
Here's a jsfiddle as an example: http://jsfiddle.net/disinfor/t9rq36mn/
Note, I changed the (min-width) in the fiddle to 600px so you can actually see it working. You can also change min-width to max-width in the fiddle to see it work in reverse.
MOBILE FIRST APPROACH:
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 25px;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
#media screen and (min-width:1320px) {
#logo {
margin-left: 7%;
}
}
LARGE SCREEN FIRST APPROACH:
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 7%;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
#media screen and (max-width:1319px) {
#logo {
margin-left: 25px;
}
}
Basically, you only need to change the property of the element that actually changes once you reach that media query parameter (min-width, max-width, min-device-width,max-device-width, etc.)
Hopefully that helps clear things up.
I am trying to have a page divided in 3 columns. The one in the middle will contain the "content" while the other ones will contain a menu and, for this reason, I'd like to have the lateral columns fixed while the user (vertically) scrolls the page.
The code works on Chrome and on Internet Explorer but on Firefox the column on the left collapse over the column on the right and I can't figure out why.
Here's the code (if you open it on different browser you can notice the difference):
http://jsfiddle.net/mattyfog/6rn3j/4/
HTML
<div id="left-col">LEFT</div>
<div id="main">MAIN</div>
<div id="right-col">RIGHT</div>
CSS
#main {
width: 50%;
display: inline-block;
float: left;
padding-left: 25%;
background-color: grey;
}
#right-col {
float: left;
background-color: yellow;
}
#left-col {
float: right;
background-color: blue;
}
#right-col, #left-col {
position: fixed;
width: 25%;
min-width: 140px;
margin: 0px;
display: inline-block;
}
Thank you guys
I'm not sure why Firefox is acting strange but I think the correct way to do what you want is something like this:
I removed float from #main and changed its padding-left to margin-left and now it's working in on browsers (fiddle).
#main {
width: 50%;
display: inline-block;
/*float: left;*/
margin-left: 25%;
background-color: grey;
}
#right-col {
float: right;
background-color: yellow;
}
#left-col {
float: left;
background-color: blue;
}
#right-col, #left-col {
position: fixed;
width: 25%;
min-width: 140px;
margin: 0px;
display: inline-block;
}
Check out this fiddle in IE9 and try resizing the browser. As you can see the error message doesn't work properly. It works fine in Webkit, Firefox and Opera so far.
This is my current code:
#media screen and (max-width: 480px) {
#my-form label {
text-align: left;
display: block;
padding-bottom: .3em;
}
#my-form .error {
position: inherit;
display: inline-block;
left: 0;
top: 100%;
margin-top: 4px;
width: 200px;
}
#my-form .error:after {
content: "";
position: absolute;
top: 0;
margin-top: -16px;
left: 50%;
margin-left: -8px;
border-style: solid;
border-width: 8px 8px 8px 8px;
border-color: transparent transparent #313b53 transparent;
}
}
What could be the problem? I can't seem to figure it out. IE9 is the only one that doesn't work as expected...
I fixed it. It seems like there were two things causing problems with IE. First I moved the default code for errors to another another media query for 481 and more:
#media screen and (min-width: 481px) {
#my-form .error {
position: absolute;
width: 150px;
right: -171px;
margin-right: -20px;
top: 50%;
}
}
And then I used floats instead of inline-block. Seems like IE still has problems with inline-block:
#media screen and (max-width: 480px) {
#my-form label {
text-align: left;
display: block;
padding-bottom: .3em;
}
#my-form .error {
float: left; // Here
clear: left;
top: 100%;
margin-top: 4px;
width: 200px;
}
}
Demo: http://jsfiddle.net/elclanrs/BMz9U
i have fixed this issue by adding a js file respond.src.js in the header