CODEWITHSUNDEEP
htmlcssresponsive-designstyling
Azazel
Azazel

Reputation: 593

Responsive timeline move dot to right

So from my responsive timeline. I was able to get my problem fixed following up my last forum, now I am having trouble trying to get my blue dot that is on my left column to be in that center line in the middle of the timeline. The right column looks good, now the left column dot needs to be center.

Also, a minor problem. I noticed that in my right column, the text is "left-align" perfectly where as the text in the left column is not "right-align".

When you run the code snippet, I suggest you view it in full page to see what I'm talking about.

Just so you know, I copied this from codepen.io because I was too lazy to make my own responsive timeline and they can get quite complicated to make one because there is just so many different methods to making a timeline.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

h1 {
  text-align: center;
  font-weight: 300;
  color: #777
}

h1 span {
  font-weight: 600;
}

.container {
  width: 80%;
  padding: 50px 0;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  font-family: sans-serif;
}

.container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
  background: #CCD1D9;
  z-index: 1;
}

.timeline-block {
  width: -webkit-calc(50% + 8px);
  width: -moz-calc(50% + 8px);
  width: calc(50% + 8px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  justify-content: space-between;
  clear: both;
}

.timeline-block-right {
  float: right;
}

.timeline-block-left {
  float: left;
  text-align: right;
}

.marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #F5F7FA;
  background: #4FC1E9;
  margin-top: 10px;
  z-index: 9999;
}

.timeline-content {
  width: 95%;
  padding: 0 15px;
  color: #666;
}

.timeline-content h3 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 500;
}

.timeline-content span {
  font-size: 15px;
  color: #a4a4a4;
}

.timeline-content p {
  font-size: 14px;
  line-height: 1.5em;
  word-spacing: 1px;
  color: #888;
}


/* ==================== Timeline Media Queries ==================== */

@media screen and (max-width: 800px) {
  .container:before {
    left: 8px;
    width: 2px;
  }
  .timeline-block {
    width: 100%;
    margin-bottom: 30px;
  }
  .timeline-block-right {
    float: none;
  }
  .timeline-block-left {
    float: none;
    text-align: left;
  }
}
<div class="container">

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>This is a test</h3>
      <span>Testing</span>
      <p>
        <span style="font-size: 16px; color: #666666;">This is a mini title</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>

  <div class="timeline-block timeline-block-left">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>This is a test</h3>
      <span>Testing</span>
      <p>
        <span style="font-size: 16px; color: #666666;">This is a mini title</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>


</div>

Upvotes: 0

Views: 664

Answers (1)

Kalnode
Kalnode

Reputation: 11356

For your main problem (centering the blue dot for left-floated timeline items):

Add the following to .timeline-block-left

display: flex;
flex-direction: row-reverse;

This essentially reverses the two elements (marker and text), meanwhile maintaining your HTML structure. Overall you should probably make more use of flexbox; there's lot of power with it.

As well, you should account for this in your responsive @media rules, so when in mobile view you switch flex-direction to just row.

For your second problem (text-alignment), I don't see any issue?

Upvotes: 1

Related Questions