the only time I can get the css #media to work is if I use
!IMPORTANT; in the css like
#media only screen and (max-width: 600px)
.example {
padding-left: 2px !IMPORTANT;
}
.example {
width: 118px;
position: absolute;
padding-left: 21px;
padding-top: 11px;
}
If I don't use !IMPORTANT in the #meda css, the style won't pick up, so the question is, why?
I don't want to use !IMPORTANT; but the css #media won't work with it.
Please help
It's working fine for me. Maybe you have another css as well for that class that overwrites it.
.example {
width: 118px;
position: absolute;
padding-left: 21px;
padding-top: 11px;
background: red;
}
#media only screen and (max-width: 600px) {
.example {
padding-left: 2px;
background: blue;
}
}
Related
I thought like it is overlapping media queries issues but I didn't find any media query which overlaps.
I resize the width of menucontainer and searchcontainer but didn't work.
I thought it was that searchcontainer which has more size in padding,I tried to decrease and increase the padding value of searchcontainer but it didn't work.
4.When I click on 'Toggle device toolbar' it is not showing any dislocation of this three container(searchcontainer,contactcontainer and menucontainer) but when I remove 'Toggle device' option that time on chrome view it is dislocated their positions.
This dislocation occurs in between 786px to 771px width.
I want both side same view and this view can be supported all devices including desktop, tablets .
Click here to understand my code
Here is my code
`
#media only screen and (min-device-width : 768px) and (max-device-width : 768px), (min-width: 768px) and (max-width: 768px) and (orientation: landscape) {
.MenuContactContainer {
max-width: 100%;
width: 100%;
vertical-align: top !important;
padding-right: 0px;
text-align: center !important;
}
.MenuContact {
margin-bottom: 0px;
margin-top: 0px;
vertical-align: central;
padding-right: 10px;
font-weight: 400;
font-size: large;
text-align: center !important;
}
.search-container {
width: 102% !important;
display: inline-block;
height: 55px;
margin-left: 0px !important;
}
.Hamburger {
z-index: 257;
width: 465px;
height: 41px;
padding-bottom: 4px;
margin-left: 16px;
margin-right: auto;
margin-top: -53px;
position: relative;
border-color: transparent;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
background: transparent url(../images/hamburger.png) no-repeat center center;
background-size: contain;
}
.searchtextbox {
height: 32px;
background-color: #EAB640;
padding-left: 10px;
margin-top: -2px;
margin-bottom: 18px;
vertical-align: middle;
width: 270px;
margin-left: 32px;
}
}
`
How can I solve this issue? Please me find out that issue.
This is dislocation of three components are here.
This is showing in 'Toggle device' mode which is right position.
I am having a hard time making the results boxes on this page responsive:
http://search.epicmountainhomes.com/i/deer-valley-real-estate
Does anyone know how to edit it using IDX broker or custom CSS?
Thank you very much!
Ok I figured it out:
/*Set Mobile Responsiveness One*/
#media only screen and (max-width: 500px) {
.IDX-resultsCell {
padding-bottom: 22px !important;
border-bottom: 1px solid #e5eeed !important;
clear: left!important;
width: 100%!important;
}
}
/*Set Mobile Responsiveness Two*/
#media only screen and (max-width: 500px) {
.IDX-grid .IDX-resultsPhotoImg {
height: 155%!important;
width: 100%!important;
clear: left!important;
left: 0!important;
position: absolute!important;
top: auto!important;
z-index: 0!important;
max-height: none;
max-width: none;
min-height: none;
min-width: none;
}
}
I am trying to have my website 'responsive'. I have 2 columns and am trying to have them stack on each other when below 992px. This is the code I have for the columns and the code for the media query. Whenever I go below the 992px, col1 stays at 69% and col2 at 29% but both are floating left and stacked on top of each other. I am just wondering what I am doing wrong because I want them to take up the width of the screen when below 992px. Is the code for col1 and col2 overriding the #media? I have tried the #media with display: inline and display: block but neither worked. Sorry if it is messy, I only started learning last friday :)
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98%;
}
.col2 {
width: 98%;
}
}
.col1 {
margin: auto;
float: left;
width: 69%;
background-color: #686472;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
}
.col2 {
margin: auto;
float: left;
width: 29%;
background-color: #454349;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
padding-bottom: 39px;
}
.col1 {
margin: auto;
float: left;
width: 69%;
background-color: #686472;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
}
.col2 {
margin: auto;
float: left;
width: 29%;
background-color: #454349;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
padding-bottom: 39px;
}
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98%;
}
.col2 {
width: 98%;
}
}
Ideally though, you would create two more media queries, one with a max-width: 768px, and one with a min-width: 991px. This way you would account for the space above and below, and put all your numbers there so there are no conflicts.
Essentially what's happening is that anything that is outside of the media query applies to all widths. A simple, unorthodox solution to this problem would be to add '!important' to the rules inside media queries, without the need to change order.
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98% !important;
}
.col2 {
width: 98% !important;
}
}
However, the use of '!important' can become highly problematic in large stylesheets where conflicts may occur and hair begins to get pulled off, use it wisely.
My site, like many others, utilizes bootstrap's carousel on the home page.
For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device).
Is there a snippet of code I need to add to the #media(max-width:480px) section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
An example can be seen here.
Add a z-index on you carousel-control:
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
position: absolute;
top: 40%;
left: 15px;
color: #fff;
z-index: 99999; /*Add This */
}
What this is doing it just making this control be in front of the slider that is more than the actual screen size.
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