In one of my row's I'd like to put a max width and center my text within that div.
My homepage text currently looks like::
I'd like to put a max width and center the text within this one section.
Ideal outcome:
CSS
.homepage-text {
font-size: 130%;
}
.light-section {
background-color: lightblue;
/* color: white; */
text-align: center:
}
HTML
<div class="row light-section">
<div class="col-sm-12">
<div class="col-sm-12 homepage-text">
<p>Text sit's here</p>
</div></div></div>
Live Link: http://185.123.97.138/~kidsdrum/moneynest.co.uk/
Maybe I didn't understand exactly what did you mean, but try this:
.homepage-text {
font-size: 130%;
max-width: 1000px;
margin: 0 auto;
float: none;
}
Try this code :
.homepage-text {
font-size: 130%;
width: 960px;
margin: auto;
float: none;
}
I've set a fixed width of 960px instead of a fluid width of 100% and center this container with margin: auto;
Also, you have to unset the float property to make the margin: auto; works.
Wrap the content in a fixed width or a maxed width max-width div, then make it float:none; and set the right and left margins auto !important
<div class="row light-section">
<div class="col-sm-12">
<div class="col-sm-12 homepage-text" style="width: 400px; float: none;margin: 0 auto !important;">
<p>Text sit's here</p>
</div>
</div>
</div>
You could also pull this off using dynamic margin & width values, without altering the float nor using margin: 0 auto; (If you want to use that margin, you will have to use float: none; Otherwise, it won't automatically center the homepage-text.)
.homepage-text {
font-size: 130%;
margin: 0 25% 0 25%; // Same as margin: 0 25%; but it illustrates 25+25+50=100%
width: 50%;
}
Bootstrap has already done that job for you. All you need to set is the max-width of the container class. Doing so helps to maintain consistency in the page layout. Here is the fiddle.
.container {
max-width:700px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="container">
<p>Text sit's here</p>
</div>
</div>
Related
I want to make a class full bleed but I cant.
Here is the HTML :
<div class="main-class">
<div class="background">
<p>some info in the background</p>
</div>
<div class="content">
<p>Some random content</p>
</div>
</div>
and css :
.main-class{
padding: 20px;
width: 100%;
background-color: #fff;
display: inline-block;
box-sizing: border-box;
}
.background{
margin: -20px;
background-color: #eee;
display: inline-block; // must use inline-block
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.content{
margin-top: 30px;
}
and here is a demo: https://jsfiddle.net/uumkjLy8/1/
the background class must be full bleed with background but as seen in the demo there is white space on the right side.
The background element is inside of an element that has padding, meaning it can only extend the full width if you do some sort of "cheesy" method to extend it outside of its parent element (width > 100%, etc).
Your negative margin is not going to fix the width because it is only moving the div, not enlarging it. With 100% width and a parent that has padding, it will never fully cover its parent's width.
See this fiddle please: https://jsfiddle.net/uumkjLy8/6/
I've removed the padding from .main-class, as well as the negative margins on your .background.
Remove box sizing from .background
https://jsfiddle.net/uumkjLy8/8/
I think you don't need the padding: -20px at the .background class. Furthermore, add a padding: 20px to the .content class in order to be lined-up with .background
This can be straightforward as:
.main-class {
background-color: #fff;
}
.content,
.background {
padding: 20px;
}
.background {
background-color: #eee;
}
<div class="main-class">
<div class="background">
<p>some info in the background</p>
</div>
<div class="content">
<p>Some random content</p>
</div>
</div>
...unless you are forced to use some of that redundant CSS...
In such case state that in your question.
I am trying to learn how to make a responsive grid layout with images. I feel i am almost there but i am having a few issues with alignment. First of all to make things easier to understand I have made a mock-up of what i am trying to achieve:
(grid will be used to display images/posts. i want to be able to mix and match them.)
Screen-shot of what i have achieved so far:
but when i add a med-box to the grid i have alignment issues. as you can see here:
(the height of the MED-BOX is slightly taller than the SML-box and the SML-BOX does not align properly.)
I also have this problem when i add another 3 x SML-BOX under a column with a MED-BOX in it:
I thought it was something to do with the % width of my "med-box" (see code below) but i have tried adjusting the width percentage and cant get it to work! Another issue I am having is when i go into mobile width, the margin on the left is off and i am not sure why. Please check out my code below or on JsFiddle: https://jsfiddle.net/shiggydoodah/z0og70wn/
I have been stuck on this for awhile now and i really need to some expert advice. If anyone knows how to fix this it would be greatly appreciated if could share it with me.
Many Thanks
Louis
section {
width: 80%;
margin: 20px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
border: 4px solid red;
overflow: hidden;
}
.row {
margin: 0 auto;
width: 100%;
}
.col {
min-height: 40px;
margin-left: 1%;
margin-right: 1%;
margin: top 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
}
.col:first-child {
margin-left: 0px !important;
}
.col:last-child {
margin-right: 0px !important;
}
.img-responsive {
max-width: 100%;
height: auto;
display: block;
padding: 0;
}
.col.lrg {
width: 100%;
}
.col.sml {
width: 32%;
}
.col.med {
width: 65%;
padding: 0;
}
#media (max-width: 766px) {
col {
width: 90% !important;
margin: 10px auto !important;
padding: 0;
}
.col.lrg {
width: 100%;
height: auto;
}
.col.sml {
width: 100%;
height: auto;
}
.col.med {
width: 100%;
height: auto;
}
}
<section>
<div class="row">
<div class="col lrg">
<img class="img-responsive img-lrg" src="http://i.imgur.com/9nN5kU8.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col med">
<img class="img-responsive" src="http://i.imgur.com/GBKW5ri.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
</section>
First of all there are a few issues with how you are using your grid. Whenever you float an element you essentially remove said element from the document flow. This means subsequent elements will not know how to position themselves in the natural flow of things. You need to ensure you use a clear in order to negate the effects of a float.
In additional the medium element needs to be set to 66% width to account for the margin on the left and right of your small column class. Please see edited fiddle
CSS:
.col.med {
width: 66%;
padding: 0;
}
I have also added a clear to your row class:
.row::after {
content: "";
display: table;
clear: both;
}
I have also removed the use of the !important statement you've implemented. This is a very bad practice to adopt as if you are using inheritance correctly and the natural cascading nature of CSS then you will not need to explicitly try to override anything using this method.
This issue is due to the proportions of your MED-BOX image.
You should crop it a little bit with some modifications on your .row css properties.
.row {
margin: 0 auto 15px;
width: 100%;
max-height: 455px;
overflow: hidden;
}
I equally add a bottom margin per row as the overflow hidden behavior cause the .col bottom margin property to be hidden by the row overflow.
You have to clear each row when you have floating elements inside of it and overflow: hidden so that it could fill the height.
.row
{
clear:both;
overflow: hidden;
}
Im floating a heading to the left and a div containing a few links to the right. At wide screen widths everything is fine.
At smaller widths the links appear under the heading. Instead I need the heading to wrap.
My content is dynamic, the heading text will vary in length and the number of links with vary also. Therefore I dont believe I can use % widths.
I can alter the HTML however I need to keep the heading above the links in the HTML. This is because for the smallest media query the heading will be above the links.
http://codepen.io/anon/pen/OPxbxG
<div class="container">
<h1>Title goes here</h1>
<div class="links">
Link one
Link two
</div>
</div>
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
}
h1 {
float: left;
margin: 0;
}
.links {
float: right;
}
Did you mean something like that : http://codepen.io/anon/pen/ZYXBoB ?
I just remove the float:left; on the title and put it after the menu in DOM.
1) Place the links first in the markup
2) Set overflow:hidden (or auto) on the heading instead of float:left
Updated Codepen (Resize page to see this work)
The reason why this works is that setting overflow:hidden (or auto) establishes a new block formatting context. For more info see this post.
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
}
h1 {
overflow: hidden;
margin: 0;
}
.links {
float: right;
}
<div class="container">
<div class="links">
Link one
Link two
</div>
<h1>Title goes here</h1>
</div>
If CSS3 is an option, then you can use flexbox to acheive this, without having to change the order of the markup.
Just set display:flex on the container and flex:1 on the heading to fill remaining viewport width (not taken by the links)
Updated Codepen
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
display: flex;
}
h1 {
flex: 1;
margin: 0;
}
.links {
float: right;
}
<div class="container">
<h1>Title goes here</h1>
<div class="links">
Link one
Link two
</div>
</div>
I am trying to centre the middle circle but I am unable even when set to margin: 0 auto; and display: inline-block; or display table. Any suggestions?
JSFiddle
HTML
<div id="intro">
<p class="body">As part of Science World’s Cycle Safe Initiative we have installed sensors at each of our gates. In the past year we have had over <b>300,000</b> people ride along. Some information we gathered for June included;</p>
<span class="blue circle">
<h3>2 - 3PM</h3>
<p>is the busiest hour</p>
</span>
<span class="green circle">
<h3>117,295</h3>
<p>riders this month</p>
</span>
<span class="navy circle">
<h3>10%</h3>
<p>of Vancouverites*</p>
</span>
</div>
CSS
#intro {
max-width: 1080px;
margin: 0 auto;
}
#intro .circle {
min-width: 230px;
min-height: 230px;
display: inline-block;
text-align: center;
border-radius: 1000px;
color: white;
margin: 60px 0;
}
#intro .circle h3 {
margin-top: 80px;
margin-bottom: 0;
font-size: 2.2em;
}
#intro .circle p {
margin-top: 0;
}
#intro .circle.blue {
background: #0079c8;
}
#intro .circle.green {
background: #2ecc71;
}
#intro .circle.navy {
background: #34495e;
float: right;
}
Add text-align:center to the #intro (as your inner content acts like inline) and add float:left to your #intro .circle.blue.
Example
Only block-level elements can be centered with margin:0 auto.
You can probably achieve the effect you want in other ways, though.
See this updated version of your jsfiddle for a solution via adding the following CSS to your middle circle:
position:absolute;
left:50%;
margin:-115px;
(Note that the negative margin-left must be equal to half the element's width to make it appear centered using this solution.)
I have updated your code: http://jsfiddle.net/h9HGG/6/
The trick is to put each circle centered inside a div which is set to "display:table-cell". Then wrap all the circle inside a container which is set to "display:table".
example:
<div class="wrapper"> <!--display: table, width: 100%, table-layout: fixed -->
<div class="circle-container"> <!--display: table-cell, text-align: center -->
<!--circle 1-->
</div>
<div class="circle-container"> <!--display: table-cell, text-align: center -->
<!--circle 2-->
</div>
<div class="circle-container"> <!--display: table-cell, text-align: center -->
<!--circle 3-->
</div>
</div>
I'm not sure this is going to work for you - FIDDLE
I put the circles in divs, floated them left, align: center, and gave each one a width of 33%.
They are flexible, and even overlap when the screen is moved horizontally (not sure if that works for you).
CSS
.centerme {
float: left;
width: 33%;
text-align: center;
}
I need inner_holder to have width of 960px and I need it to be centered. I tried using width: 960px and margin: 0px auto but it doesn't work. How can I center the divs inside inner_holder?
HTML:
<div class="parent_container">
<div class="inner_holder">
<div class="column column1">
<div class="inner_clip"></div>
</div>
<div class="column column2">
<div class="inner_clip"></div>
</div>
<div class="column column3">
<div class="inner_clip"></div>
</div>
</div>
</div>
CSS:
.parent_container {
height: auto;
margin: 15px auto;
min-height: 500px;
width: 960px;
}
.column {
float: left;
margin-right: 50px;
}
.inner_clip {
background-color: #333333;
height: 250px;
margin-bottom: 20px;
width: 250px;
}
As you can see here the "div that contains floated elements" is actually in the center (red).
I am assuming you want to center the floating elements themselves, not their parent. I'm afraid you can't do that (as far as I know). But in case you are not depending on your elements actually floating, you propably just want to display your .colum as inline-block with an text-align:center set to the parent.
Changes to your CSS:
.parent_container {
text-align:center; // added
}
.column {
display: inline-block; // added
margin: 0 25px; // added
float: left; // removed
margin-right: 50px; // removed
}
Result as Fiddle
I beat my head trying to figure this out forever.
The answer above about assigning "display:inline-block" to the elements in the div, and then assigning "text-align: center" to the parent div works
BUT BUT BUT... I had a class of "clearfix" on my parent div that apparently was mucking the whole thing up. As soon as I removed that clearfix class everything centered nicely (after hours of futile frustration, of course;).
Hope this helps someone.