I am trying to remove the horizontal scroll bar that is appearing on the website that I am working on at Real Estate Website Scroll Bar Issue
I think it might be in the bootstrap.min.css file:
{.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}
But, that is a reference to a table. So I am not sure how to get rid of the scroll bar. Any help would be great. Thanks, Beth
You can either set:
body{
overflow-x:hidden;
}
Or fix what is causing the grid system to overflow. I see you are overriding the default bootstrap grid styles. I suggest you leave bootstrap to handle the rows and columns widths and paddings.
You have .row classes that are not a child of .container or .container-fluid. One is .containerNew -> .row and another is #about -> .row. Bootstrap requires .row be a direct child of .container or .container-fluid because .row has a negative left/right margin that works within left/right padding in .container and .container-fluid. So the negative margins on .row are creating the horizontal scrollbar.
You also have 2 #about sections - an ID can only exist on the page once.
Related
I would like to create a grid with 4 columns. Columns width should fit to there respective contents, and gutters should all share the same width changing depending on the columns width. The tricky thing is that the total width of the container / grid should be adjustable dynamically, as it should be a responsive design.
Here is a scheme that's explains what i want to achieve :
And here is a fiddle trying with margin-left:auto (doesn't work)
nav ul {
width:80%; /* fluid design */
}
nav ul li {
display:inline-block;
}
nav ul li:not(:first-child) {
margin-left:auto;
}
I can use latest CSS3, Sass, Compass and Susy. But i haven't found any way to do it yet. It seems Susy doesn't allow me to have columns adjusting their width to their content - or i haven't found how. Does anyone have any idea ? thanks !
As in the link I posted as a comment, you may use flexboxes to achieve your layout.
Basically if you give your container this CSS:
.flexbox-container {
display: flex;
justify-content: space-between;
}
your content will adapt to the 100% of the container and space between elements will always be the same.
Here you have a FIDDLE as an example. Try writting more on any div to see it growing.
I've added a margin right to the elements so there's always a gap between elements. If you remove that margin, when no room the space between elements will be 0.
There's more options avalaibles like giving your elements the option to shrink if no room enough with flex-shrink: and many others...
More info about flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
At this point in time the only way to achieve this is through Javascript. CSS is not capable of finding the width based on your content.
I have a problem with Bootstrap 3. The setup is a simple 2-column page (sidebar and main content). Because I have dropdown menus which can overlay out of the main container, I cannot use the visibility:hidden or auto trick.
I use another technique which is applying a padding-left to the main container to ignore the floated element.
.sidebar {
float: left;
width: 200px;
}
.main {
padding-left: 210px;
}
Unfortunately, bootstrap navs use a clearfix internally which causes the navbar inside main to become as big as the sidebar.
http://jsfiddle.net/9ejqa/1/
Is there a way to make the clear only clear elements inside main and not including the sidebar?
instead of manually trying to make the columns yourself you can use the built-in bootstrap classes that do everything for you and are responsive.
First wrap everything with a div that has class="container"and in that you have a div with class="row" then add to the sidebar and to the main div the appropriate col class'
Use the bootstrap Grid page as a reference to see all the examples they have.
I have updated your FIDDLE with the basic markup to do what you need, hope that is what you are looking for.
I wanted to using a flexible horizontal list menu, and I found one on github that came with a collapsing menu at a certain breakpoint. I didn't need the collapsing menu so I got rid of it. I've been modifying the menu to cater to my layout. There are a couple issues that I can't seem to figure out.
There seems to be a left margin to the menu that I want to get rid of.
On the right side of the menu, while shrinking the browser, the last menu item seems to get overlapped instead of pushed in.
I would like to reduce the margins between list items
Normally this wouldn't be a problem for me, but I've not really worked much in percentages.
.flexnav {
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
FIDDLE
Add padding: 0; to .flexnav style definition.
To remove padding just use css:
padding:0;
You mention "unwanted", so a tip from what I usually do is, at the top of the style sheet I write this out:
*{
padding:0px;
margin:0px;
}
This will remove padding and margin from all things that have padding or margin by default, so you will no longer have "unwanted" padding or margin, instead you can separately add padding and margin to things you actually want.
I use this approach on all websites I make.
I have a peculiar issue with CSS -- the 'VPS Plans' div and 'Features' div should be floated together and line up at the bottom. Unfortunately, unless I adjust the size of the Features div to 460px, it kicks down to the next line and I can't figure it out.
The page can be seen here.
Thanks!
Everything is looks good, you need to add display: inline-table; for below CSS.
The element will displayed as an inline-level table
ul.vt li.vt-line-header {
display: inline-table; //----Add this to your CSS
}
Hope you understand.
I'm implementing a menu based on this one:
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
(Demo)
The menu uses a UL / LI structure and CSS for appropriate rendering.
The trouble is, if the browser is not wide enough, the main menu items wrap.
I have surrounded the menu in a DIV.
When I apply
overflow-x: auto;
to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).
How can I prevent the DIV from wrapping while retaining the drop-down menus?
You could simply add a fixed width to the div tag, like such width: 700px;
The best solution I can think of is the one suggested in the comments in The Jonas Persson's answer. It's using white-space: nowrap. For this to work though, you'd have to be using display: inline-block instead of float:left/right to horizontally align the menu's elements.
I played around with your demo using chrome's web developer and made it work.
Just replace every float: left with display: inline-block Add font-size: 0 to ul#menu and override it on ul#menu li with font-size:12px - that's the size your using. (Using display: inline-block adds some whitespace between the blocks. That font-size stuff takes care of it.).
Next ensure the inline blocks are vertically aligned with the top of the container - add vertical-align: top to the li's.
Finally, add the whitespace: no-wrap to the div wrapping ul#menu. That's it.