I am trying to use the code of bootstrap-side-navbar and building on top of this demo. That's pretty much what I need but I want it not to fill the whole screen on desktop.
The problem is that when I add a max-width to .container-fluid the sidebar's column and the content's overlap, see the screenshot:
Whats a good, responsive, solution for this?
Replace container-fluid with container and add following css
#content {
position: relative;
width: calc(100% - 120px);
float: right;
}
I am calculating width bycss calc property but still you have to write media query to handle the layout in different screens.
Related
I'm working on a site that was developed by another person. This site is designed with wordpress by override a base theme(blankslate). This is the link:
http://www.good-look.it
There is a problem. When you resize the browser window you can see that the div with white background is responsive, but its not. On mobile the problem is more visible. I can't find a solution. Maybe is a problem with the plugin that manage the image slides(NextGEN Gallery by Photocrati)?
The problem is in this file: http://www.good-look.it/wp-content/themes/blankslate/css/struttura.css
There are numerous CSS styles with "!important" on them. For example:
wrapper {
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: top;
width: 940px !important;
}
The width of this container will always be 940px with the way you have it now. Turning this style off in Firebug "fixed" the "Brands" section. There are numerous problems in the CSS though that will affect responsive behavior.
First off, I thing we should be clear that the site is made with html, css, php, js etc --- so WordPress is really pretty irrelevant.
Most of the site isn't really planned in a way that is going to be responsive, but the specific problem of the white div, is that it is responsive, but the slider within - is not responsive, and uses absolute positioning --- so it's position is falling out of the parent div, and then making the content wider than the white div, and therefor wider than the window itself.
Did some quick styles in the inspector --- the slider's actually sorta "responsive."
replace
.wrapper {
width: 960px !important;
...
with
.wrapper {
width: 100%;
max-width: 940px;
...
and it will get you a little closer...
while designing a responsive site make sure that while defining width use %age instead of pixels like(940px). bcoz it arranges your div in %age according to your current device size but while defining width:940px it will take that amount of width irrespective of your screen size...
There are similar questions to this but none of them are solving this problem.
I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using
margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).
The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.
Here is the screenshot of what it looks like in the browser: http://i.imgur.com/K3LAshv.png
Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/
Many thanks in advance!!
The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch
Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.
http://jsfiddle.net/W7wG3/1/
// part of my css:
.container{width:100%;}
#headerBin{
background-color: white;
border-top: 15px solid #4d4d4d;
}
#header, footer, #main{
width: 960px;
margin:auto;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#header, footer, #main{
width: 768px;
margin:auto;
}
}
I want to create a new website with Bootstrap and I need it to be 100% in width, but I do not want it to be fluid. At least not for now.
The issue I have is: using bootstrap standard limits you to 960px and with a fluid layout it is full width but behaves like a fluid layout should by moving elements to become stacked when the window is shrunk in size.
Is there a way to have 100% width with a static bootstrap layout?
This is easy to achieve in Bootstrap 3, just replace the .container div with your own:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Thanks to Erik Flowers for the heads-up:
http://www.helloerik.com/bootstrap-3-grid-introduction#fluid
UPDATE
Bootstrap 3 now offers a built-in fluid container class, just use <div class="container-fluid">. See docs.
100% width ... static
This is a bit of an oxymoron. A 100% width layout isn't static.
Bootstrap uses a .container class to set a predefined width. Increase this to your desired page width if you want it to be greater than it's default. Be careful though that the sizing of Bootstrap's span* and offset* classes will need their widths adjusted accordingly.
Just don't include the bootstrap-responsive.css in order to disable the responsive function.
If you don't want a .container gutter/margin you can put your content outside the container but keep in mind you must maintain your content layout by yourself(still can use grid but lost an ability to centering your content) and don't forget most of the Bootstrap component like .navbar need .container to control its width.
One of my work need a full screen carousel to holding all contents so I wrap my content with .container to center the content.
I can't quite figure out how to reply to the main question, but here's what you want OP
As said above, don't use .container, use your own class like:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Then when you build your grid, just use col-xs-* for the columns. You will now have a 100% width site that doesn't stack in the "mobile" view. Welcome to the 90's ;)
I guess what you mean is you don't want margin/padding on the sides. (that's the only way your message makes sense - a 100% width will take the full size of the screen so it will never be static - the size will change depending on how big the window is)
We don't have a use-case or JSFiddle from you so I can't give you exact code but you need to make sure your body has margin:0 and padding:0 and then look for the other divs with Firebug or Chrome Web Dev tools.
If you want your layout to be fluid but stop at a certain point growing, then you need to apply max-width:1000px (for example) to your body or your general container/wrapper element.
The goal here is to get the secondary fixed flavors menu to dynamically resize with the main content.
The site can size up to 1086px and size down to 960px width.
The secondary menu needs to resize the same. I've tried multiple ways of doing this and have not explored JS solution just yet. I'm not sure where I'd even start at this point.
Here is the site:
https://devtest.eboost.com/
I currently have the menu set to 960px width and is centered.
Thanks,
George
Just set the widths of the links to width: 20%; That should split the 5 up into 20% or whatever you have the wrapper set to.
a {
display: block;
float: left;
width: 20%;
}
Look into border-box as well to deal with the padding problems I anticipate you will run into next.
This is the website I'm having problems with: http://bgflirt.com
I need the menu on the left to have a fixed width and the part with the user pictures should resize when the browser window is resized (width in percent). However, as you can see - the part where the content is refuses to align on the right of the menu, but is instead displayed below it. Can someone help me with this ?
For #content_wrap remove width:100% and float:left. This will make box to stretch to fill all available horizontal space.
You'll need to also clear floats in whatever way you prefer. E.g., add overflow: hidden; to #content_wrap.
This works for me in firebug.
BTW, since you use fixed-width graphics for header and footer (frame with those nice rounded corners), you can't really stretch them.
Try using something like this for your CSS:
.container {
position: relative;
}
.sidebar_wrap {
position: absolute;
top: 0;
left: 0;
width: 130px;
}
.content_wrap {
margin-left: 130px;
}
I believe that is much easier to work with than a float.
A couple of things.
First, get rid of the xhtml doctype and instead start using an html 4.01 strict doctype. xhtml, besides being on it's way out, has inconsistent rendering across a lot of browsers.
Second, this is MUCH easier to accomplish with a table. Just set the width of the table to 100% and the width of the first column to 130px. The layout engine will take care of sizing the other side. Incidentally, this will solve some of the other issues you're going to run into such as making both sides have the same height.
your #content_wrap div has a 100% width, like so it's impossible for it to float left when theres a menu with a 130px width...
You should make the menu's width in % if you really want to make the site resizable... something like
#sidebar_wrap{
width: 15%;
float: left;
}
#content_wrap{
width: 85%;
float: left;
}
note that the sum of the width can't be bigger than 100%, and you should take paddings and borders in consideration.