I am using container-fluid for all my containers. This allows the layout to expand on a large display (good) but causes probs when a user shrinks the layout by grabbing the corner of the browser and dragging (bad).
Is it possible to constrain the ability to shrink the layout. Perhaps using media queries? Something else in the Bootstrap bag of tricks?
This works for me, hope it will resolve your issue.
#media(max-width:767px){
.container-fluid{
padding:0px 10px;
}
}
Apply whicheven properties you want for screen size less that 767, you can change the screen size too.
Related
I have an owl carousel with cards in my project. It's my first time using it. I've set up to be one card in viewport while screen is small but the arrows are still too big and not fitting the screen nicely. Is there any possibility to change that? sorry for asking but as I wrote earlier I'm just learning all the web dev stuff.
check if this thing is in your css.. reducing the font size would change the size of the arrows
.owl-nav i {
font-size: 52px;
}
I have a yfiles.canvas.Control, with some nodes inside. However, the number of nodes is getting bigger, and I need to add a scrollbar in order to vertically navigate through them, despite the reduced size in height.
How can I do this? I see that a ScrollBar class exists, but I don't know how to integrate it.
yFiles for HTML comes with scrollbars built in. You can customize their visibility, but by default they will be shown as soon as the content rectangle is larger than the visible area. Maybe calling updateContentRect is all that is missing in your code?
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
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.
It goes on to say:
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).
This may sound strange, but I don't understand how designers determine the image widths in their bootstrap layouts.
Consider the following template:
http://startbootstrap.com/templates/blog-post/
The 900x300 placeholder image is clearly not 900 wide on desktop 1080p monitor. It only ever gets shown full size when the browser is around 1000px wide.
Q) Am I being dense here? How are these widths determined/decided upon?
This is important as I want to make some designs using bootstrap, but obviously I want to make sure I select appropriate image widths.
Many ways to do this, but simplest is to use Chrome's "Inspect Element".
1) Right-click on photo and choose "inspect element". Scroll down until you see diagram of it's dimensions, padding etc
2) Adjust browser width to max out photo width (in your example it's between 990px and 1200px)
2) Keep editing the the placehold.it image-width until the inspector diagram stops changing photo width (see attached photo). This tells you the max threshold, in this case is 940px.
FYI, you can also try to determine knowing your column widths, padding, margins, and assuming you have properly reset nested column padding, but there is a lot of assumption and calculation there, so I tend to use the inspector method, at least to confirm.
I have checked many books and sites, where I can see that everyone is saying that it is a default property and we can not use top, right, bottom and left property, I can understand that. But if it is already predefined then why do we use it's syntax? Can anyone please tell me its use.
{position: static;}
We use it's syntax simply because we can make an element on a webpage change positions multiple times. Whether it's for animation purposes or for a real application it's always nice to be able to bring it back to it's default behavior (for whatever reason necessary).
For example, if you wanted a responsive website with an image in a special area, you could set that image position: relative for wide screens. Then when the screen size is reduced you can set it back to position: static , which (in my opinion) is easier to handle when the screen size is small (mobile phones).