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.
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.
I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.
Anyone know if there is a quickfix solution to this?
Any advice would be much appreciated
Decbrad
If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.
If using LESS
#media (min-width: #screen-lg) {
.container {
width: 970px;
}
}
OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)
#media (min-width: 970px) and (max-width: 2500px) {
.container {
width: 970px;
}
}
OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there
#media (min-width: 1200px) {
.container {
width: 1170px; /* change 1170 to 970 */
}
}
the less way is good but this one is more flexible and reliable:
#media (min-width: #screen-sm) { .container { width:#screen-md; } }
Because in bootstraps default values the width of #screen-md is 992px.
Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout
You can set a max width on the containers:
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
No need for media queries or anything.
The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an #. For regular CSS, replace the variable with the hard coded pixel size.
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;
}
}
The nav starts out great once you lower the bowser width the nav becomes stacked, this is great. Once you open the window back up the nav items are in two rows. Here's a pic.
This is how it starts out:
http://reggi.myshopify.com/pages/about#
FWIW, I found that forcing a redraw of the .nav-justified element in question helps WebKit understand. Obviously, how you chose to do this is up to you—I opted for the fadeIn(), 'cause when life hands you lemons...
$(window).bind('resize', function(){
var w = $(this).width(),
threshold = 768;
if(w < threshold){
$('.nav-justified').hide().fadeIn();
}
});
Both answers seem to be lacking. The JS solution causes a lot of flicker, and the CSS solution doesn't seem to keep the integrity of the designed tabs. Here's what I came up with.
If you're not using less with your bootstrap styles just replace #screen-sm with 768px
#media (min-width: #screen-sm) {
.nav-tabs.nav-justified > li {
display: block;
float: left;
width: 32.9999%
}
}
The problem is display: table-cell; instruction in the .nav-justified class.
Let's take a look at the bootstrap.css file, I believed that you are using Bootstrap version 3.0, at line 4109.
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
You must change it to :
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: inline-block;
float: left;
margin-left: 100px;
}
}
This will solve your problem.
This is a known bug with Bootstrap.
This has been fixed in Chrome Since 2013, but is still an open bug in WebKit and occurs in Safari.
Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.
— cvrebert
I recommend to not use .nav-justified or be ok with it not working properly in Safari.
many old mobile brwoser do not support position:fixed, I tried writing a sloution myself,it works, but not smooth enough.
I googled, no luck for now.
so I would like to know if there is "smooth" solution for this, thanks.
i think it would be better to mention the browsers that you have problems with. for example I assume you have problems with IE6. I will try to answer your question according to my assumptions. So the 100% height on the body and html stuff is in case you want to do fixed positioning along the bottom edge of the browser window.
like so:
* { margin:0; padding:0; }
html, body {
height: 100%;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
top: 0;
right: 0;
}
#page-wrap {
width: 600px;
margin: 0 auto;
font: 16px/2 Georgia, Serif;
}
hope this will help please also check this site when having problems related to CSS
http://css-tricks.com/snippets/css/fixed-positioning-in-ie-6/