I might make a obvious mistake but somehow I am stuck with the following:
only for large screens i don't want the vertical scrollbar so i have this simple css:
#media (min-width : 2000px) {
// hacky
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
...more style definitions
but somehow this doesn't work
i am using chrome's toggle device bar tool to switch between different resolutions. All other css definitions for > 2000px are there, only body doesn't seem to be set??
#media (min-width : 2000px) {
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
}
Did you set 100% height for html and body, like this:
html, body {
height: 100%;
}
And also for possible other child elements inside body which span the whole height of body?
Otherwise one of them will get a scroll bar (not necessarily body, but it will look very similar)
Related
Here is the site-to-be (work in progress still)
http://www.fairhavenstorage.com/DRAFT
On a desktop screen it's fine, but on a mobile device, the site title and description do not budge. I added some custom CSS to allow the logo to display beside the site title - here is what I entered:
#logo .site-title, #logo .site-description {
display: block !important;
}
.site-title {margin-top: 26px;}
#logo img {
float: left;
margin-right: 20px;
}
#logo {
float: left;
width: 800px;
}
And for the image on the right side of header, I entered this:
.header-widget {
float: right;
width: 200px;
margin-top: 10px;
}
It's not looking good on my iPhone and I'm unsure what to do. If anyone can suggest a fix, that would be greatly appreciated!
try and deactvate or override existing css . There are #media queries in your existing css
I'm trying to change my website's body padding depending on the screen size, but the medium range does not work. The website still uses the body padding of the default mobile size. I have tried lowering the min-width from 768px to 767px or lower to see if that will change anything but it didn't. I cannot see what is wrong with the syntax. Have I missed something? Thank you.
body{
padding-bottom: 300px;
margin-bottom: 900px;
}
#media (min-width:768px) and (max-width: 991){
body{
padding-bottom: 300px;
margin-bottom: 500px;
}
}
#media (min-width:992px) {
body{
padding-bottom: 300px;
margin-bottom: 100px;
}
}
#media (min-width:768px){
/*more codes here....... */
}
Should be max-width: 991px
Also, your last query with "more codes..." can override your previous settings. What are they? if you set those properties here, you literally saying "Ok, apply these when the screen is larger than 768px". This is within your previous range and will be overridden.
When using Sass I would do something global like this (which I got from CSS-tricks btw)
// Variables for MQ's
$mq-mobile-portrait : 320px !default;
$mq-mobile-landscape : 480px !default;
$mq-tablet-portrait : 768px !default;
$mq-tablet-landscape : 1024px !default;
$mq-desktop : 1382px !default;
Then I would create mixins for the media queries like this (I'll only include a few to give you an idea
// Mixins
// Both portrait and landscape
#mixin mobile-only {
#media (max-width : $mq-mobile-landscape) {
#content;
}
}
// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
#mixin mobile-portrait-only {
#media (max-width : $mq-mobile-portrait) {
#content;
}
}
So Sass has this #content which is great because it means that I don't have to declare the content within the mixin but can do an #include mixinName and it creates the parent wrapper for any CSS properties I need to put into it across different files. I discovered that this worked well for my work flow.
So here's an example of that in a partial .scss file:
section.footer {
height: 90px;
padding: 0 10px;
#include mobile-portrait-only {
padding-top: 10px;
background: $gum;
div.ftrLogo {
display: inline-block;
margin: 0;
height: 70px;
width: 45%;
div.smlLogo {
display: block;
background: url('../images/svg/small-logo2.svg');
width: 106px;
height: 49px;
margin: 0 auto;
padding: 0;
}
p.footer {
font-size: .375em;
color: $white;
text-align: center;
}
}
}
So as you can probably gather the #content allows you to just call an empty media query wrapper anywhere in your files (obviously you have to import all of your partials into one main file) but this is great.
Today I'm using LESS on a project and I like it a lot the problem is I can't seem to find an equivalent solution in LESS-land.
I was reading up on passing rulesets http://lesscss.org/features/#detached-rulesets-feature which looks like it's close to what I want but my brain is not understanding it today; I'm optimistic about tomorrow.
If anyone has tried anything like this or can immediately see the error in my ways; please provide your two cents. I really want to figure it out and thought to ask this gifted community of SO'ers.
Thank you in advance you're a baller!
// Variables for MQ's
#mq-mobile-portrait: 320px;
// Mixins
.mobile-portrait-only(#rules) {
#media (min-width: #mq-mobile-portrait) {
#rules();
}
}
Now you can use the following code:
div {
color: white;
.mobile-portrait-only({
color: white;
width: 100%;
max-width: 500px;
});
}
The above will compile into CSS code as follows:
div {
color: white;
}
#media (min-width: 320px) {
div {
color: white;
width: 100%;
max-width: 500px;
}
}
So detached rules are rules between {} assigned to a variable:
#detached: {};
Detached rules can be used as an argument for a mixin:
.mixin(#detached){}
You as call the above mixin with a detached rule as a parameter:
.mixin({color: red;});
or
#detached: {color: red;} // watch out for the last declaration wins rule for variables
.mixin(#detached);
Inside the mixin you should call the detached rules set to copy its properties and selectors (in fact you don't copy but insert them read for processing):
.mixin(#detached-rules) {
#detached-rules(); // parenthesis are required here
}
Finally for your example your code should look like that shown below:
#gum: url();
#white: white;
// Variables for MQ's
#mq-mobile-portrait: 320px;
// Mixins
.mobile-portrait-only(#rules) {
#media (min-width: #mq-mobile-portrait) {
#rules();
}
}
section.footer {
height: 90px;
padding: 0 10px;
.mobile-portrait-only( {
padding-top: 10px;
background: #gum;
div.ftrLogo {
display: inline-block;
margin: 0;
height: 70px;
width: 45%;
div.smlLogo {
display: block;
background: url('../images/svg/small-logo2.svg');
width: 106px;
height: 49px;
margin: 0 auto;
padding: 0;
}
p.footer {
font-size: .375em;
color: #white;
text-align: center;
}
}
});
}
I hadn't thought of doing it like Bass Jobsen suggested (although I've now seen that his approach is basically how the less docs do it), but I invented a mixin which I think is a bit more flexible. Though they are similar in result, I think the following solution allows for more customization and is easier to implement on the fly.
First I define the different sizes I want to use - to keep it simple, I'll just do two using a 'mobile first approach' (meaning if I don't include a media query, the rules will apply to all sizes and I should only include queries for sizes larger than mobile).
#tablet:~"(min-width:768px)";
#desktop:~"(min-width:1100px)";
Then the mixin:
.respond(#_size;#_rules){
#media #_size {
#_rules();
}
}
And Used Like the following:
.selector {
background:green;
.respond(#tablet,{
color:red;
background:blue;
});
}
And That Outputs:
.selector {
background:green;
}
#media (min-width:768px){
.selector{
color:red;
background:blue
}
}
With only two sizes to remember, it is easy enough just to do it the way Bass Jobsen suggested, but in practice, depending on how fine-grained I want my control to be, I may define up to 8 different media sizes (though I rarely use them all), and my approach above makes the process like calling one function rather than defining 8 different functions ( as I would do were I using the alternate approach ).
Hope this helps someone. It saves me a ton of time.
I am having trouble getting a media query to work in bootstrap ( using rails). Below is the media query
#media (min-width: 768px) {
.center.navbar .nav, .center.navbar .nav > li {
display:inline-block;
float:none;
vertical-align:top;
width:100%;
}
.center .dropdown-menu {
display: none;
text-align:left;
}
.center .dropdown.open ul {
display: block;
}
The above media query is overriding all default behaviour no matter what the screen size is.I have received some advice from #baptme (thanks so much) to explain what is happening (which I now understand), basically because the query is using two classes and the default behaviour uses 1 class then the media query overrides. So my question is how do I get the media query to work only when the screen size is below 768px in this example and override the default styles when not
However this is where I get a little confused as when inspecting the elements in Firebug the defaults are as follows
.center.navbar .nav, .center.navbar .nav > li {
display: inline-block;
float: none;
vertical-align: top;
}
.center .dropdown-menu {
text-align: left;
}
Can anyone shed any more light on this, any help appreciated, if you would like to see it in action go to
http://46.32.253.11/
From your example:
This will hide the dropdown, remove the black hover and display the links one under the other aligned on the left:
#media (max-width: 979px) {
.navbar .dropdown-menu {display:none}
.navbar .nav > li a:hover { background-color:transparent}
.center.navbar .nav, .center.navbar .nav > li {display: table;clear:both};
}
I want a custom webkit-scrollbar to animate a different background color for the hover state. The code below changes the color on hover but doesn't animate anything. It works on a div so I suspect webkit-scrollbar doesn't play nice with transitions.
::-webkit-scrollbar-thumb {
background-color: #a8a8a8;
-webkit-transition: background-color 1s linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #f6f6f6;
}
No, it is not implemented. We should file a bug on http://bugs.webkit.org/
You can still apply your transition by setting your -webkit-scrollbar-thumb background-color to inherit and apply transition to parent element - in this case the scrollbar container itself.
The only drawback is that, you have to create an inner container that would mask it's parent color and set scrollbar track background to the same masking color. Here it is an example:
Set container colors and transition
.container {
-webkit-transition: background-color 1s linear;
background-color: #fff;
}
.container:hover {
background-color: #cfcfcf;
}
.container .inner {
background-color: #FFFFFF;
}
Set scrolbar colors
::-webkit-scrollbar-thumb {
background-color: inherit;
}
::-webkit-scrollbar-track {
background: #fff;
}
It is fairly easy to achieve using xb1itz's background-color: inherit; technique in addition with -webkit-background-clip: text;.
Live demo; https://jsfiddle.net/s10f04du/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {
overflow-y: scroll;
overflow-x: hidden;
background-color: rgba(0,0,0,0);
-webkit-background-clip: text;
transition: background-color .8s;
}
.container:hover {
background-color: rgba(0,0,0,0.18);
}
.container::-webkit-scrollbar-thumb {
background-color: inherit;
}
}