I have a Wordpress page that uses roots startertheme that is based on Twitter Bootstrap. Everything in this theme is placed under a container for good looks but I have a div that I want to stretch 100% in width. I tried to add a class in which I specify width: 100% to circumvent the container but this did not work.
The container uses padding to center divs so I tried to add padding to 0px in this div but this also did not work.
Is there any way to circumvent the container for this div?
Thanks.
.div1{
position: relative;
top: -20px;
width: 100%;
background-color: #redColor;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
The proper way to do it would be to add the official Bootstrap no-gutters class.
If, for some reason, you cannot do then then, if you have control over the parent container styles you can remove the padding by literally deleting the line.
However, Bootstrap, by default, applies left and right padding to the container class. So if you're trying to override that, then you would create:
.container {
padding-left: 0;
padding-right: 0;
}
You may also have to add the !important tag.
If you cannot modify the HTML or the parent class, you could also set your child div to a fixed width that is the container width + the padding. So if the parent container is 980 pixels wide on desktop, and it has 15 pixels of left and right padding you would make the child container 1010 pixels width, left margin of negative 15. Then, to keep it responsive, add media queries for each size and change it accordingly.
Let me know if you need further clarification.
Related
I've looked around and can't seem to find a solution to the problem.
How come the bottom two divs appear cut in perfect halves to the left and right on a windows 8, but on my android s5 it is not centered?
http://danny4help.com/
#grad4_left img {
height: 100%;
width: 100%;
border-radius: 10px 0px 0px 10px;
}
#grad4_right {
z-index: inherit;
height: 700px;
background-color: #F1EEF7;
top: 705px;
width: 50%;
left: 50%;
text-align: center;
font-size: 80px;
line-height: 40px;
color: #4A4A4A;
}
.grad#grad4_left {
z-index: inherit;
height: 700px;
background-color: black;
top: 705px;
right: 50%;
color: #4A4A4A;
width: 50%;
}
You have several divs that have fixed widths in pixels, both above and below the incorrectly centered divs. These divs are wider than the body, so the viewport automatically expands to show the full width of those elements, making it seem as though your divs are incorrectly centered. Simply replace the pixel units of the width of the too wide divs with either percents of viewport units and you'll be good to go (e.g., .grad has a width of 1280px. Change that to 100vw). For a quick and dirty fix, add this block to the top:
* {
max-width: 100vw;
}
EDIT: Some other answers are advising you not to use absolute positioning in responsive layouts. Using position: absolute is actually OK as long as you are using relative units (e.g., %, em, vw) and not fixed units (e.g., px, in, pt).
Actually it's already centered in mobile. The reason why you see it's not aligned center is because you have set your grid div to width: 1280px while the body element is only 100%. Also as #Michael_B mentioned, besides having no height, it can't get the width of your elements inside your body element. I would advise you to not build a layout solely with position: absolute elements, because it will be better for responsive layouts, and I assume that you are targeting mobile.
Anyway, below are the few fixes I can suggest to you.
html, body add width 100%
.grad remove width
.grad1 remove height
.grad#grad1 img add max-width to 100%, add display: block
#shade remove position: absolute, remove width
#grad1.grad #scrolling_text change to width 100%
#block_text remove width
#nested_skills change to font-size: 16px so that your grad3 div can take the width of your text
.grad#grad4_right add overflow-y: scroll. If you do not want to have the scrollbar then set height: auto but it will be a different height than the image on the left. Also it will not show the left margin on the left div as well as the right margin on the right div because you are using absolute.
.grad#grad5: you have to adjust the font size for this yourself
.grad#grad6 add left: 0; right: 0; margin: 0 auto
.grad#grad7 add display: block
This should be good.
So I've been told (maybe this is wrong) that if you want to overide (go beyond) the margins of a parent div simply make the child position:absolute. The problem with this is that it will overlap text that is set below that div.
Is there a way to;
Override the margins of the parent div and have that div still push down the adjacent text?
Can this be executed by not applying a margin-top: to the first block of text? This solution seems sloppy, the layout would blow up while in mobile view.
Thanks for you help / opinion on this one.
The page in question can be found here.
remove the image background for the div has the position absolute and put the image as a background for the parent div with the following selector:
.entry-content {
padding: 0 40px 40px;
background: url('http://www.gridviper.com/phelan/wp-content/uploads/back-blue-top4.jpg') no-repeat;
background-size: 100% 219px;
}
and change the absolute div css to be as the following:
.content-masthead {
max-width: 100%;
min-height: 219px;
position: relative;
left: 0;
right: 0;
margin-left: 0px;
padding-left: 0px;
}
Few hinds to help you fixing this:
This this not the parent, but the first positioned ancestor (with position other than null, can be "relative").
You can define the size of this element in percentage relative to this ancestor.
You can use padding instead of margin to keep the space.
I am trying to set the background color of my container div and all child div's within it but I can't get it to work for some reason, and I am unsure as to where I am going wrong.
When I set the background-color and a border on the container you can see that it is not actually "containing" any child elements.
#facility_container{
text-align: center;
padding: 2px;
width: 100%;
background-color: #ffffff;
}
Here is a JSFiddle demonstrating where I am at so far.
Add overflow: hidden to #facility_container, #facility_general_info, #facility_section_info
Float makes the inner divs not expand the outer ones. Using table settings to style your page is a big no-no in HTML5.
working jsfiddle: https://jsfiddle.net/nayish/docg128w/8/
The issue here is that, since your #facility_info divs are floated, they are taken out of the normal element flow, and therefore do not affect the width or height of the #facility_container div.
As suggested by Jon Ducket in his book HTML & CSS:
Set the container div's overflow property to auto, and its width property to 100%.
#facility_container {
text-align: center;
padding: 2px;
width: 100%;
background-color: #ffffff;
width: 100%;
overflow: auto;
}
In this case, since #facility_general_info already takes up width and height, it is not necessary to set #facility_container's width to 100%, but the above-mentioned property values can be used for elements that contain only floated elements.
I'm building this 15 page website so I really want to make my main container ( the light grey one ) be flexible in height.
When I select specific pixel height on my home page ( the only page so far ) everything is great but when I change it to 100% height, my container completely disappears. Is there anything I should do differently?
My link:
http://dariawdesign.com/acupuncture/StamfordAcupunctureHome.html
CSS for the container:
#maincontainer {
width: 1110px;
height: 3900px;
background-color: #E6E7E8;
margin-left: auto;
margin-right: auto;
margin-top: -16px;
}
Don't set your height to a pixel value, let it be auto. Then add overflow: hidden to your #maincontainer styles to expand the container to fit its floated children.
I have a website here
http://trentmcminn.com/
For some reason the bottom of the page (the word Barney) is slightly cutoff by the fixed position footer. I am trying to add padding to the bottom of the body by this but it is not doing what I am trying. I am not sure what is going on. ANy help would be appreciated.
body {
padding-bottom: 100px;
height: 100%;
}
This happens because the absolutely positioned footer is overlapping with column layout.
You could either reduce the size of the columns and give them a negative bottom margin, or apply a padding to the columns like for example:
div#grid.col-4 div.column {
width: 25%;
padding-bottom: 10px;
}
html{ padding-bottom: 25px;}
This pads 25 pixels to the bottom of every page that uses the css that includes this tag. All pages should have tags enclosing the content. This is a better option then body because dynamic content and floating divs may not give the desired effect within the body. It also is handy in that it will give you a constant padding effect on all pages within the site.
Increase the margin of you div#grid.albums div.item from 30px to 50px, for example.
That will solve your problem.
Update following style rule:
div#grid.albums div.item {
margin-bottom: 30px;
margin-right: 30px;
padding-bottom: 1px;
}