I have this styling to an elenemt:
.width {
width: 1024px !important;
margin: 0 auto;
}
I want to disable the "width" completely OR change it to this:
#media (max-width: 1280px){
.width {
min-width: 100% !important;
}
When I run it like this, although I switch the screen resolution, it still uses the global style.
I prefer disabling it though.
Thanks.
To disable the width then do
#media (max-width: 1280px){
.width {
width: auto !important;
}
}
I would suggest removing the !important from both places
.width {
width: 1024px;
margin: 0 auto;
}
#media (max-width: 1280px){
.width {
width: auto;
}
}
In your original code, there is a missing } not sure if it is a typo or not
If you want min-width then do, assuming you removed the !important. But you can just set width: 100% and there is no need to do min-width
#media (max-width: 1280px){
.width {
width: auto;
min-width: 100%;
}
}
Check this in a browser and resize the window to see the changes... hope this help you!!!
The HTML
<div class="width">test</div>
The CSS
.width{
width:100%;
border:1px solid red;
margin:0 auto;
}
#media only screen and (min-width:1024px){
.width{
width:1024px;
border:1px solid blue;
}
}
Related
If you look at the code, there are two media queries, the one with a max width of 1024 pixels seems to work fine and apply all the styles but the one with a max width of 470 pixels won’t work or apply any of the styles. Why is this happening? Any help appreciated.
https://codepen.io/FreemanW/pen/QWwRBMP?editors=1100
#media (max-width: 470px) {
.banner {
align-items: flex-end;
}
.title-box {
width: 100%;
}
.container {
width: 100%;
}
}
``
Everything within 470px is also within 1024px, so perhaps there's some sort of conflict going on there.
You could try using max-width: 470px and min-width: 471px, thus dividing your options into non-overlapping values :)
Be sure that the media-query with the smaller screen-width is at the end.
That works:
#media (max-width: 1024px) {
h1 {
color: blue;
}
}
#media (max-width: 470px) {
h1 {
color: red;
}
}
<h1>TEST</h1>
That doesn't works:
#media (max-width: 470px) {
h1 {
color: red;
}
}
#media (max-width: 1024px) {
h1 {
color: blue;
}
}
<h1>TEST</h1>
I am trying to make the overflow of an image appear to be hidden upon a certain screen size, but I cannot find the solution of why this extra spacing appears. Here is the html an css I have so far. I am trying to do this because the image would appear too small.
Bootstrap solutions are also welcome too.
.aboutsplash img{
width: 100%;
height: auto;
margin: 0;
}
#media (max-width: 769px){
.aboutsplash img{
overflow: hidden;
width: auto;
max-height: 150px;
}
}
#media (max-width: 500px){
.aboutsplash img{
position: left;
margin: 0 0 0 -25%;
}
}
<div class="aboutsplash">
<img src="images\sunsetcrop2.jpg" alt="lbl sunset">
</div>
#media (max-width: 769px){
.aboutsplash {
overflow: hidden;
}
}
try this.
I have this code . When i resize the browser to min-width: 480px it doesn't change the background color to blue and width to 100px
this is my code so far:
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
.boxcontainer{
width: 1300px;
background-color: green;
height: 200px;
}
<div class="boxcontainer">
</div>
Thank you
Switch the order of the CSS rule, Change your CSS into
.boxcontainer {
width: 1300px;
background-color: green;
height: 200px;
}
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
As in this JSFiddle example. the background is blue as long as the width is not less than 480px, otherwise it turns green.
IF by any chance you meant to do the opposite, because .boxcontainer{width:1300px} makes me think you want that , then just change the media query break point to #media screen and (max-width: 480px) instead of #media screen and (min-width: 480px).
You can see the second option in this JSFiddle
Hi I am almost finished with my website but I have a small issue of the columns not displaying at 100% when on a mobile device, I do not know what I have done wrong in the css below but the max-width 320px does not seem to be making the column go 100% when on mobile.
here is a link to my site to see what happens
http://www.ico.mmu.ac.uk/08506125/portfolio/index.html
I know it's a really simple solution...
#media(max-width : 320px){
.column.half { width: 100%;}
}
/* Column sizes */
#media (min-width: 40rem)
.column {
float:left;
padding-left:1em ;
padding-right:1em;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%;}
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }
/* Column sizes end */
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; }
.third { float:left; display:inline;}
.half { float:left; display:inline;}
.two-thirds { float:left; display:inline;}
.image { border-style: double; border-color:white;}
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; }
}
Just put this condition in the bottom because you override it with your default width.
.column.half { width: 50%;}
#media(max-width : 320px){
.column.half { width: 100%;}
}
please notice "half" class stop getting "float left" on 640px so you've got the issue already from there...because there are devices with bigger screen resolution, maybe it can be better for you to change 320px to 640px:
#media (max-width: 40rem){
.column.half
{
width: 100%;
}
}
I want to know how to size my images in #media screen and max-width:640.
My style.css:
#header-wrapper
{
position: relative;
padding: 7em 0 0;
background:url(images/fox-illustration.jpg) no-repeat center;
background-position:center;
width:auto;
height:768px;
}
My mobile.css:
#media screen and (max-width: 640px) {
header-wrapper {
width: 600px;
}
So the width is only applied to to the header-wrapper..
I also tried to give the header-wrapper in mobile.css another image
(which I sized in photoshop to mobile size).
But this didn't work either. I think because the image of the header-wrapper overwrite it in style.css?
background:url(images/fox-illustration.jpg);
background-size:600px 400px;
background-repeat:no-repeat;
Do this
First make sure your mobile.css is active.
If the second part of your code is at it is set now, you are probably missing an id tag in the css.
Try changing your
header-wrapper {
width: 600px;
}
to
#header-wrapper {
width: 600px;
}
Other than using fixed background size, you can use cover and follow the width of the #header-wrapper
#header-wrapper {
position: relative;
padding: 7em 0 0;
background:url(images/fox-illustration.jpg) no-repeat center;
background-size:cover;
width:auto;
height:768px;
}
#media screen and (max-width: 640px) {
#header-wrapper {
width: 600px;
}
}