I have this html and css layout. I want to make it when reaching tablet with media query and phone to show like in those 2 images. So I have in normal (desktop mode) 4 products all of them in the same line. When the view reaches tablet - 1199 pixels I want those 4 products to be each 2 on a separate line, so 2 lines with 2 products. On the phone mode 768 pixels I want each product to be on its line with the width full like the wrapper.
Here is the code :
body {
margin: 0px;
padding: 0px;
}
/* Header */
.header {
background-color: yellow;
width: 100%;
margin: 0 auto;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.logo {
background-color: grey;
width: 150px;
height: 50px;
margin-top: 20px;
float: left;
}
.info {
background-color: grey;
width: 285px;
height: 50px;
margin-top: 20px;
float: right;
}
.clear {
clear: both;
}
.menu {
background-color: grey;
width: 1200px;
height: 50px;
margin-top: 20px;
}
/* */
/* Nav-Bar */
.nav-bar {
background-color: lightgray;
width: 1200px;
height: 340px;
margin-top: 20px;
}
/* */
/* Product grid */
.product1,
.product2,
.product3 {
background-color: lightgray;
width: 285px;
height: 320px;
margin-top: 20px;
margin-right: 20px;
float: left;
}
.product4 {
background-color: lightgray;
width: 285px;
height: 320px;
margin-top: 20px;
float: left;
}
/* */
/* Bottom Part */
.content-area {
background-color: lightgray;
width: 100%;
height: 420px;
margin-top: 20px;
}
/* */
/* Footer */
.footer-area {
background-color: gray;
width: 100%;
height: 50px;
margin-top: 20px;
}
/* */
/* Responsive */
#media screen and (max-width: 1199px) {
.product1,
.product2,
.product3,
.product4 {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home View</title>
<link rel="stylesheet" type="text/css" href="../style/homestyle.css">
</head>
<body>
<!-- Header -->
<div class="header">
<div class="wrapper">
<div class="logo"></div>
<div class="info"></div>
<div class="clear"></div>
<div class="menu"></div>
</div>
</div>
<!-- -->
<!-- NavBar -->
<div class="header">
<div class="wrapper">
<div class="nav-bar"></div>
<div class="clear"></div>
</div>
</div>
<!-- -->
<!-- Product Grid -->
<div class="wrapper">
<div class="def1">
<div class="product1"></div>
</div>
<div class="def2">
<div class="product2"></div>
</div>
<div class="def3">
<div class="product3"></div>
</div>
<div class="def4">
<div class="product4"></div>
</div>
<div class="clear"></div>
</div>
<!-- -->
<!-- Bottom Part -->
<div class="wrapper">
<div class="content-area"></div>
</div>
<!-- Footer -->
<div class="header">
<div class="wrapper">
<div class="footer-area"></div>
</div>
</div>
</body>
</html>
The CSSTablet :
I attached the images needed for the layout. Please help!
First you add the view port element to Head of the HTML page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ref. link - https://www.w3schools.com/css/css_rwd_viewport.asp
Then Remove fixed width's from .menu and .nav-bar classes and add as max-width.
.menu {
background-color: grey;
max-width: 1200px;
height: 50px;
margin-top: 20px;
}
.nav-bar {
background-color: lightgray;
max-width: 1200px;
height: 340px;
margin-top: 20px;
}
And also you need to wrap your "Product slots" using "div".
(I used class called "wrapper-inner")
<!-- Product Grid -->
<div class="wrapper">
<div class="wrapper-inner">
<div class="def1">
<div class="product1"></div>
</div>
<div class="def2">
<div class="product2"></div>
</div>
<div class="def3">
<div class="product3"></div>
</div>
<div class="def4">
<div class="product4"></div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- -->
Then after you can add required CSS media queries.
/* Responsive */
#media all and (max-width: 1199px) {
.wrapper-inner {
margin: 0 -20px;
background: orange;
padding: 0 20px;
}
.def1, .def2, .def3, .def4 {
width: 50%;
padding: 20px;
float: left;
}
.product1, .product2, .product3, .product4 {
width: 100%;
margin: 0 0;
}
}
#media all and (max-width: 768px) {
.def1, .def2, .def3, .def4 {
width: 100%;
padding: 20px;
float: left;
}
}
You are correct in using media queries. In those you can f.e. set the width of your elements like this:
#media screen and (max-width: 1199) {
.product { // you can write .product1, .product2,... but I would suggest creating this new class, as none of those images really need their own css
max-width: 25%; //this will change for tablet and mobile to 50% and 100%
}
}
Now do that for all modes that you want.
Also note that instead of setting a margin-right you could use flexbox with justify-content: space-between in the wrapper; Otherwise you will have to remove those margins for different screen sizes.
Related
To create a responsive html signature, I tried the infamous <style scoped> tag. As far as I understood there's a conflict with #media queries. Is there a better way to achieve this in a way I can use it in MS Outlook client, preferably both on PC and smartphone?
Here's a reduced version of what I have:
<style scoped>
#containter {
width: 100%;
height: 250px;
}
#firm-contact {
width: 35%;
float: left;
}
#firm-links {
width: 290px;
float: left;
}
#firm-logo {
margin: 2% 4% 1% 4%;
width: 165px;
float: left;
}
/* screenwitdh <= 980px */
#media screen and (max-width: 980px) {
#containter {
height: 580px;
}
#firm-contact {
width: 41%;
}
#firm-links {
width: 41%;
float: right;
}
#firm-logo {
clear: both;
width: auto;
float: none;
}
}
/* screenwitdh <= 600px */
#media screen and (max-width: 600px) {
#containter {
height: 680px;
}
...
}
</style>
<div id="footer">
<div id="display">
<div id="containter">
<div id="firm-contact">
<p>Streer</p>
<p>Place</p>
<p>+tel</p>
</div>
<div id="firm-links">
<p><span>Links</span><</p>
<p><Something</p>
<p>Other</p>
</div>
<div id="firm-logo">
<div width="250" heigth="250">
<img class="img-fluid" src="img/some.png" alt="Logo" width="75%">
</div>
</div>
</div> <!-- containter -->
</div> <!-- display -->
</div> <!-- footer -->
I already search this forum but none of the solution works for me. As the title mention my page footer is not staying at the bottom.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu,
.main,
.right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
<div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
It does worked on mobile but not working on normal display.
Here's the demo page: http://jsfiddle.net/Lwp710be/2/show
and here's the jsfiddle code: http://jsfiddle.net/Lwp710be/2/
A better solution would be for you to use the CSS Grid since the footer and main content area are major sections of the page.
Below is a demo where I have created a grid context on a class with the name.container and applied it to the body element in the markup, I then wrapped the main content within a main element so the body element now has 2 children main and div (the div element is your footer) who both follow the rules of the grid:
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu,
.main,
.right {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="container" style="font-family:Verdana;">
<!-- MAIN CONTENT STARTS HERE -->
<main>
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
</main>
<!-- MAIN CONTENT ENDS HERE -->
<div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
I use flexbox to solved it.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div class="content">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="img_5terre.jpg" style="width:100%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
</div>
<footer class="footer">This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</footer>
</body>
</html>
I'm designing a simple responsive website, and I have a "special" DIV that is the only one that takes 100% width of the body. When I resize the the browser up and down, that DIV is moving upwards and covers the DIV above. This only happens when I add my responsive CSS.
This is what it should look like at all times.
This is what is happening when I resize the window upwards.
My code:
header {
width: 80%;
margin: 0 auto;
height: calc(100vh - 60px);
}
/* Header content */
.header-content {
text-align: center;
margin-top: 8%;
padding: 5%;
padding-top: 0;
}
.header-content img {
width: 64%;
height: auto;
}
.header-content h6 {
font-size: 1.6em;
font-weight: 300;
margin-top: 3%;
line-height: 1.5em;
}
.stores {
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
margin-top: 6%;
}
.badges {
display: inline-block;
}
.badges img {
width: 40%;
height: auto;
}
/* Header Device */
.header-device {
text-align: center;
margin-top: 4%;
}
.header-device img {
width: 50%;
height: auto;
}
/* :::: Image Call:::: */
.image-call {
width: 100vw;
height: 450px;
position: relative;
background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/people.jpg);
background-size: cover;
z-index: 100;
}
.image-call h5 {
text-align: center;
font-size: 3em;
font-weight: 200;
color: #fff;
margin-top: 10%;
}
/* MY RESPONSIVE CODE */
#media (max-width: 991.98px) {
body {
background-color: #ececec;
}
/* Header */
header {
height: calc(100vh - 60px);
}
/* Image Call */
.image-call {
margin-top: -10%;
height: 356px;
}
.image-call h5 {
margin-top: 12%;
}
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- /Bootstrap 4 -->
<!-- HEADER -->
<header>
<div class="row">
<div class="header-content col-lg col-sm-12">
<img src="img/logo-simplecash.svg" alt="Logo SimpleCash">
<h6>text here</h6>
<div class="col-12">
<div class="row">
<div class="stores">
<div class="badges col-lg-12 col-sm-12">
<img src="img/google-play-badge.svg" alt="Google Store">
<!--a href="#"><img src="img/app-store-badge.svg" alt="App Store"></a-->
</div>
</div>
</div>
</div>
</div>
<div class="header-device col-lg col-sm-12">
<img src="img/screen-home.png" alt="App Simple Cash">
</div>
</div>
</header>
<!-- / HEADER -->
<!-- IMAGE CALL -->
<div class="row">
<div class="image-call col-12">
<h5>text here text here <br /> text here text here
</h5>
</div>
</div>
<!-- / IMAGE CALL -->
Use percent height instead px could work
EDIT:
I didn't see the margin-top: -10% inside media query.
That negative margin cause your problem, edit that value to achieve a good position
After reviewing my code I found what was causing this issue.
Basically, I changed this part of my responsive CSS:
header {
height: auto;
}
In my initial CSS it was set like this (so that it would take 100% of the window's height):
header {
height: calc(100vh - 60px);
}
I want to create a container so that i have a simple layout with a nav bar at the top and a nav bar on the left side which is about 150px. As the screen gets smaller though, i want the left nav to entirely disappear and have the following occur:
1) Replace the 150px (icon + text) nav bar with just an icon nav bar on the left
or 2) remove/hide the nav bar entirely and have a burger bar in the top nav which will expand a vertical menu down. This would be the exact same menu as the one before on the left except it would not be displayed from the top nav rather than the side.
What i've done so fat?
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Awesome Bootstrap 3 Sidebar Navigation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
/* MORE THAN 75 */
body {
background-color: skyBlue;
}
/* LESS THAN 75 */
#media (max-width: 74.9em) {
body {
background-color: pink;
}
}
/* LESS THAN 62 */
#media (max-width: 61.9em) {
body {
background-color: blue;
}
}
/* LESS THAN 48 */
#media (max-width: 47.9em) {
body {
background-color: green;
}
}
/* LESS THAN 34 */
#media (max-width: 33.9em) {
body {
background-color: red;
}
}
.navbar-outer {
width: 600px;
}
.aav {
background-color: black;
color: white;
border-style: solid;
border-color: red;
}
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row aav">
<div class="col-xs-6 col-md-2" style="width:100px; border:solid; color:white;">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-4</div>
</div>
I'm trying to create the left nav and the content pane. I'm thinking too much of java i guess because i'm not sure how to go about the implementation. Any feedback is appreciated.
I'm stuck because i don't want the left bar to scale, i want it to be a fixed width until the screen gets too small for it.
This is a complicated question, but the gist of it is that you can set a container (or just set styles on the body element itself) to hold your nav, sidebar, and general content area, and then modify their widths and heights with media queries.
So given your page is 100vw across, for example, your sidebar could be 150px wide as you mentioned, and that would leave 100vw - 150px for the width of the main content area. You'd float them next to each other.
main {
width: 100vw;
}
aside {
float: left;
width: 150px;
}
section {
float: left;
width: calc(100% - 150px);
}
When you want the sidebar to narrow, you can adjust the width of the sidebar and the calc expression for the main content area. (You'd also hide the labels next to your icons.)
#media all and (max-width: 900px) {
aside {
width: 40px;
}
section {
width: calc(100% - 40px);
}
}
When you get to mobile view, your sidebar can simply become 100% width of the screen, and then you'll need additional CSS to change the display of the icons and whatnot.
#media all and (max-width: 600px) {
aside {
width: 100%;
}
section {
width: 100%;
}
}
That's the general principle you'll want to work with, but a lot of the other CSS will probably depend exactly on your site. Below is an example.
main {
width: 100vw;
height: 100vh;
}
nav {
background-color: #5BA1CB;
height: 80px;
}
nav .title {
width: 130px;
height: 60px;
margin-top: 10px;
margin-left: 10px;
background-color: rgba(255, 255, 255, 0.2);
float: left;
}
nav .burger {
float: left;
margin-left: 20px;
height: 100%;
}
nav .burger img {
margin-top: 10px;
}
aside {
background-color: #144360;
width: 150px;
height: calc(100% - 80px);
float: left;
}
aside .icon {
margin-left: 5px;
margin-top: 50px;
}
aside .icon:first-child {
margin-top: 100px;
}
aside .icon span,
aside .icon img {
vertical-align: middle;
display: inline-block;
}
section {
float: left;
width: calc(100% - 150px);
height: 100%;
background-color: #DAEAF4;
}
#media all and (max-width: 900px) and (min-width: 601px) {
aside {
width: 40px;
}
aside .icon span {
display: none;
}
section {
width: calc(100% - 40px);
}
}
#media all and (max-width: 600px) {
aside {
width: 100%;
height: 150px;
}
aside .icon {
float: left;
width: 100px;
}
aside .icon:first-child {
margin-top: 50px;
}
section {
width: 100%;
}
}
<main>
<nav>
<div class="title"><span>Title Area</span></div>
<div class="burger">
<img src="http://placehold.it/60x60?text=BURGER" />
</div>
</nav>
<aside>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
</aside>
<section>
<h1>Body</h1>
</section>
</main>
In the code below I have 3 col-md-4 that I want to reduce the space between to about 25px. I've tried reducing the margin between them along with increasing the padding on the left and right side of the first and last column respectively. The problem with this approach is that when the window size is manipulated it makes the image columns offset because of the increased padding.
HTML:
<div class="cards">
<div class="container">
<h2>
Our Expertise.
</h2>
</div>
<div class="row">
<div class="col-md-4">
<!-- <img> -->
<!-- <img> -->
<!-- <img> -->
</div>
<div class="col-md-4">
<!-- <img> -->
<!-- <img> -->
<!-- <img> -->
</div>
<div class="col-md-4">
<!-- <img> -->
<!-- <img> -->
<!-- <img> -->
<!-- <img> -->
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', sans-serif;
}
.first {
padding-left: 200px !important;
}
.last {
padding-right: 200px !important;
}
.container {
max-width: 980px;
margin: 0 auto;
}
.header {
padding-top: 20px;
}
.header h1 {
font-size: 20px;
}
.nav li {
margin: 0px;
border: 0px;
}
.nav li a {
color: #333;
}
.jumbotron {
background-color: transparent;
padding-top: 100px;
padding-bottom: 100px;
}
.jumbotron h2 {
font-size: 50px;
}
.jumbotron h2 span {
color: #ffc200;
}
.banner {
background-color: #333;
height: 140px;
color: white;
text-align: center;
padding-top: 30px;
}
.cards {
background-color: #FFC200;
text-align: center;
}
.cards img {
margin-bottom: 25px;
padding: auto;
}
.cards h2 {
margin-top: 20px;
margin-bottom: 80px;
}
#media (max-width: 992px) {
.col-md-4 {
margin: 0 auto 0;
text-align: center;
width: 100%;
}
.cards img {
width: 60%;
}
}
#media (max-width: 500px) {
.header h1 {
text-align: center;
}
.nav li {
text-align: center;
width: 100%;
}
.cards img {
width: 100%;
}
}
There are suppose to be images in the columns but because I don't have 10 rep points it wont let me post them.
Just change the default column padding. You need to keep the total space between the columns an even number, so 24 would be good, you would simply change the default column padding from 15px to 12px and override the negative margin on the row as well:
.row {
margin-left: -12px!important;
margin-right: -12px!important;
}
div[class*='col-'] {
padding-left: 12px;
padding-right: 12px;
}
.inner {
border:1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cards">
<div class="container">
<h2>
Our Expertise.
</h2>
</div>
<div class="row">
<div class="col-md-4">
<div class="inner">Column 1</div>
</div>
<div class="col-md-4">
<div class="inner">Column 2</div>
</div>
<div class="col-md-4">
<div class="inner">Column 3</div>
</div>
</div>
</div>