Flush right slider text

Hi,

when taking the "op-personal" template as a basis: is there an easy way to align all the text content in the slider to the right margin instead of the left one?

Best regards,
o

Hi,

thank you, worked like a charm!

Maybe you could also give me a tip for sorting out the following issue:

I want to include a very primitive, responsive, list-based vertical timeline. For that purpose, I've included the following in op-personal.html:

<section id="page-section">
<div class="container clearfix">
   <h1>Curriculum Vitae</h1>
   <span>Education timeline</span></br></br>
   <ul class="timeline">
   <li>
   <p class="timeline-date">2009 - 2015</p>
   <div class="timeline-content">
      <h3>Event A</h3>
      <p>Short description</p>
   </div>
   </li>
   <li>
   <p class="timeline-date">2008 - 2009</p>
   <div class="timeline-content">
      <h3>Event B</h3>
      <p>Short description</p>
   </div>
   </li>
   <li>
   <p class="timeline-date">2007 - 2008</p>
   <div class="timeline-content">
   <h3>Event C</h3>
   <p>Short description</p>
   </div>
   </li>
   </ul>
</div>
</section>

The CSS (placed in custom.css) looks as follows:

.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 6px #f6f6f6 solid;
    padding-left: 30px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #3CB5F9;
    position: absolute;
    left: 107px;
    top: 24px;
    border-radius: 100%;
  }
}

(The pixel values might require some change to be consistent with the values you apply for making the template responsive.)
When using this code outside the template, timeline-date and timeline-content are perfectly aligned. Within the template, however, the timeline-content is slightly shifted upwards. What could cause that conflict? Should I somehow reset certain styles first?

Sorry for that basic question, but I'm a bloody beginner.

Best regards,
o

Hello,

maybe you could give me a tip for sorting out the following issue:

I want to include a very primitive, responsive, list-based vertical timeline. For that purpose, I’ve included the following in op-personal.html:

<section id="page-section">
<div class="container clearfix">
   <h1>Curriculum Vitae</h1>
   <span>Education timeline</span></br></br>
   <ul class="timeline">
   <li>
   <p class="timeline-date">2009 - 2015</p>
   <div class="timeline-content">
      <h3>Event A</h3>
      <p>Short description</p>
   </div>
   </li>
   <li>
   <p class="timeline-date">2008 - 2009</p>
   <div class="timeline-content">
      <h3>Event B</h3>
      <p>Short description</p>
   </div>
   </li>
   <li>
   <p class="timeline-date">2007 - 2008</p>
   <div class="timeline-content">
      <h3>Event C</h3>
      <p>Short description</p>
   </div>
   </li>
   </ul>
</div>
</section>

The CSS (placed in custom.css) looks as follows:

.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}
 
/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 6px #f6f6f6 solid;
    padding-left: 30px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #3CB5F9;
    position: absolute;
    left: 107px;
    top: 24px;
    border-radius: 100%;
  }
}

(The pixel values might require some change to be consistent with the values you apply for making the template responsive.)
When using this code outside the template, timeline-date and timeline-content are perfectly aligned. Within the template, however, timeline-content is slightly shifted upwards. What could cause that conflict? Should I somehow reset certain styles first?

Sorry for that basic question, but I’m a bloody beginner.

Best regards,
o