in the past couple of days I've been trying to stretch a certain section to fill the entire container, and I got it working. Problem is, in mobile/tablet a left-right scroll bar appears and it also messes up the sticky header.
Page that I stretched: https://roi.pub/about-me/
Code I used:
#primary .container {
padding-right: 0px;
padding-left: 0px;}
.layout-content.boxed #primary {
padding: 0px;
}
#media only screen and (min-width: 768px) {
.layout-content.boxed #primary{padding: 0 !important;}
}
And here's what a page looks like prior to stretching: https://roi.pub/elementor-2620/ I'm just trying to get the content to fill the white container without messing things up.
Advice will be appreciated.
You removed padding from the .container class, which is what needs to be there for bootstrap to work like it should.
NOTE Never override bootstrap added classes, if you want to change how bootstrap work, pull in sass/less version and do your stuff there.
On the .row bootstrap use -15px on left and right to accommodate for padding of 15px on left and right of the .container, thus when you remove padding from .container you get mess, don't override bootstrap.
#primary .container {
padding-right: 0px;
padding-left: 0px;
}
.container needs to have padding of 15px, those lines above is what makes your horizontal scrollbar. When I remove them everything work fine.
If you are not bothered with overrding bootstrap (you should) instead of setting padding to zero on the .container you need to set padding to zero on the columns itself. Like this.
.full-width {
padding: 0;
}
You already have that class, on the element that also have .col from bootstrap.
GENERAL COMMENT
If you find yourself in a need to change bootstrap setting you should use sass/less to alter the setting, but if you find yourself in a need to change bootstrap behavior then DON'T use bootstrap.
Your problem has appeared from the 1170px width of the screen (this is the width of your theme too).
so there are two solutions
Remove the -15px from the margin from the max-width media query: 1170px, and also remove the #primary #content #main paddding
#media (max-width: 1170px){
#primary #content #main {
padding-left: 0;
padding-right: 0;
}
#primary #content {
margin-left: 0;
margin-right: 0;
}
}
Either apply this code #primary .container {overflow: hidden;} on the container to hide any overwriting
Related
I have seen the .container class being used in multiple places but never understood the use for it. And there is also the .container-fluid class.
Can anyone explain the use of the container class with a brief example?
It´s simple. a div.container class apply a fixed with (applies margin auto) for containing the content you want inside. And this container is responsive so when you are in XS mode (mobile) the container width is 100%.
.container-fluid just apply a 100% width (full width) in all devices, so you will see your content spanning the entire width of your viewport.
The best way to check this is to create a simple html with a div and set it a background-color, then apply .container and .container-fluid to see the effect resizing your explorer.
The .container classes in bootstrap are just that, containers for your content. By using them, your content inside can take advantage of bootstrap grid system. These classes also add some stylings like padding, centering the container, and making it responsive.
from bootsrap
Containers
Bootstrap requires a containing element to wrap site
contents and house our grid system. You may choose one of two
containers to use in your projects. Note that, due to padding and
more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire
width of your viewport.
<div class="container-fluid">
...
</div>
Margin and width is the difference !!!
#media all and (min-width:992px) {
.container {
width: 970px;
}
}
#media all and (min-width:768px) {
.container {
width: 750px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Normally container-fluid does not provide any margin in any kind of screen
But container provide particular margin in md and lg screen
REFERENCE
I have a fixed top navbar in Twitter Bootstrap 3.
Everything works good until 1350px. After 1350px there becomes a gap between navbar contents. So I want to center my navbar.
I checked answers on this, this and this. None of them worked for me.
This is my fiddle: http://jsfiddle.net/mcqHE/56/
Currently I use Navbar 1.
To try centering navbar, I added Navbar 2 to the fiddle.
Check fiddle in 1500px width.
* Navbar 1 is one line, not centered and has gap.
* Navbar 2 is centered, no gap, but it is two lined.
It seems like the cause is this rule: #media (min-width: 1200px) .container { max-width: 1170px; }
So how can I make navbar centered, and one line if width is bigger than 1350px ?
This is an aswer for your problem:-)
You need to add follow lines to css:
#media screen and (min-width: 1350px) {
.navbar { text-align: center; }
.navbar-header { display: inline-block; float: none !important; }
.navbar-collapse.collapse { display: inline-block !important; }
}
Here is solution on: http://jsfiddle.net/myN2s/ .
Let me know if you solve this.
Everytime when you want to center elements, you need to add text-align:center to the parent element, and display: inline-block to elements which you want to center horizontally. None of these can be floated (this is very important).
This fix wil affect all styles on your page. But I guess it is what you are asking for, there was not enough space to put in on one line.
http://jsfiddle.net/mcqHE/58/
* {
font-size:10px;
}
Although the below answer covered most of it, I noticed the menus are still not in one-line, here are the following change I've made:
1) Yes, it's the width that's creating the two-gaps but the major culprit is the .container. So remove the <div> with the class .container
2) Add this CSS to keep your menu items centered:
.navbar-inner { text-align: center; }
3) Lastly this:
.collapse.navbar-collapse.in{ display: inline-block !important; }
Binds the two <ul> elements together.
Additional:
If you want the heading 'Navbar' to be centered too, you can do:
.navbar-header { float: none; }
Here's the JSFiddle.
And it's effect on a resolution > 1350px.
for navbar 1 add the following css to this div div class="navbar-collapse navbar-part2 collapse
max-width: 1350px;
margin-left: auto;
margin-right: auto;
max width will make sure the nav part wont go wider than 1350px
margin-left:auto and margin-right:auto will center the nav.
I think this is what you're after? if not sorry!
I am creating a design for my site using a recently downloaded bootstrap
I tried with row and span12 layout the container div is not centering to my screen. I'm using 58cm LED Monitor(its not looking centered).
The DIV width is showing 1170px(Firebug) its suppose to be 940px.
Please Check my design here http://rentbbsr.com/projects/daycare/
It suppose to be like this http://rentbbsr.com/projects/daycare/daycare.jpeg
I just want the header to be fixed and centered.
There are a bunch of reasons. You have negative left margin on the row:
#media (min-width: 1200px)
.row {
margin-left: -30px;
}
}
.row {
margin-left: -20px;
}
Then you have another margin on the span:
#media (min-width: 1200px)
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Then your container that you centered is wider than the contents. As it is wider, it centres that element, but it has a empty area. If you set it to the width of whatever you want to center, such as the tree graphic or the menu below, it will actually be centred.
In this case i set it to the width of the top graphic:
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 988px;
}
Remember to also set it in the media query.
So in summary, your wrapper elements are wider than the contents, and you have various margins all over the place, which adjust the width even more. If you remove those and set the correct width it will center as expected.
Im having trouble lining up the thumbnails (4 blocks). The last block broke to the second line. Is it the width of the container inside div? If I minimize the browser smaller, the blocks are lined up just fine, but no gaps between them. http://magnixsolutions.com/dev/test/test.html.
Also why is the cursor centered in the textfields?
To position the cursor to the left in the textfields, you can use this:
.fname, .lname, .zipcode
{
text-align: left;
}
Yes, it is. Your thumbnails container is shorter than your thumbnail sum their lengths together with their gaps.
Try something like this:
.thumbnails {
margin-left: -15px;
...
}
.thumbnails li {
margin-left: 15px;
...
}
.thumbnail {
width: 220px;
...
}
This is the modification to your bootstrap css file. So if it does not take any effect, apply !important to enforce them.
UPDATE:
you forgot to apply:
.thumbnails > li {
margin-left: 15px !important
}
After starting work for a new company, I've been charged with building a new site for them. This is what I've got so far:
http://ghostevolution.com/ghostds/
The problem is that it isn't working correctly on the iPad - the header background colour doesn't stretch across the full width of the screen like it is meant to - this is also true of the mid-section light-grey background colour on pages such as http://ghostevolution.com/ghostds/?page_id=160
Does anyone know why this is? Thank you.
The half-assed proper way to do this is to wrap your contents in a container that spans 100% of the screen width. For example:
CSS
.wrapper {
display: block;
width: 100%;
padding: 10px 0; /* add some top + bottom padding */
background-color: #252525;
}
.aligner {
display: block;
width: 960px;
margin: 0 auto;
}
.container {
display: inline-block;
}
HTML
<div class="wrapper">
<div class="aligner">
<div class="container">
// stuff
</div><!-- /container -->
</div><!-- /aligner -->
</div><!-- /wrapper -->
It's not the prettiest, but it allows you to throw 100% width background-colors on any section, and works in < IE8. You can do whatever you need to within div.container (float, position, etc) and it will expand the .wrapper element (thus expanding your background color).
Each div.wrapper should be treated as a "section" - 'header', 'feature', 'content', 'footer', etc...
Another alternative is to start using #media queries, which would allow you to essentially plug in code for specific screen widths (880/1024px for iPad, portrait/landscape).
#media screen and (max-width: 880px) {
.my_element {
/* attributes */
}
}
This is due to issue that is often forgotten (in desktop browsers as well). I'm pretty sure..
You see, with any desktop browser. Change the width of the window less than your wrapper width and scroll to the right. That would show the page as cut off.
This can be fixed quite easily.
removed csspivot site since its no longer running
The basic idea is to add the same background that gets cut off into element that has fixed width since browser can't do anything to that.
Add CSS:
#auxiliary .wrap {
background-color: #bbb; /* Same as the #auxiliary bg color*/
}
#branding .wrap {
border-top: 6px #92C201 solid; /* Same as #branding border and bg and height*/
background-color: #333;
height: 60px;
margin-top: -6px; /* I wouldnt necessarily use this to get it to top but works as well. */
}