So I am trying to add a footer but it has unnecessary space of 2 lines in the end and that too in the background color of the page. How do I fix that?
footer {
text-align: center;
background-color: orange;
margin-bottom: -200px;
height: 5em;
}
.contact {
padding: 0px;
}
.contact a {
color: black;
margin-top: 30px;
}
<footer>
<div class="container contact">
<div class="row">
<div class="col-md-12 align self-center">
<p> Made with ❤ by Team PitchTeen </p>
<a class="contact-link" href="mailto:teampitchteen#gmail.com">teampitchteen#gmail.com</a>
</div>
</div>
</div>
</footer>
If with "unnecessary space of 2 lines in the end", do you mean the "padding" bottom after the link, you can just remove height from footer CSS Properties, like this:
footer {
text-align: center;
background-color: orange;
margin-bottom: -200px;
/*height: 5em;*/
}
/* useless too now
.contact {
padding: 0px;
}*/
.contact a {
color: black;
margin-top: 30px;
}
<footer>
<div class="container contact">
<div class="row">
<div class="col-md-12 align self-center">
<p> Made with ❤ by Team PitchTeen </p>
<a class="contact-link" href="mailto:teampitchteen#gmail.com">teampitchteen#gmail.com</a>
</div>
</div>
</div>
</footer>
Related
Somewhat like a ebay search page like this
enter image description here
in my code, only the first listed item looks just like the image above, but every picture after floats to the right side of the page, but the text stays on left.
I want it to look like this:
[]-list
[] -list
[] -list
with the code I have, the image in the second div is pushed to the right side. I want all images and text aligned underneath each other to look somewhat like the ebay layout
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<html>
<style>
*, html {
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
color: #000;
font-size: 30px;
font-family: Arial;
}
.clear {
clear: both
}
product_img
{
display:flex;
40px
}
.businessInfo
{
float: left;
margin-left: 12px;
width: 552px;
text-align: left;
}
.businessName
{
float: left;
margin-top: 2px;
text-align: left;
color: #ffffff ;
}
.sitePromotion
{
float: left;
margin-top: 6px;
font-size: 14px;
color: #ffffff ;
}
.baseLocation{
float: left;
font-size: 15px;
background: #ffffff ;
}
.location {
float: left;
font-size: 15px;
color: #ffffff ;
}
.contactInfo {
float: left;
margin-top: 4px;
font-size: 15px;
color: #ffffff ;
}
.connectInfo {
float: left;
margin-top: 10px;
font-size: 15px;
color: #ffffff ;
}
.moreConnectInfo {
float: left;
margin-top: 6px;
font-size: 15px;
color: #ffffff;
}
</style>
</head>
<body>
<body style="background-color:black;">
<h1 style= "color:grey;font-size:50px;">dollas</h1>
<h2 style="color:white; font-size:25px;;">North Jersey</h2>
<hr>
<!-- business 2-->
<div class="product_img">
<img alt="KB's BBQ SMOKEHOUSE - IRVINGTON, NJ 07111 (Menu & Order
Online)" class="n3VNCb"
src="https://menufyproduction.imgix.net/637255010998628698+201756.png?
auto=compress,format&h=1080&w=1920&fit=max" data-noaft="1"
jsname="HiaYvf" jsaction="load:XAeZkd;" style="width: 200px; height:
150px; margin: 0px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">KB's BBQ Smokehouse</div>
<div class="clear"></div>
<div class="location">Location: 1077 Stuyvesant Ave, Irvington, NJ
07111</div>
<div class="clear"></div>
<div class="contactInfo">Phone: (973) 982-6528</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://kbbbqsmokehouse.com/ </div>
<div class="clear"></div>
</div>
<!-- business 3-->
<div class="product_img">
<img data-visualcompletion="media-vc-image" alt="May be an image of 1 person
and text that says 'Ard Bakery Arielitas'" class="ji94ytn4 r9f5tntg d2edcug0
r0294ipz" referrerpolicy="origin-when-cross-origin"
src="https://scontent.fewr1-
5.fna.fbcdn.net/v/t31.18172-
8/26198629_1997772167107826_8453467514730795477_o.jpg?_nc_cat=105&ccb=1-
3&_nc_sid=09cbfe&_nc_ohc=1EVQdCkudYUAX-
_oK4D&_nc_ht=scontent.fewr1-
5.fna&oh=db53b58b37272d072239b01f939d602f&oe=60B6C98F" style="width:
200px; height: 150px; margin-left: -300px;">
</div>
</div>
<div class="businessInfo">
<div class="businessName">Arielita's Bakery</div>
<div class="clear"></div>
<div class="location">Location:Montclair, NJ</div>
<div class="clear"></div>
<div class="contactInfo">To order:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
<div class="connectInfo">Website:https://www.arielitasbakery.com/menu
</div>
<div class="clear"></div>
</div>
Check this below snippet. Its just an skeleton. It will help you to build such layout.
.product_wrapper {
}
.product_loop {
display : flex;
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.product_image { background : #ccc; flex : 0 0 20%; height: 150px }
.product_content { flex : 1; padding: 10px }
<div class="product_wrapper">
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
<div class="product_loop">
<div class="product_image">
<img>
</div>
<div class="product_content">
<h3>Product Title</h3>
<p>Product content goes here</p>
</div>
</div>
</div>
I am trying to create a simple layout that uses css flex to display 4 boxes across the screen on 2 rows.
What I want to happen is I want to be able to add more divs to my HTML, and whenever the divs reach the end of the right hand side of the screen, no more divs are added, and a new row should being. However, whenever I add more than a certain number of divs, the divs start to move off screen. I want the divs to only stay within 100% of the screen size and move onto a NEW ROW once it hits the end of the page view.
The following photo shows what I am current getting and what I should be getting.
Here is some of my code....
HTML
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #212121;
overflow-x: hidden;
}
header {
display: flex;
width: 100%;
margin: auto;
height: 100px;
align-items: center;
box-shadow: 0px 3px 10px gold;
background: #212121;
position: sticky;
top: 0px;
}
.logoContainer,
.navLinks {
display: flex;
}
.logoContainer {
flex: 1;
}
nav {
flex: 1;
}
.navLinks {
justify-content: space-around;
cursor: pointer;
margin-right: 20px;
color: white;
}
.navLink {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
}
ul {
list-style: none;
}
.containers {
display: flex;
background: green;
}
.gold1,
.gold2,
.gold3,
.gold4,
.gold5 {
background-color: white;
border-radius: 10px;
margin-top: 40px;
flex: 1;
}
.title {
text-align: center;
padding-top: 10px;
}
.price {
text-align: center;
margin-top: 40px;
font-size: 24px;
font-weight: bold;
color: black;
}
button {
width: 100px;
height: 35px;
border-radius: 10px;
background: rgb(14, 170, 14);
border: none;
cursor: pointer;
font-size: 16px;
}
.button {
text-align: center;
background-color: white;
}
<div class="containers">
<div class="gold1">
<h1 class="title">shop 1</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold2">
<h1 class="title">shop 2</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold3">
<h1 class="title">shop 3</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy Gold</button>
</div>
</div>
<div class="gold4">
<h1 class="title">shop 4</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold5">
<h1 class="title">shop 5</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
</div>
PLEASE NOTE : For some reason, the code snipet is not showing what my screen is showing. I will try to fix this.
As you can see a few things.
The boxes go off screen.
The boxes do not stack on each other as the screen get smaller ( I want this to be responsive, having all the boxes stack on top of each other 1 by 1 on smaller screens , and only showing 4 boxes / row on larger screens )
Thanks in advance for the help.
You need to add some extra flex properties to css to work fine
You do not need to create a class for each element if it is going to share its properties, if you want to add something you can create classes and add them to the element and to these add or remove properties. What I mean is that .gold1, .gold2, .gold3 ... etc. they are not really necessary you can only use .gold since all those boxes will share their css properties.
CSS selectors
flex-direction: column; // for mobile devices
flex-wrap: wrap;
Flexbox guide
Also you need to use media queries to add or remove properties to your css id's,class,tags...
Here you can see an example of you want (Click on run code snippet and go to full page)
body {
background: #111;
box-sizing: border-box;
}
body>h1 {
text-align: center;
color: white;
}
.container {
margin: auto;
display: flex;
justify-content: center;
flex-direction: column;
background: green;
width: 90%;
}
.gold {
background: white;
border-radius: 10px;
margin-top: 10px;
padding: 10px;
}
.title {
text-align: center;
padding-top: 10px;
}
.price {
text-align: center;
margin-top: 40px;
font-size: 24px;
font-weight: bold;
color: black;
}
.button {
text-align: center;
background-color: white;
}
button {
width: 100px;
height: 35px;
border-radius: 10px;
background: rgb(14, 170, 14);
border: none;
cursor: pointer;
font-size: 16px;
}
#media (min-width: 992px) {
.container {
justify-content: space-between; /* add this */
flex-direction: row; /* change direction */
flex-wrap: wrap; /* wrap content */
}
.gold {
width: 22%; /* assign a lower width */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Flex</h1>
<div class="container">
<div class="gold">
<h1 class="title">Shop 1</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 2</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 3</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 4</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 5</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 6</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 7</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 8</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 9</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 10</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 11</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 12</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
</div>
</body>
</html>
I found the answer. All I needed to do was add flex-wrap: wrap and it gave me the desired output.
use flex-direction row and then write flex-wrap:wrap in container class
I am trying to make footer to the center when it reaches the lg break point, the three columns should be seen as one column in 3 rows, and i want to achieve it at the center portion of the page.
But if you see in the codepen link below the second one isn't aligning bottom to the first one.
https://codepen.io/Sunny143/pen/VybbGX?editors=1100
footer {
margin-left: 0;
margin-right: 0;
background-color: #305C7A;
position: absolute;
bottom: 0px;
width: 100%;
height: auto;
}
footer h3 {
color: white;
text-decoration: underline;
text-decoration-color: white;
}
footer p {
color: white;
width: 100%;
align-content: center;
align-items: center;
justify-content: center;
}
footer span {
color: white;
}
.address {
float: left;
padding: 35px;
padding-bottom: 50px;
width: 30%;
margin-left: 4%;
margin-right: 4%;
}
.Main-address {
float: left;
width: 30%;
padding: 35px;
text-align: left;
margin-left: 4%;
margin-right: 4%;
}
.contact-info {
float: left;
position: relative;
padding-bottom: 50px;
padding: 35px;
width: 30%;
text-align: left;
margin-left: 4%;
margin-right: 4%;
margin-bottom: 35px;
}
.copyright {
position: absolute;
bottom: 0px;
width: 100%;
height: 35px;
background-color: #111B22;
align-items: center;
margin-bottom: 0%;
}
<footer>
<!-- starting of a footer-->
<section class="address col-lg-3 col-md-12 col-sm-12">
<h3>Branch Office</h3>
<span class="Name">SambaSiva Rao Muvva</span><br>
<span class="qual">B.com., A.C.A</span>
<p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
</section>
<section class="Main-address col-lg-3 col-md-12 col-sm-12">
<h3>Head Office</h3>
<span class="Name">Konduru Anil Kumar</span><br>
<span class="qual">B.com., A.C.A</span>
<p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
</section>
<Section class="contact-info col-lg-3 col-md-12 col-sm-12">
<h3>Contact Information</h3>
<span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
<span class="Email-ID">Email :</span><span class="email">casmaba.assosciates#gmail.com</span>
</Section>
<p class="text-center copyright">Copyright # 2017 indusfilings.com</p>
</footer>
None of the block are centered because the 3 are floating and you are simply facing floating issue as the first one is pushing the third one to be under the second one like you can read in this question: Floated elements of variable height push siblings down
Instead you need to simply remove float and correctly use the bootstrap classes (container/row) and your div will behave correctly. Then you may add text-align:center when reaching the breakpoint of lg:
footer {
margin-left: 0;
margin-right: 0;
background-color: #305C7A;
position: absolute;
bottom: 0px;
width: 100%;
height: auto;
}
footer h3 {
color: white;
text-decoration: underline;
text-decoration-color: white;
}
footer p {
color: white;
width: 100%;
align-content: center;
align-items: center;
justify-content: center;
}
footer span {
color: white;
}
.address,.contact-info,.Main-address {
padding: 35px;
}
.copyright {
width: 100%;
height: 35px;
background-color: #111B22;
align-items: center;
margin-bottom:0;
}
#media all and (max-width:991px) {
.address,.contact-info,.Main-address {
text-align:center;
}
}
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<footer>
<div class="container">
<div class="row justify-content-around">
<!-- starting of a footer-->
<section class="address col-lg-3 col-md-12 col-sm-12">
<h3>Branch Office</h3>
<span class="Name">SambaSiva Rao Muvva</span><br>
<span class="qual">B.com., A.C.A</span>
<p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
</section>
<section class="Main-address col-lg-3 col-md-12 col-sm-12">
<h3>Head Office</h3>
<span class="Name">Konduru Anil Kumar</span><br>
<span class="qual">B.com., A.C.A</span>
<p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
</section>
<Section class="contact-info col-lg-3 col-md-12 col-sm-12">
<h3>Contact Information</h3>
<span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
<span class="Email-ID">Email :</span><span class="email">casmaba.assosciates#gmail.com</span>
</Section>
</div>
</div>
<p class="text-center copyright">Copyright # 2017 indusfilings.com</p>
</footer>
1) Avoid using custom layout CSS on top of bootstrap this will defeat the purpose of using responsive library.
Example:
position:absolute;
float:left;
width:30%;
2) Follow the guidelines provided on the bootstrap page for proper implementation of components. In this case you are missing a "row" block
link -> Grid system Bootstrap
Solution for the above problem can be found on the below link
https://codepen.io/YasirKamdar/pen/ypbXVg
HTML
<footer>
<!-- starting of a footer-->
<div class="row">
<section class="address col-lg-4 col-md-12 col-sm-12">
<h3>Branch Office</h3>
<span class="Name">SambaSiva Rao Muvva</span><br>
<span class="qual">B.com., A.C.A</span>
<p>23-5-93, Besides Bank of India<br>
Naidupet 1st lane<br>
Koritepadu, Guntur-7</p>
</section>
<section class="Main-address col-lg-4 col-md-12 col-sm-12">
<h3>Head Office</h3>
<span class="Name">Konduru Anil Kumar</span><br>
<span class="qual">B.com., A.C.A</span>
<p>No 4, 2nd floor<br>
Rangarajulu Street, Ayyavoo colony<br>
Aminjikarai, Chennai-29</p>
</section>
<Section class="contact-info col-lg-4 col-md-12 col-sm-12">
<h3>Contact Information</h3>
<span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
<span class="Email-ID">Email :</span><span class="email">casmaba.assosciates#gmail.com</span>
</Section>
</div>
<p class="text-center copyright">Copyright # 2017 indusfilings.com</p>
</footer>
CSS
footer{
margin-left:0;
margin-right:0;
background-color:#305C7A;
bottom:0px;
width:100%;
height:auto;
}
footer h3{
color:white;
text-decoration:underline;
text-decoration-color:white;
}
.address, .Main-address, .contact-info {
padding-left: 35px;
}
footer p{
color:white;
width:100%;
align-content:center;
align-items: center;
justify-content: center;
}
footer span{
color:white;
}
.copyright{
bottom:0px;
width:100%;
height:35px;
background-color:#111B22;
align-items:center;
margin-bottom: 0%;
}
I would like the layout to look as so, but also be responsive (so that the heading + paragraph both stay positioned to the left of the icon).
CSS:
.feature {
position: relative;
border: 1px solid #000;
}
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: #64beeb;
border-radius: 50%;
float: right;
}
.icon {
font-size: 1.75rem;
color: #fff;
}
HTML:
<div class="feature">
<div class="text text-right">
<p class="h2">Diversity of Content</p>
<p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
</div>
<div class="circle text-center">
<i class="icon ion-android-bulb"></i>
</div>
</div>
CODEPEN DEMO
add this to .circle and remove float:right; Then it will be absolutely positioned from the parent relative container.
position: absolute;
top: 10px;
right: 10px;
.feature {
position: relative;
border: 1px solid #000;
}
.circle {
position: absolute;
top: 10px;
right: 10px;
height: 2.5rem;
width: 2.5rem;
background-color: #64beeb;
border-radius: 50%;
}
.icon {
font-size: 1.75rem;
color: #fff;
}
<div class="feature">
<div class="text text-right">
<p class="h2">Diversity of Content</p>
<p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
</div>
<div class="circle text-center">
<i class="icon ion-android-bulb"></i>
</div>
</div>
And you could add padding-right: 50px; to .feature so the icon (blueih circle) will not be over text. See here https://jsfiddle.net/ymzofeph/
One option is to use flexbox. You can add display: flex to the container (.feature). Add flex: 1 to the text. To create some space around the icon you can use a margin value you find suitable.
.feature {
position: relative;
border: 1px solid #000;
/* for demo */
text-align: right;
display: flex;
}
.text {
flex: 1;
}
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: #64beeb;
border-radius: 50%;
margin: 1rem;
}
.icon {
font-size: 1.75rem;
color: #fff;
}
<div class="feature">
<div class="text text-right">
<p class="h2">Diversity of Content</p>
<p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
</div>
<div class="circle text-center">
<i class="icon ion-android-bulb"></i>
</div>
</div>
<div class="feature">
<div class="circle text-center">
<i class="icon ion-android-bulb"></i>
</div>
<div class="text text-right">
<p class="h2">Diversity of Content</p>
<p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
</div>
</div>
<style>
.circle{
float:right;
width:40px;
height:40px;
margin:0 0 0 20px;
}
.text{
overflow:hidden;
}
</style>
Put the float:right div before the .text-right div. Then add padding-right:2.5rem; to the .text-right div.
Example
So I have 3 boxes that need to have a particular height and width and have set them within bootstrap as child elements. Looks good in full view as:
However, when the window resizes, the boxes shift to the left rather than float in the middle of that background graphic. Additionally, the header text (in yellow) loses its upper padding as:
Figured the "responsiveness" was taking over but cannot pinpoint it and am hoping some of you can help.
My HTML for these are:
<div class="container">
<div class="claimHead col-md-12">
<div class="submitHeader" style="margin-top: 60px; margin-bottom: 60px; margin-left: 30px;">
<h1 style="font-size: 36px;">Claim Submission Tool</h1>
<p style="font-size: 18px;">Filing claims has never been easier, it's a simple as 1, 2, 3</p>
</div>
<div id="stepsContainer">
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepOne">
<p class="claimStepNumber">1</p>
<p class="claimStepTitle">step one</p>
<p class="claimStepText">Get started by entering your claim information in the fields below.</p>
</div>
</div>
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepTwo">
<p class="claimStepNumber">2</p>
<p class="claimStepTitle">step two</p>
<p class="claimStepText">Next drag & drop or upload your documentation.</p>
</div>
</div>
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepThree">
<p class="claimStepNumber">3</p>
<p class="claimStepTitle">step three</p>
<p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p>
</div>
</div>
</div>
</div>
</div>
And my css is:
#stepsContainer {
text-align: center;
}
.stepsBox {
padding-bottom: 60px;
}
.claimSteps {
padding-top: 40px;
width: 335px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
text-align: center;
}
.claimStepNumber {
font-size: 38px;
background-color: #ffffff;
color: #2dccd3;
width: 65px;
height: 65px;
border-radius: 50%;
margin-left: 135px;
}
.claimStepTitle {
color: #ffffff;
font-size: 18px;
}
.claimStepText {
text-align: center;
margin-left: 33.3%;
width: 33.3%;
}
Any ideas on what I can do here and where to check? Am also using Bootstrap 3 on top of this css, but I do not see where it is causing the boxes to shift left justified.
Thanks much.
Columns are floated to the left by default and because you're using a fixed height/width inside of the columns (.claimSteps), they have no choice but to align left once the medium column collapses since they cannot occupy 100% of the smaller viewport.
The heading alignment has to due primarily to your HTML structure.
Note that one area you should consider changing is the width of the box you're creating. It's too wide and starts to break/overflow because it's fixed. If you can reduce it, you should (my examples reflect this but can easily be changed back to your default width.)
The fixed size of the box also comes into play at around 400px. In the second example I made the box flexible so it works properly across all viewports. See examples 1 and 2 on viewports under 400px.
Here are a few examples that may help.
Example 1: Standard Setup
.submitHeader {
margin: 60px 0;
}
.submitHeader h1 {
font-size: 36px;
}
.submitHeader p {
font-size: 18px;
}
.claimSteps {
width: 285px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
text-align: center;
position: relative;
margin: 0 auto;
display: table;
}
.claimStepNumber {
margin-top: 40px;
font-size: 38px;
background-color: #ffffff;
color: #2dccd3;
width: 55px;
height: 55px;
border-radius: 50%;
position: absolute;
display: table-cell;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.claimStepTitle {
color: #ffffff;
font-size: 18px;
margin-top: 110px;
}
.claimStepText {
text-align: center;
margin-left: 33.3%;
width: 33.3%;
}
#media (min-width: 1200px) {
.submitHeader {
margin: 60px 40px;
}
}
#media (max-width: 991px) {
.claimSteps {
margin: 30px auto;
}
.submitHeader {
margin-top: 60px;
margin-bottom: 0;
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="submitHeader">
<h1>Claim Submission Tool</h1>
<p>Filing claims has never been easier, it's a simple as 1, 2, 3</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="claimSteps" id="stepOne">
<p class="claimStepNumber">1</p>
<p class="claimStepTitle">step one</p>
<p class="claimStepText">Get started by entering your claim information in the fields below.</p>
</div>
</div>
<div class="col-md-4">
<div class="claimSteps" id="stepTwo">
<p class="claimStepNumber">2</p>
<p class="claimStepTitle">step two</p>
<p class="claimStepText">Next drag and drop or upload your documentation.</p>
</div>
</div>
<div class="col-md-4">
<div class="claimSteps" id="stepThree">
<p class="claimStepNumber">3</p>
<p class="claimStepTitle">step three</p>
<p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p>
</div>
</div>
</div>
</div>
Example 2: Mobile First Setup
.submitHeader {
margin: 60px 0;
}
.submitHeader h1 {
font-size: 36px;
}
.submitHeader p {
font-size: 18px;
}
.claimSteps {
width: 285px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
text-align: center;
position: relative;
margin: 0 auto;
display: table;
}
.claimStepNumber {
margin-top: 40px;
font-size: 38px;
background-color: #ffffff;
color: #2dccd3;
width: 55px;
height: 55px;
border-radius: 50%;
position: absolute;
display: table-cell;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.claimStepTitle {
color: #ffffff;
font-size: 18px;
margin-top: 110px;
}
.claimStepText {
text-align: center;
margin-left: 33.3%;
width: 33.3%;
}
#media (min-width: 1200px) {
.submitHeader {
margin: 60px 40px;
}
}
#media (max-width: 991px) {
.claimSteps {
margin: 30px auto;
}
.submitHeader {
margin-top: 60px;
margin-bottom: 0;
text-align: center;
}
}
#media (max-width: 400px) {
/*Color For Demo Only*/
body {
background: red;
}
.claimSteps {
width: 100%;
height: 100%;
padding-bottom: 40px;
}
}
/*Color For Demo Only*/
#media (max-width: 320px) {
body {
background: lightblue;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="submitHeader">
<h1>Claim Submission Tool</h1>
<p>Filing claims has never been easier, it's a simple as 1, 2, 3</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="claimSteps" id="stepOne">
<p class="claimStepNumber">1</p>
<p class="claimStepTitle">step one</p>
<p class="claimStepText">Get started by entering your claim information in the fields below.</p>
</div>
</div>
<div class="col-md-4">
<div class="claimSteps" id="stepTwo">
<p class="claimStepNumber">2</p>
<p class="claimStepTitle">step two</p>
<p class="claimStepText">Next drag and drop or upload your documentation.</p>
</div>
</div>
<div class="col-md-4">
<div class="claimSteps" id="stepThree">
<p class="claimStepNumber">3</p>
<p class="claimStepTitle">step three</p>
<p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p>
</div>
</div>
</div>
</div>
Example 3: Text Alignment Example
.claimSteps {
width: 285px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
margin-top: 30px;
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Claim Submission Tool</h1>
<p>Filing claims has never been easier, it's a simple as 1, 2, 3</p>
<div class="row">
<div id="stepsContainer">
<div class="col-md-4">
<div class="claimSteps"></div>
</div>
<div class="col-md-4">
<div class="claimSteps"></div>
</div>
<div class="col-md-4">
<div class="claimSteps"></div>
</div>
</div>
</div>
</div>
You should add class="row" before using the class="col-**-**" as common after class="container".
Have you tried separating your col-md-12 from those three stepBox's?
I don't see it necessary to wrap those columns inside the first column, so I would just rather end the col-md-12 before the #stepsContainer begins.
Another thing is that clearly your CSS limits the width of the claimSteps to be less than the screen width is when the md break-point occurs. You should in at least this point change the width property in CSS with media query.
#media (max-width: 1199px)
{
.claimSteps { width: 100%; }
}
That should do it.
Default div display as block, so it float to left, if you want set it float to the middle, you must set his display to inline-block and set container text-align to center
in your case you can add inline-block display to the .claimSteps CSS rules
.claimSteps {
padding-top: 40px;
width: 335px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
text-align: center;
display: inline-block;
}
For header, you can use padding instead of margin in div.submitHeader
See snippet for full result
#stepsContainer {
text-align: center;
}
.stepsBox {
padding-bottom: 60px;
}
.claimSteps {
padding-top: 40px;
width: 335px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
text-align: center;
display: inline-block;
}
.claimStepNumber {
font-size: 38px;
background-color: #ffffff;
color: #2dccd3;
width: 65px;
height: 65px;
border-radius: 50%;
margin-left: 135px;
}
.claimStepTitle {
color: #ffffff;
font-size: 18px;
}
.claimStepText {
text-align: center;
margin-left: 33.3%;
width: 33.3%;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="claimHead col-md-12">
<div class="submitHeader" style="padding-top: 60px; padding-bottom: 60px; padding-left: 30px;">
<h1 style="font-size: 36px;">Claim Submission Tool</h1>
<p style="font-size: 18px;">Filing claims has never been easier, it's a simple as 1, 2, 3</p>
</div>
<div id="stepsContainer">
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepOne">
<p class="claimStepNumber">1</p>
<p class="claimStepTitle">step one</p>
<p class="claimStepText">Get started by entering your claim information in the fields below.</p>
</div>
</div>
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepTwo">
<p class="claimStepNumber">2</p>
<p class="claimStepTitle">step two</p>
<p class="claimStepText">Next drag & drop or upload your documentation.</p>
</div>
</div>
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepThree">
<p class="claimStepNumber">3</p>
<p class="claimStepTitle">step three</p>
<p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p>
</div>
</div>
</div>
</div>
</div>