I want my Navbar breakpoint after it comes from large to
medium screens. Could anyone explain to me how to exactly do so in code?
This is mentioned on bootstrap site on Overflowing Content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
This is mentioned on Bootstrap for mobile navbar breakpoint
Changing the collapsed mobile navbar breakpoint. The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
Related
By the way I'm using Native Base for the card components, and react-native-responsive-grid for the grid.
http://prntscr.com/kbi48m
Here's the code chunk. Basically it sets up a horizontal box (Row) that has two columns in it. Each column has one card component in it. If the screen is <= small size, the columns get a width of 99% of the screen and stack on top of one another. If the screen is big enough, both column get rendered side by side with a width of 50% each.
When in landscape view, the sizing of the Card component vertically appears normally (I manually set width of card to 100% so it takes the full width of it's container). (It's just as big as it needs to be to fit the text field inside: http://prntscr.com/kbi5q4
In portrait mode, suddenly the cards get a massive height. Much taller than the child elements need: http://prntscr.com/kbi6o7
I tried to hard code the height of the cards which works fine for either landscape, or portrait, but not both. Ive never seen a parent component give a ridiculous amount of extra spacing on one side of its child like this before.
Any insight?
I am adding a menu to the side of my page using Bootstrap. I want the menu to stay at the top of the page when the user scrolls past it. I have discovered affix which is in bootstrap.js. However because I am using different col sizes for the screen I am struggling to get it to stay in the right place.
I have got it to start at the right time and to make it position the top correctly but the width and the right are not working.
I am using bootstrap 3.3.
I think that I will have to use percentages of the screen width and then also do media queries in the CSS.
JS Fiddle
I have solved it.
The element with affix needs to be a child to an element with a col- class on it. You then also have to set the width in pixels for each different screen width that bootstrap recognises.
i am sorry to disturb you all, but i want to understand how a certain margin responsiveness works.
As you can see on this site http://www.trade-ideas.com/about-us/ the navbar, the paragraphs, the h1, h2 and the footer maintain the same left-margin as you resize the browser window (with firefox the effect it's more clear).
It's like when the elements reach the limit of the left margin (that is mean zero), they restart just on the same distance (the same margin-left) that they where before i was starting resize my browser width.
I've noticed that the navbar included in bootstrap also has this left margin responsiveness: as i resize in width my browser's window, the navbar continue to stay in the same left-margin range, restarting every time he reach the zero margin-left.
In fact, on this bootstrap page you can find the exact same effect in all the page's elements (the navbar and the div box on the body) : http://getbootstrap.com/examples/navbar/
With firebug i've tried to search what parameter set this particular effect, but i'm not an expert, and i didn't find a solution.
So, my question is: this left-margin responsiveness it's generated by a set of #media queries instructions to a set of width? Or there is something that i'm missing?
Thank you in advance for all the help that you'll give me.
Andrew
p.s.: i noticed that on http://getbootstrap.com/examples/navbar/ if i delete "margin-left:auto; margin-right:auto;" the effect that i need doesn't show up anymore.
I tried to create a div container with that margin auto on my site, but i was not able to ricreate the effect (maybe that "margin-left-right:auto" it's just a part of the effect).
The media queries are the ones that make sure the website is responsive. The example: http://getbootstrap.com/examples/navbar/ is using media queries to set the width of the container. If you set the media queries to change when the screen width is 700px and when you make the width of the screen smaller. The media queries will register the px of the screen and when the width of the screen is equal 700px the container will change.
I'm working on a mobile website. This particular page includes a giant red circular hero button. I'm struggling to find a way to make it properly responsive. If you make it one size, it fits iPhone 5 nicely, but the same size pushes the rest of the page off the screen for iPhone 4. The iPhone 4 size just makes it look terrible and be too small on iPhone 5.
So the behaviour that I'm looking for is this:
The hero button should get bigger in radius as the screen gets bigger
The hero button should not push any other elements off the screen or render wider than it's container.
The other parts of the page are a fixed size and layout and should stay that way.
I've used Flexbox for similar constraints in the past, but it doesn't seem to be fitting the bill here. When I make the container of the hero button a flexbox, it does not increase in height, and I have no idea how to make the width correspond.
How can I make the button expand to fill the available screen space?
You can use jquery to do this.
get the screen size by using $(window).height() and $(window).height() and set the size of your button accordingly
http://www.eco1furniture.ca/
When resizing the page down the main-menu goes to a 2nd line. I know this is supposed to happen with the site being fluid. But is there a way of keeping it fixed (on one line)?
Thanks,
Ken
You can make a few changes to ensure the menu doesn't wrap onto two lines under "normal" conditions, but I don't think you can ever be certain it won't happen. For instance, the menu width will depend on the browser zoom level, font and font-size.
Using my browser defaults, your menu is 865px wide. Taking the gutters into consideration, the max-width of the small-screen stylesheet should be 972px, so the drop down menu appears before the menu goes onto two lines. 975px would be a reasonable value to account for some of the idiosyncrasies of different browsers, but it still assumes the user is at 100% zoom, and using the font and font-size you've specified.
responsive.css - line 51
#media only screen and (max-width: 975px) {
Setting a min-width on the menu itself suffers the same problems and as you discovered causes the menu to extend out of the main wrapper.