I have this less and I can't figure out how to do the math inside the string
#bp-tablet-landscape: 1024px;
#bp-tablet-portrait : 768px;
#tablet-landscape-only: ~"only screen and
(min-width:#{bp-tablet-portrait} + 1) and (max-width: #{bp-tablet-landscape})";
Usage
div#header {
#media #tablet-landscape-only {
background: #000;
}
}
But it doesn't quite compile correctly. It doesn't add 768px + 1 as I had hoped. Any ideas? I've tried several different flavors and I can't nail it. I can obviously define a variable outside the string concat, but I'd like to avoid that approach if possible.
winLess online compiler outputs
#media only screen and (min-width:768px + 1) and (max-width: 1024px) {
div#header {
background: #000;
}
}
I want to get 769px in there instead of 768px + 1
Not Within the String Itself, but...
If you separate it out of the string, then do a second interpolation following (note the 2nd ~), this works:
#tablet-landscape-only: ~"only screen and (min-width: "(#bp-tablet-portrait + 1) ~") and (max-width: #{bp-tablet-landscape})";
To produce this:
#media only screen and (min-width: 769px ) and (max-width: 1024px) {
div#header {
background: #000;
}
}
Related
`#media screen and (max-width: 768px) {
.my-element {
font-size: 16px;
}
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
.my-element {
font-size: 18px;
}
}
#media screen and (min-width: 1024px) {
.my-element {
font-size: 20px;
}
}`
I was expecting the font size of .my-element to adjust based on the screen size, but it doesn't seem to be working. What am I doing wrong?"
Make sure that the .my-element class is being applied to the correct element in your HTML. If it's not, the font size won't adjust as expected.
Check that there are no other styles elsewhere in your CSS that might be overriding the font size changes made by the media queries.
Try adding the !important declaration to the font-size property in each media query to ensure that it takes priority over other styles. However, it's generally not recommended to use !important unless it's necessary to do so.
Verify that your browser window size is within the range specified by one of the media queries. If it's not, the font size won't adjust until the screen size meets the criteria of one of the media queries.
simple question.
I'd like to set the css property of a class, say the container's padding-top, to different values depending if I am on a xs device or on a sm device.
Any suggestions?
Sorry for the basic question.
You can use CSS media queries. Bootstrap includes media queries for specific device "breakpoints" (http://getbootstrap.com/css/#grid-media-queries) so you would override like this..
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
.container {
padding-top:20px;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
.container {
padding-top:40px;
}
}
Demo: http://bootply.com/NLOH2yNKnM
I have the following less code:
#mobile: ~'screen and (max-width: 480px)';
Then I use it as follows:
#media #mobile {
// some code
}
It works fine but I would like to also use "not" like:
#media not #mobile {
// some code
}
But I get the error
ParseError: Unrecognised input
in the "not" part.
Is it possible to solve this?
Maybe you could do something like this:
Define the width of a mobile device:
#mobileWidth: 480px;
Then anything larger is a non-mobile device:
#notmobileWidth: #mobileWidth + 1px;
Create LESS variables for both mobile and notmobile:
#mobile: ~'screen and (max-width: #{mobileWidth})';
#notmobile: ~'screen and (min-width: #{notmobileWidth})';
And then use those in your media queries:
#media #mobile {
// some mobile code
}
#media #notmobile {
// some not-mobile code
}
I'm trying to make the move to being a Responsive developer (instead of a fixed one). I've been trying to understand media queries as of late and having some confusion. The test is simple:
I want to change the body background color to red for mobile, yellow for tablets, green for wide screens. The following code demonstrates this (for the most part). The issue I'm having is when the width drops below 480px (30em's), the background reverts back to its default css (background turns red to white). Now.., my small mind tells me "ohh I'll just make a
#media only screen and (min-width:1em) { body { background:red;} }
... that will fix the problem!"
This however seems wrong and unintuitive. Does anyone know the proper way to achieve this simple task?
/*
==========================================================================
MOBILE (min-width 480px)
========================================================================== */
#media only screen and (min-width: 30em) {
body { background:red; font-size:.75em; }
}
/*
==========================================================================
TABLETS (min-width 768px)
========================================================================== */
#media only screen and (min-width: 48em) {
body { background:yellow; font-size:.85em; }
}
/*
==========================================================================
SCREENS (min-width 1140px)
========================================================================== */
#media only screen and (min-width: 71.25em) {
body { background:green; font-size:1em; }
}
If I were you, I'll revert the whole CSS into a max-width. Something like max-width: XX is a smartphone, max-width: YY is a tablet, else is a screen. So, it'll turn into something like this:
body { background:green; font-size:1em; }
#media only screen and (max-width: 71.25em) {
body { background:yellow; font-size:.85em; }
}
#media only screen and (max-width: 48em) {
body { background:red; font-size:.75em; }
}
I really want to quit typing:
#media (min-width: #min-tablet-width) and (max-width: #max-tablet-width) {
// styles for tablets
}
all over my LESS files.
As far as I know, there's no way in LESS to move this into a function, like:
.tablet() {
// styles for tablets
}
Are there other solutions?
Look at this : https://github.com/dalou/bootstrap3-less-mixins
ex :
h2 {
font-size: 20px;
.phone-only({
font-size: 14px;
})
}
The answer at this point in time is: no.
EDIT: see Dalou's answer above.