My problem is that bootstrap navbar breaks in two rows on Samsung Galaxy Tab 3 10.1 device which means it doesn't fit on device width (1280x800px). I used android default browser.
At the same time it looks good on all emulators and responsive design testers I've tried and fits in one row.
Media queries are:
#media screen and (max-width: 1300px) {
.nav > li > a {
padding: 13px 30px 10px;
}
}
http://www.hemodialysis-krk.com
What am I doing wrong?
Related
I have to write a custom media query in portrait and landscape for Samsung A20 and I can't find the viewport. Does anyone know this? (not for A20s or A20e).
Thanks
You can change the min and max width according to your requirement here
#media only screen and (min-width: 200px) and (max-width: 414px) and (orientation : portrait) {
//Put your CSS here for 200px to 414px width devices (cover all mobile portrait width //
}
#media only screen and (min-width: 500px) and (max-width: 767px) and (orientation:landscape) {
//Put your CSS here for 500px to 7674px width devices (cover all mobile landscape width //
}
You can query for the current device viewport size:
window.innerWidth
window.innerHeight
Well, in short, if you will target every single mobile device out there, you would be nearly mad. So, my suggestion as a Front-End Developer is that you should always go for main break points and never forget to start from "max-width" in media query.... Max width will help you to target from 0 to 396px or 396px to 768px. But min-width will allow from 396px to 0.
So max-width is best option
and
Go for main break points for mobile devices
Media queries for A20 portrait:
#media only screen and (min-device-width: 320px) and (max-device-height: 694px)
(I'm not absolutely sure about WebKit but you can try 2.2)
and (-webkit-device-pixel-ratio: 2.2)
As you can see from the image, the iframe content is too big and it hides the X button + Sources bar.
Is there any option to make it's content a bit smaller?
This css seems to be the problem:
##media only screen and (min-width: 767px) {
#uw-glamor-396 .css-5anb0a, #uw-glamor-396 [data-css-5anb0a] {
position: absolute;
top: 50%;
left: 50%;
width: 767px;
height: 610px;
transform: translate(-50%, -50%);
border-radius: 5px;
}
}
If the height would be 450px instead of 610px it would fix the issue.
This fiddle raises the issue, open it with your laptop and expand a little bit the result window to get the Drag and Drop box.
This is how it looks like without the bookmark tab in my laptop with 100%, I use Chrome:
Unfortunately, it isnt possible to change this currently. Its a known issue but up until now there havent been any complaints that i know of. Typically apps that host the widget are in desktop resolutions so there's enough vertical space or its in mobile res and then the widget switches to the mobile layout.
Ill look into promoting this issue internally.
In the meantime, can you share some details about your app, how does it display the widget? What makes it not have enough vertical space?
I'm using the standard bootstrap 3 media queries that use max-width, but also want to include some for smaller phones and tablets, but can't figure out how to get them both to work for their respective devices.
For example I know this will handle any most phones:
#media (max-width:767px)
But if I want to have a separate queries for say, iphone 5's like this
#media only screen and (min-device-width : 320px) and (max-device-width : 568px)
Either one or the other will work.
I've tried changing the order (as I know the later one will override the earlier one) and adding "!important" declarations, but nothing seems to work.
Int this particular instance I have series of links with a button below them and need to have the padding between them be smaller so they will all fit on a smaller screens (in this example an iPhone 5, but I'd like to have a 3rd one for iPhone 4 etc.), but not be to close together on the bigger one.
Is there an easy way to do this?
Thanks in advance for any help you can be.
Here's a rough example of what I tried for 3 different sizes.
/iPhone 4 and other small phones/
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.topic-link h5 {
padding-bottom:12px;
}
}
/iPhone 5 and other medium phones/
#media only screen and (min-device-width: 320px) and (max-device-width: 568px){
.topic-link h5 {
padding-bottom:18px;
}
}
/iPhone 6 and other large phones/
#media (max-width:767px){
.topic-link h5 {
padding-bottom:24px;
}
}
Here's attempt number 2:
/iPhone 4 and other small phones/
#media only screen and (min-width: 320px)and (max-width: 480px) {
/iPhone 5 and other medium phones/
#media only screen and (min-width: 320px) and (max-width: 568px) {
/iPhone 6 and other large phones/
#media only screen and (min-width: 375px) and (max-width: 667px) {
I would suggest either being more specific with your rules (for example your min-device-width for iPhone 5 could be larger than the previous max and so on.), or using min-width in the manner suggested by this answer. Perhaps give this a read as well in regards to using min-width vs min-device-width.
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.
I am doing a project using the new updated Bootstrap 3 RC1.
There are may new features with the new Bootstrap 3 which are much different than the previous versions.
I figured most of the changes but one I can't resolve:
when the menu has many items it breaks in Ipad and other tablets becuase it doesnt get collapsed like it automatically collapsed on mobile (which is good)
I would like to know how do I "force" ipads to act like mobile and show a collapsed menu or better yet - how to collapse the menu if it has many items and on certain screens and smaller it breaks
here are screenshots of my live project:
-- Menu on Big Screens --
-- Menu on Ipad Landscape --
-- Menu on Ipad Portrait --
-- Menu on Mobile --
I simply want the ipad to act like mobile. notice that the portrait does act like mobile as far as the content but not the menu.
Please read: http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/
The collapsing of your menu is defined in the less files. (Download the latest version from:https://github.com/twbs/bootstrap )
In variables.less you will find #grid-float-breakpoint: #screen-tablet; where #screen-tablet is 768px.
So by default your menu will collapse when the screen width is below the 768px;
The ipad landscape has a screen width of 1024px so the menu will NOT collapse. The ipad portrait screen width is 768 px so the menu will NOT collapse.
See also navbar.less:
// Responsive navbar
// --------------------------------------------------
#media screen and (min-width: #grid-float-breakpoint) {
To change this behavior you have to change the #grid-float-breakpoint b.e set to 767 and recompile your css files.
NB You also mentioned: "notice that the portrait does act like mobile as far as the content but not the menu."
You use "col-lg-" as prefix for your grid rows. "col-lg-" elements will stack below the 992px (ipad portrait) and become horizontal above 992px (ipad landscape).
Just ran into this issue as well. I suggest you visit:
Bootstrap customization
Find the field #grid-float-breakpoint and set it to the screen width after which menu should collapse. There you could use variables from previous section, namely from Media queries breakpoints to set proper points.
Also, take a moment and check through all available variables to change. Creating a well-customized Bootstrap package might save you hours of dev. work, if not more.
For those poor souls who are not using less, you would have to modify the bootstrap.css and change media queries associated with navbar that have a breakpoint of 768px to 992 px.
For example, change
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
to:
#media (min-width: 992px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
The no less implementations I found didnt work
Couldn't find the styles to make this happen on its own anywhere, ended up finding this - https://coderwall.com/p/wpjw4w
I was able to correct our issue by changing the #media (max-width: 768px) query to 767px instead. One of the links above referenced a 1px issue on iPad which breaks differently and was forcing the mobile version of the website instead.
If anyone is using the standard bootstrap.css file, I had to change it in 3 places:
around line 3780
/*changed from 768 to 992 */
#media (min-width: 992px) {
.navbar-header {
float: left;
}
}
around line 3799
/* changed from 768 to 992 */
#media (min-width: 992px) {
around line 3924
/*changed from 768 to 992 */
#media (min-width: 992px) {
I hope this helps someone :)
I had the opposite problem. On iPad the navbar was not collapsed (as expected), but the styles for a collapsed navbar were applied. I got it solved by changing the media query for the collapsed navbar adding -1 to match with $grid-float-breakpoint as follows:
#media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}