I have multiple rows that I would like to line up all in the same fashion.
<div class="row">
<div class="col-md-3">
<div class="img-circle index circle partner-circle box-shad"></div>
</div>
<div class="col-md-9">
<h2 class="partner-heading">Stuff </h2>
<hr />
<p class="lead">This is some text</p>
</div>
</div> <!-- row -->
But the h2 text is not lining up properly in relation to the other elements as shown in this picture:
The site is HERE if you would like to see it live. Can you help me figure out why the styling is inconsistent between the elements?
change (in your style.css)
.circle1, .circle3 {
margin: 39px 0 41px;
}
to this
.circle {
margin: 39px 0 41px;
}
then all the Images Line up with the rightside content
Related
On the Page: jerkydirect.com/base/opportunity - There are 3 boxes within the container with the picture. However, when viewed on a Large Screen - the last box sticks over the right side.
It looks great in a smaller window or mobile but not on a larger screen.
How do i get this to align correctly?
Here is the code:
<section class="plan-box opportunity">
<div class="container">
<div class="row">
<h2>Choose Your Crave:</h2>
<div class="col-xs-12 col-sm-12 col-md-12">
<center>
<div class="package">
<h3>Twin Pack</h3>
<p>2 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$19.75</span></li>
<li><span>Retail Price:</span><span>$21.75</span></li>
<li><span>Commission Payout:</span><span>$5.00</span></li>
</ul>
</div>
</center>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>family Pack <span></span></h3>
<p>4 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$39.50</span></li>
<li><span>Retail Price:</span><span>$41.50</span></li>
<li><span>Commission Payout:</span><span>$10</span></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>Party Pack <span></span></h3>
<p>10 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$79.75</span></li>
<li><span>Retail Price:</span><span>$87.75</span></li>
<li><span>Commission Payout:</span><span>$15</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Your HTML code is fine.
Problem lies with your CSS
.package {
width: 350px;
height: 230px;
background-color: rgba(0,0,0,0.6);
border: 15px solid rgba(52,53,48,0.6);
margin: 50px 0 0;
padding: 25px 20px;
}
You shouldn't hard code the width with some pixel value rather remove the pixel value.
Hope this will help you.
Remove the <div class="container"></div> you already have one right after .inner-container.
And Content should be placed within columns, and only columns may be immediate children of rows.
Remove width: 350px from .package div from css.
#service-one .package {
width: auto !important;
}
Or add this style on css files
Trying to build a webpage where I have half page image and other half text.
So far this is what I have, I have it working, just when I shrink the page, the text overlaps the photo.
.css file:
.z-img{
padding: 0 0 10px 0;
border: none;
border-radius: 0;
position: fixed;
}
.z-content {
padding: 70px 0 10px 0;
color: #c0d1ca
}
html file:
<div class="container-fluid">
<div class="row">
<div class="span6">
<div class="z-img">
<img src="...." width="732" height="432">
</div>
</div>
<div class="span6 text-center">
<div class="z-content">
<div class="well">
<h2> About Me: </h2>
</div>
<div>
<blockquote>
<p>............</p>
</blockquote>
</div>
</div>
</div>
</div>
I want to ensure when I shrink the page lets say on a mobile, I do not want the text overlapping the image. Also possible to have the image shrink and enlarge according to the screen size instead of having it as a static size? I do want it to cover half the page though
I have figured it out, I just had to add the class="img-responsive" tag to my photo tag.
We're building a website using the Bourbon Neat grid framework. It uses float: left for column placement.
Our site structure consists of rows which may contain one or more columns. If we only have one column, it is not floated and has 100% width. The content elements called components are placed inside columns that may or may not float.
Rows may have a white background color for highlighting purposes.
Components may have margin at their top and bottom, but not all components do. We're letting the margins collapse to preserve the vertical rhythm of the content without adding extraneous space around it.
Our problem is that floating elements create their own block formatting context, preventing their margins from collapsing. This causes columns to have gaps that look awkward. See the example:
The left side is what I get, the right side is what I want.
Is there some way we could cleanly circumvent this problem? Javascript solutions are fine if there is no pure CSS fix.
body {
background-color: #ccc;
}
p {
margin: 1em;
}
.column {
float: left;
width: 33%
}
.white {
background-color: #fff;
padding: 1px 0;
}
.white + .white {
padding-top: 0;
margin-top: -1em;
}
<div class="row">
<div>
<p>
These two
</p>
</div>
</div>
<div class="row">
<p>
should collapse
</p>
</div>
<div class="row white">
<p>
This should not collapse
</p>
</div>
<div class="row">
<p>
These two
</p>
</div>
<div class="row">
<p>
should collapse
</p>
</div>
<div class="row white">
<p>
These white ones
</p>
</div>
<div class="row white">
<p>
should collapse
</p>
</div>
<div class="row">
<div>
<p>
These two rows
</p>
</div>
</div>
<div class="row">
<div class="column">
<p>
should collapse
</p>
</div>
<div class="column">
<p>
vertically
</p>
<p>
Also, the column
</p>
<p>
contents should
</p>
<p>
have margins
</p>
<p>
that collapse
</p>
</div>
<div class="column">
<p>
with floats
</p>
</div>
</div>
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}