Timeline as designed in web siute to mobile view

Hello

I asked before about how to make two columns instead of one in mobile look. Roman answered very polite that’s is beyond your policy to help here. But I’m asking again due to your super timeline that has some sort of wandering storytelling. In mobile view its rather unfortunately compressed as enclosed. And therefore, are there any possibilities that the view of the beautiful timeline look more alike in mobile view as in the web site view. My site is www.becht.dk

http://www.becht.dk/wp-content/uploads/2017/02/COLUMNS.png

Kind Regards
Peter

Hello there,

I didn’t see your timeline on your homepage. Did you remove it? Or, is it on other page?

Regards,
Kharis

Hello Kharis

Sorry its my biography; like this

http://www.becht.dk/biography/

Down at “about” page, there is a button " read biography",

Kind Regards

Peter

Hello there,

If I could understand your idea, you’d add the below CSS code into your site’s additional CSS under Appearance > Customize > Additional CSS or child theme’s style.css.


@media only screen and (max-width:767px){
  
  .timeline {
    margin-left: 15px;
    margin-bottom: 0;
  }
  
  .timeline-even .timeline-inner {
    margin-left: -5px; 
  } 
  
  .timeline-inner {
    border-left: 3px solid #DCE1E4 !important;  
  } 
  
  .timeline .content {
    width: calc(100% - 30px);
    margin-bottom: 15px;
  }
  
  .timeline:last-child .content{
    margin-bottom: 0;
  }
  
  .timeline-inner .icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
    padding: 7px;
    right: 0;
    margin-left: -16px;
  }  
  
  .timeline-even .timeline-inner .icon {
    margin-left: -16px; 
  }  
  
}

Regards,
Kharis

Thans Kharis

It worked

Kind regards
Peter

You’re welcome, Peter.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis