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
Related
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.
I'm new to web development and I'm trying to create a very simple card-based "dashboard" page in HTML and CSS.
You can see basic example of this (with the content cut out) on jsfiddle. As you can see I've got two basic card sizes, large and small, which are set to float left and thus take up remaining space using the following CSS classes:
.small-card, .large-card {
border: 1px solid gray;
border-radius: 3px;
margin: 2px;
float: left;
width: 250px;
height: 250px;
}
.small-card {
height: 122px;
}
But the issue you may have spotted is that the larger cards will block smaller cards from taking up space to their lower left, leading to gaps in the layout depending on the screen size or card order. It's clear to me now that the float property alone won't give me the result i'm looking for.
My question is, can this be resolved in a way that keeps the overall simplicity of the dashboard, without changing the order that the cards are defined in the HTML? I just want the cards to take up the top-left-most available space without leaving any gaps.
I have a feeling it's not going to be simple, but any suggestions appreciated. Thanks.
Try using the bootstrap grid system for this.
Here is some code using it along with your css:
.small-card, .large-card {
border: 1px solid gray;
border-radius: 3px;
height: 250px;
}
.small-card {
height: 125px;
}
}
<div class='row'>
<div class="col-xs-12">
<div class="col-xs-6 large-card">1</div>
<div class="col-xs-6">
<div class='row'>
<div class="col-xs-12 small-card">2</div>
</div>
<div class='row'>
<div class="col-xs-12 small-card">3</div>
</div>
</div>
<div class='row'>
<div class="col-xs-6 small-card">4</div>
<div class="col-xs-6 small-card">5</div>
</div>
<div class="col-xs-6">
<div class='row'>
<div class="col-xs-12 small-card">6</div>
</div>
<div class='row'>
<div class="col-xs-12 small-card">7</div>
</div>
</div>
<div class="col-xs-6 large-card">8</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
This is similar to the layout I'm trying to achieve:
The code I have now
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
I have tried using CSS class "no-padding" and also tried playing around with margins. when i apply 0 padding, the left side of the first image touches the edge of the browser( this is desired), however the other edge(right side of image) still has some empty space.
How do I get rid of that empty space get the results like the reference layout?
.col-md-6{
padding-right: 0px;
padding-left: 0px;
}
There could be an issue with the <p> padding/margin, could also be an issue with the <img> padding/margin. However it seems to be an issue with the sizing of the elements within the row.
I did however seemingly fix the issue in my PEN HERE
I added a height: *** to the row class, this may be needed for desired results as you are using row-eq-height bootstrap class.
HTML
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
CSS
p{
margin: 0;
padding: 0;
}
img{
margin: 0;
padding: 0;
}
.row {
margin: 0;
padding: 0;
height:60px;
background-color: #eee
}
If using the LESS/SASS source: change #grid-gutter-width in the variables file to 0
If you want to get rid of the white space you will need to make your image bigger to span the cols. You can manually adjust the width of an image using css:
img {
width: 100%;
}
I need to adjust Bootstrap columns to look like this.
The thing is that on smaller devices I just want to hide this blank areas on the sides, thus I don't wanna use just margins or paddings.
How can I achieve that? col-md-1 seems too small for the indents, while col-md-2 is too broad.
My Codepen with Bootstrap included.
HTML
<div class="container">
</div>
CSS
.container {
height: 230px;
background-color: blue;
max-width: 1050px;
padding-left: 15px;
padding-right: 15px;
}
If you don't want to declare any new classes padding etc. You can simply nest the columns bootply.com
Not really sure what you're trying to achieve here. The container changes it width depending on the screen size using media queries. The white/blank space you're trying to get rid off is disappearing when the size of the screen is less than 768px.
What you can do, if I understand your question correct is this option:
HTML:
<!-- CONTAINER -->
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
</div>
</div>
</div>
</div>
<!-- CONTAINER FLUID -->
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
</div>
</div>
</div>
</div>
CSS:
.container-fluid,
.container {
height: 230px;
background-color: #333;
/* max-width: 1050px; */
padding-left: 15px;
padding-right: 15px;
margin-bottom: 15px;
}
html, body {
color: #fff;
}
Couldn't you just use a #media tag to cut the padding out when in mobile view? Makes it a lot easier. Just add the class below to either your container or row.
.marginClass{
margin: 0 15px 0 15px;
}
#media screen and (min-width: 480px) {
.marginClass{
margin: 0;
}
Actually you're probably better using margin. I've updated that.
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;
}