I've incorporated media queries that work great for iPhones.
I am running into issues with viewing my website from a Motorola cell phone. I am not sure what the cause might be. Or if I need to add something extra in my code to accommodate other cell phone devices other than iPhone. I have the same media queries set for 320px and 425px...so all cell devices should be ok.
www.lewisdesigns.com. It works no problem on iPhone. This is why I am stumped why there would be issues for other mobile devices.
.box {
position:absolute;
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
left:0;right:0;
width: 380px;
padding: 10px;
}
#media (max-width : 320px) {
.box { width: 240px;
margin-top: 15px;
}
}
#media (max-width : 425px) {
.box { width: 240px;
margin-top: 15px;
}
}
.nav-pills {
position: relative;
margin-top:265px;
display:table;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 15px;
font-weight: 589px;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills li a:hover {
color: white;
background-color: transparent;
display:inline-block;
border: 1px white solid;
font-weight: 300;
}
#media (max-width : 320px) {
.nav-pills { width: 280px;
margin-top: 190px;
margin-bottom: 5px;
}
}
#media (max-width : 425px) {
.nav-pills { width: 280px;
margin-top: 210px;
margin-bottom: 20px;
}
}
#media (max-width : 320px) {
.nav-pills li a { font-size:12px;
padding: 8px;
margin:2px;
}
}
#media (max-width : 425px) {
.nav-pills li a { font-size:12px;
padding: 8px;
margin:2px;
}
}
.box h2 {
font: 70px/1.2 'Pacifico', Helvetica, sans-serif;
color: white;
text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2);
padding-right: 5px;
padding-left: 5px;
margin-left: 15px;
}
.box span {
margin-left: 70px;
}
#media (max-width : 320px) {
.box h2 { font: 50px/1.2 'Pacifico', Helvetica, sans-serif;
}
}
#media (max-width : 320px) {
.box span { margin-left: 40px;
}
}
#media (max-width : 425px) {
.box h2 { font: 50px/1.2 'Pacifico', Helvetica, sans-serif;
}
}
#media (max-width : 425px) {
.box span { margin-left: 40px;
}
}
<html>
<head>
<body>
<div class="header" id="header">
<div class="container">
<div class="box">
<h2>Lewis <br><span>Designs</span></h2>
</div>
<div class="menu">
<ul class="nav nav-pills">
<li>About</li>
<li>Consultations</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</head>
</html>
Related
I'm trying to get my navbar fit on the screen when viewing on mobile. I can get the logo to shrink but I cannot get links to change size so that half of the navbar doesn't cut off.
Here is my Nav code followed by the css.
NAV
<nav class="navbar navbar-expand bg-dark">
<div class="container relative">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="/#portfolio">Portfolio</a>
</li>
<a href="{% url 'home' %}">
<img class="image-fluid" id="vswlogo" src="{% static 'images/Artboard_3.png' %}"/>
</a>
<li class="nav-item">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
</div>
</nav>
CSS
#media screen and (max-width: 900px) {
body {
width: 100%;
}
}
#media screen and (max-width: 768px) {
body {
width: 100%;
}
}
#media screen and (max-width: 600px) {
body {
width: 100%;
}
}
#media screen and (max-width: 480px) {
body {
width: 100%;
}
}
#media screen and (max-width: 900px) {
#portfoliogrid1 {
width: 100%;
}
}
#media screen and (max-width: 768px) {
#portfoliogrid1 {
width: 100%;
}
}
#media screen and (max-width: 600px) {
#portfoliogrid1 {
width: 100%;
}
}
#media screen and (max-width: 480px) {
#portfoliogrid1 {
width: 100%;
}
}
#media screen and (max-width: 900px) {
#portfoliogrid2 {
width: 100%;
}
}
#media screen and (max-width: 768px) {
#portfoliogrid2 {
width: 100%;
}
}
#media screen and (max-width: 600px) {
#portfoliogrid2 {
width: 100%;
}
}
#media screen and (max-width: 480px) {
#portfoliogrid2 {
width: 100%;
}
}
/* Fonts */
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap");
h1 {
font-size: 50px;
text-align: center;
color: white;
}
h2 {
text-align: center;
font-size: 1.5em;
font-weight: bold;
color: white;
padding-top: px;
margin-bottom: -10px;
}
h3 {
text-align: center;
color: white;
}
p {
font-family: "Roboto", sans-serif;
font-weight: bold;
color: white;
}
/* MISC */
.container-banner {
margin: ;
}
hr {
color: white;
margin-bottom: 20px;
}
.banner-image {
text-align: center;
}
/* Body */
body {
background-image: url("{% static 'images/purple.jpg' %}");
padding: 15px;
font-family: "Roboto", sans-serif;
font-weight: bold;
background-repeat: no-repeat;
background-size: 100% 200%;
position: relative;
max-width: 100%;
}
html, body {
overflow-x: hidden;
}
/* Portfolio Columns & Images */
.arrow-down {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow-center {
text-align: center;
}
#portfoliothumbnail {
width: 100%;
margin-bottom: 3px;
}
#portfoliogrid1 {
margin-right: -58px;
}
#portfoliogrid2 {
margin-left: -10px;
margin-right: -10px;
}
row {
margin: 8px -16px;
margin-bottom: 20px;
}
/* Navbar */
.navbar {
margin: -1% -1% 1% -1%;
padding: 30px;
}
.navbar .navbar-nav .nav-link {
color: #ffffff;
font-size: 1.7em;
}
.nav-link {
padding-top: 35px;
padding-left: 5px;
}
.navbar .navbar-nav .nav-link:hover {
color: #ffffff;
text-decoration: underline;
}
.navbar-logo-centered .navbar-nav .nav-link {
padding: 0.5em 1em;
}
.navbar img {
height: 100px;
padding-top: 10px;
padding-left: 40px;
padding-right: 40px;
top: -50px;
left: -35px;
display: block;
z-index: 999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
#vswlogo:hover {
transform: scale(1.3);
}
Please excuse the amount of #media for my website body, I am still trying to filter out which one of them I need to keep and remove. If anyone has any ideas to what i'm missing or even doing wrong, i'd really appreciate to hear them. I'm still learning as you can tell.
I solved this for a standard mobile view by amending navbar-expand > navbar-expand-lg and adding #media code to center the nav-links and reduce font size. Still working on a fix for desktop view on mobile but I answered my own question above.
I have the left & right columns, I want the image to be responsive when I minimize the screen & by default both left & right should cover the whole screen. when I minimize the screen the right image becomes small & when I check on the mobile device the left column is covering 80% of the screen. Please help me to fix the responsive image & what I'm missing. Below is my code.
div.container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%
}
div.box {
position: relative;
box-sizing: border-box;
margin-bottom: 0;
width: 50%;
min-width: 300px;
}
* {
box-sizing: border-box;
outline: 0;
padding: 0;
margin: 0;
}
body {
margin: 0;
}
.col-left{
background: #efefef;
box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3);
width:50%;
height:auto;
}
.col-right{
width:50%;
height:auto;
}
.col-right img {
width:100%;
height:auto;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
.container{
position:relative;
left:126px;
}
label {
display: inline-block;
max-width: 100%;
}
.container .main:after {
clear: both;
display: block;
content: '';
}
.main{
margin-left: 43px;
width: 547px;
height: 120px;
}
.content{
position:relative;
left: 126px;
margin-top:175px;
}
.text{
width: 547px;
height: 213px;
}
.title{
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.005em;
color: #FFFFFF;
}
.container{
margin-top:162px;
}
.author{
font-family: 'Inter-Regular';
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 33px;
color: #FFFFFF;
margin-top:48px;
}
#media only screen and (min-width: 638px) and (max-width: 1334px) {
.title{
font-size:33px;
}
}
#media only screen and (min-width: 638px) and (max-width: 1251px) {
.title{
font-size:32px;
}
}
#media only screen and (min-width: 638px) and (max-width: 1171px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 1130px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 1056px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 994px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 987px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 942px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 838px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 811px) {
.ls-title{
font-size: 18px;
width: 320px;
}
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 760px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 638px) and (max-width: 709px) {
.title{
font-size:30px;
}
}
#media only screen and (min-width: 375px) and (max-width: 680px) {
.container .main:before {
width: 12px;
height: 64px;
}
.container{
left:40px;
}
.ls-logo-wrap{
left:40px;
}
.main{
margin-left:24px;
}
.content {
left: 40px;
margin-top: 43px;
}
.title{
font-size:18px;
width:280px;
line-height:28px;
}
.author{
margin-top:16px;
font-size:18px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-left box">
<div class="container">
<div class="main">
<label class="title">textheretextherertexthere</label>
</div>
</div>
<div class="content">
<div class="text">
<label class="title">textheretextheretextheretextheretextheretexthere</label>
</div>
</div>
</div>
<div class="col-right box">
<img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg" />
</div>
</div>
This code snippet will help you to solve your problem! check it out If you need any help let me know :)
I have noticed you were using the same classes "title" inside two different fields maybe it can impact your styling sometimes :)
Also, you were using a lot of media queries which were not needed as I believe. You can learn more about RWD here :)
https://css-tricks.com/a-complete-guide-to-css-media-queries/
.container {
display: flex;
/* flex-direction: row;
height: min-content; */
}
.box {
position: relative;
box-sizing: border-box;
margin-bottom: 0;
}
* {
box-sizing: border-box;
outline: 0;
padding: 0;
margin: 0;
}
body {
margin: 0;
}
.col-left{
background: black;
box-shadow: 16px 0px 26px rgba(0, 0, 0, 0.3);
width:50%;
}
.col-right{
width:50%;
height:auto;
}
.col-right img {
width:100%;
height:auto;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
label {
display: inline-block;
max-width: 100%;
}
.container .main:after {
clear: both;
display: block;
content: '';
}
.main{
text-align: center;
height: 120px;
}
.text{
text-align: center;
height: 213px;
}
.title{
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-size: 36px;
line-height: 44px;
letter-spacing: 0.005em;
color: #FFFFFF;
overflow-wrap: break-word;
padding: 5px;
}
.author{
font-family: 'Inter-Regular';
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 33px;
color: #FFFFFF;
margin-top:48px;
}
#media (max-width: 800px)
{
.container{
flex-direction: column;
text-align: center;
align-items: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-left box">
<!-- here you have used the same class which is not a correct way to use -->
<div class="containers">
<div class="main">
<label class="title">textheretextherertexthere</label>
</div>
</div>
<div class="content">
<div class="text">
<label class="title">textheretextheretextheretextheretextheretexthere</label>
</div>
</div>
</div>
<div class="col-right box">
<img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg" />
</div>
</div>
I want to put a timeline in my website which I found on codepen.
The problem is, it has only three sections(semantic, relative, contained), I tried to add another two sections but the layout gets disrupted and loses responsiveness.
Could anyone guide me in creating extra sections in that timeline without loosing it's responsiveness?
HTML:
<!-- STEPS -->
<section id="Steps" class="steps-section">
<h2 class="steps-header">
Responsive Semantic Timeline
</h2>
<div class="steps-timeline">
<div class="steps-one">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Semantic
</h3>
<p class="steps-description">
The timeline is created using negative margins and a top border.
</p>
</div>
<div class="steps-two">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Relative
</h3>
<p class="steps-description">
All elements are positioned realtive to the parent. No absolute positioning.
</p>
</div>
<div class="steps-three">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Contained
</h3>
<p class="steps-description">
The timeline does not extend past the first and last elements.
</p>
</div>
</div><!-- /.steps-timeline -->
</section>
CSS:
$outline-width: 0;
$break-point: 500px;
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
color: $brand-primary;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
#extend .section-header;
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(red, $outline-width);
#media screen and (max-width: $break-point) {
border-left: 2px solid $brand-primary;
margin-left: 25px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 16.65%;
margin-right: 16.65%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three {
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 33%;
margin-top: -50px;
}
}
.steps-one,
.steps-two {
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
.steps-two {
}
.steps-three {
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 16.65%;
margin-right: -16.65%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
.steps-name {
#extend .section-header;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
.steps-description {
overflow: hidden;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
Your CSS needs to be modified to include more divs within the same width. Now since the divs are manually assigned spacing between them rather than a dynamic approach, you can experimentally change the width and margin properties and including .step-four & .step-five in the css as well. I've included one additional div for example. You can try out adding more in this way.
CSS
$outline-width: 0;
$break-point: 500px;
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
color: $brand-primary;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
#extend .section-header;
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(red, $outline-width);
#media screen and (max-width: $break-point) {
border-left: 2px solid $brand-primary;
margin-left: 0px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 10%;
margin-right: 10%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five{
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 25%;
margin-top: -50px;
}
}
.steps-one,
.steps-two {
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -12%;
margin-right: 12%;
}
}
.steps-two {}
.steps-three,.step-four{
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 10%;
margin-right: -10%;
float:right;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 10px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
.steps-name {
#extend .section-header;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
.steps-description {
overflow: hidden;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
Depending on the number of divs, the width property of the following can be changed.
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five{
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 25%;
margin-top: -50px;
}
}
For Example
3 divs - 33%
4 divs - 25%
5 divs - 20%
and so on
I set the media query for desktop, tablet and mobile. desktop seems to be working fine, but the tablet and mobile are being ignored.
Here is my page: http://moran88.github.io/coursera-moran/mod2_solution/
Please help I don't understand the reason of this happening.
Thanks
Your css is missing some brackets, try this:
h1 {
font-family: helvetica, arial;
text-align:center;
}
* {
box-sizing: border-box;
font-family: helvetica, arial;
}
.row {
width:100%;
}
.text {
background-color: #b3ccff;
height:100%;
border: 1px solid black;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
position: relative;
}
p {
padding-top: 10px;
padding-left: 3px;
}
.title {
position: absolute;
top: 0px;
right: 0px;
padding-right: 8px;
padding-left:8px;
border: 1px solid black;
text-align: center;
color: black;
font-weight:bold;
border-color:black;
border-left-width: 1px;
border-top-width: 0px;
border-right-width: 0px;
}
#chicken {
background-color: #2d8659;
color:white;
}
#beef {
background-color: #d1d1e0;
}
#sushi {
background-color: #80ffd4;
}
#media (min-width: 992px){
.col-lg-3{
float: left;
width: 33%;
padding: 15px;
}
}
#media (min-width: 768px) and (max-width: 991px){
.col-md-6 {
float: left;
width: 50%;
}
.col-md-12 {
float: left;
width: 100%;
}
}
#media (max-width: 767px){
.col-sm-12 {
float: left;
width: 100%;
}
}
I need 6 steps. I tried for hours, I just can't make it work. I'm pretty sure it's not that hard for someone more experienced. I've had several forks but all are dead end.
Could you help me out please?
http://codepen.io/kjohnson/pen/azBvaE
HTML:
<section id="Steps" class="steps-section">
<h2 class="steps-header">
Responsive Semantic Timeline
</h2>
<div class="steps-timeline">
<div class="steps-one">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Semantic
</h3>
<p class="steps-description">
The timeline is created using negative margins and a top border.
</p>
</div>
<div class="steps-two">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Relative
</h3>
<p class="steps-description">
All elements are positioned realtive to the parent. No absolute positioning.
</p>
</div>
<div class="steps-three">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Contained
</h3>
<p class="steps-description">
The timeline does not extend past the first and last elements.
</p>
</div>
</div><!-- /.steps-timeline -->
CSS:
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
.section-header, .steps-header, .steps-name {
color: #3498DB;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(255, 0, 0, 0);
}
#media screen and (max-width: 500px) {
.steps-timeline {
border-left: 2px solid #3498DB;
margin-left: 25px;
}
}
#media screen and (min-width: 500px) {
.steps-timeline {
border-top: 2px solid #3498DB;
padding-top: 20px;
margin-top: 40px;
margin-left: 16.65%;
margin-right: 16.65%;
}
}
.steps-timeline:after {
content: "";
display: table;
clear: both;
}
.steps-one,
.steps-two,
.steps-three {
outline: 1px dashed rgba(0, 128, 0, 0);
}
#media screen and (max-width: 500px) {
.steps-one,
.steps-two,
.steps-three {
margin-left: -25px;
}
}
#media screen and (min-width: 500px) {
.steps-one,
.steps-two,
.steps-three {
float: left;
width: 33%;
margin-top: -50px;
}
}
#media screen and (max-width: 500px) {
.steps-one,
.steps-two {
padding-bottom: 40px;
}
}
#media screen and (min-width: 500px) {
.steps-one {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
#media screen and (max-width: 500px) {
.steps-three {
margin-bottom: -100%;
}
}
#media screen and (min-width: 500px) {
.steps-three {
margin-left: 16.65%;
margin-right: -16.65%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
}
#media screen and (max-width: 500px) {
.steps-img {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
#media screen and (min-width: 500px) {
.steps-name {
text-align: center;
}
}
.steps-description {
overflow: hidden;
}
#media screen and (min-width: 500px) {
.steps-description {
text-align: center;
}
}
I assume you want something like this?
http://codepen.io/adamk22/pen/LGQQKz
$outline-width: 0;
$break-point: 500px;
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
color: $brand-primary;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
#extend .section-header;
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(red, $outline-width);
#media screen and (max-width: $break-point) {
border-left: 2px solid $brand-primary;
margin-left: 25px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 8%;
margin-right: 8%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five,
.steps-six{
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 12%;
margin-top: -50px;
}
}
.steps-one,
.steps-two,
.steps-three,
.steps-four,
.steps-five,
.steps-six{
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -8%;
margin-right: 8%;
}
}
.steps-two {
#media screen and (min-width: $break-point) {
margin-right: 8%;
}
}
.steps-three {
#media screen and (min-width: $break-point) {
margin-right: 8%;
}
}
.steps-four {
#media screen and (min-width: $break-point) {
margin-right: 8%;
}
}
.steps-five {
}
.steps-six {
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 8%;
margin-right: -8%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
.steps-name {
#extend .section-header;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
.steps-description {
overflow: hidden;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
Most of the changes require you to change the CSS, especially the media queries as you can see in the pen.