I use Bootstrap 3 to create a tabbed search box like the one in the demo* I provide. I would like to make it responsive for the mobile version as well.
Specifically, when you resize the widow and the ul reaches the end of the form, the li items would stack 3 by 3 at some breakpoint and then as it gets narrower all of them will be stacked.
*Here is the demo: http://jsfiddle.net/hvS43/2/
**An example can be seen here: http://library.nd.edu/
I'm not seeing the "Head" section of your HTML, but I'd first check to make sure the following line is in it:
<meta name="viewport" content="width=device-width, initial-scale=1">
try using col-xs-6 in the li class.... Then use #media queries to style the tabs like you want. Let me know if this helps
You need to write media-query for the tabs like this eg:
#media (min-width:768px){
.nav-tabs>li>{width:50%;}
}
And write for the other view-ports, here is the bootstrap media-queries..
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Related
I'm working on a small project based on Boostrap 3 (html5boilerplate custom build) and trying to use the "official" media queries in the boostrap documentation:
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg) { ... }
For some reason the media queries doesn't seem to exist (#screen-sm, screen-md, screen-lg), I'm searching for this in the bootstrap files but can't find any references.
My example code (main.css):
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm) {
.header-btn {display: none;}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md) {
.slogan {display: none;}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg) {}
Basically what happening is... nothing!
I get those errors in Chrome:
http://i.solidfiles.net/0d0ce2d2a7.png
Any ideas?
The bootstrap documentation is a little unclear.
Using these #... parameters for min-width is in fact less syntax, not CSS.
You should use the customize utility in Bootstrap (see Media queries breakpoints) to set up what you want these screen-xxx parameters to be (e.g. set screen-sm to be 768px).
And then when click the Compile button in the bottom, the less code is compiled to CSS. this compilation will replace all occurrences of #screen-sm with 768px, and the same for the other parameters.
#adonbajrami: I think you need to add #import "myStyle.less" in the bottom of the bootstrap.less file.
The file bootstrap.less imports variables.less.
Including your file in the same parent file will give your file myStyle.less access to the variables declared in variables.less.
(Sorry for not commenting in place, but I'm not yet able to.)
I am having trouble with: http://brybell.me/vipeepz/skeleton/
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
#logo {
margin-top:400px;
position:relative;
}
}
That is the media query code within the layout.css file of the skeleton boilerplate/ framework.
It does not seem to be picking up the media query, I have tried many things and it doesn't seem to be working.
There are two logos now, because I was doing some testing, but I really am just trying to do something simple similar to instagram's website. simple phone image with screenshot and then a logo and block of text beneath.
I would appreciate any and all help. Thank you very much. I have been frustrated with this because I had the site how I wanted it on desktop, but can't get things to reposition to where I want them to be.
Your inline style declaration is overwriting the media query in this case since inline styles have higher specificity. Try moving your inline styles into an external stylesheet and your media query for #logo should be picked up.
let's say I have a grid element :
<div class="row">
<div class="span4">...</div>
<div class="span5">...</div>
</div>
When i am on a normal desktop screen .span4 and .span5 are horizontally aligned. However when the screen is smaller, let's say phone both the divs get stacked up 'vertically'
this is really great but i want to prevent this from happening on a specific div. It has enough space to keep the horizontal layout.
Note
There is always the possibility to create my own non responsive .span (.myspan2, myspan4,...) but besides is there lazy solution to that? i dont want to add 8 lines of code for one element in an entire project.
You can write media queries to specific resolution for the div to arrange your layout . Like
/* Large desktop */
#media (min-width: 1200px) { write your styles here }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { write your styles here }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { write your styles here }
/* Landscape phones and down */
#media (max-width: 480px) { write your styles here }
I'm trying to make my responsive CSS styles work only on tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want the mobile styles interfering with the desktop presentation at all. I have played around with countless media queries, but the result either the mobile styles are getting displayed on the desktop, or the mobile styles are displaying only on mobile devices but with only one set of rules (non-responsive). Is there a way I can keep the two completely separate?
My code I have right now goes like this:
/* regular desktop styles */
#media only screen
and (max-device-width: 600px)
{ ... }
/* mobile only styles when the device is 0-600px in maximum width */
#media only screen
and (max-device-width: 1000px)
{ ... }
/* mobile only styles when the device is up to 1000px in maximum width */
Why not use a media query range.
I'm currently working on a responsive layout for my employer and the ranges I'm using are as follows:
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I'm using:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %.
What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.
There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.
The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.
To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.
I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode. Essentially the fonts and line spacing looked fine in every other context, so I just needed the one exception for mobile landscape. This media query worked perfectly:
#media all and (max-width: 600px) and (orientation:landscape)
{
/* styles here */
}
Yes, this can be done via javascript feature detection ( or browser detection , e.g. Modernizr ) . Then, use yepnope.js to load required resources ( JS and/or CSS )
I'm redesigning my site to have two layouts based on screen resolution. One has 1000px for any screen 1010px or greater, and the other has 675px for smaller screens. Right now I'm using the following viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
This setup works fine in desktop browsers and on an iPad. However, both Android and iPhone browsers do not show the page correctly, they start at various levels of zooms. Instead I want the 675px display to be shown zoomed correctly so the whole width is shown on the screen. I tried to use:
<meta name="viewport" content="width=675px, user-scalable=yes">
And it improves the iPhone version somewhat but forces the iPad to show the smaller size even though it has a 1024px wide screen. Not quite sure how to fix this.
Btw the site is http://dendory.net
Have you tried removing the initial-scale=1.0 and just have your viewport as:
<meta name="viewport" content="width=device-width">
and then use media queries for your break points in the design.
Try working with mediaqueries. It lets you target a device to apply certain css properties on. You just simply paste it in your stylesheet. I use it to create responsive emails.
Here is an example of a simple mediaquery:
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
I hope this helps !
You should try using #media queries. Simply apply these to your stylesheet and you can have total variable styles depending on the device, size and what you want to achieve with different devices.
e.g.
/* MOBILE PORTRAIT */
#media only screen and (min-width: 320px) {
body {
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) {
body {
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) {
body {
}
}
In these you can simply apply different styles depending on the scale of the device as shown below...
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) {
body {
}
/* COLUMN GRID */
.g1,.g2,.g3 {display:inline; float: left}
/* 2 COLUMN GRID */
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
#media only screen and (min-width: 1024px) {
body {
}
/* 3 COLUMN GRID */
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}
}
This is very useful if you would like to have a fully interactive website for all devices. These days it is common practice to use media queries.
Also media queries are very transparent through most browsers which makes them a 'good practice' to use. Check this out!