Html 引导时间轴修复

我正在创建一个引导时间表，它在移动或小屏幕设备中运行良好。但它在大屏幕设备中存在一些问题。请点击查看。并尝试调整窗口大小以检查其功能。它的工作原理应该与移动设备中的相同。
请在codepen上检查它。（在给定的链接上）

代码：

---

您已经给出了

.timeline面板

到

767px

分辨率的计算宽度。对于其他设备，宽度为

46%

。这就是为什么时间线面板未与图标对齐的原因

解决方案#1 尝试为所有设备的时间线面板提供计算宽度。因此，移除

（最小宽度：767px）

中的calc，并将其添加到顶部申报中

ul.timeline > li > .timeline-panel {
    float: left;
    position: relative;
    width: 46%; // remove this or can be fallback
    padding: 30px 30px 20px 0px;
    width: calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
 }

解决方案#2 删除

（最小宽度：767px）

中

时间线面板的宽度，并更新顶部声明

@media(max-width:767px) {
    //remove
     /*ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
      } */ 
}

.timeline > li > .timeline-panel {
    float: left;
    position: relative;
    width: 100%;
    padding: 30px 30px 20px 100px;
}

我更喜欢这种方法。这是密码笔，

谢谢
 您已经给出了
.timeline面板
到
767px
分辨率的计算宽度。对于其他设备，宽度为
46%
。这就是为什么时间线面板未与图标对齐的原因

解决方案#1
尝试为所有设备的时间线面板提供计算宽度。因此，移除
（最小宽度：767px）
中的calc，并将其添加到顶部申报中

ul.timeline > li > .timeline-panel {
    float: left;
    position: relative;
    width: 46%; // remove this or can be fallback
    padding: 30px 30px 20px 0px;
    width: calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
 }

解决方案#2
删除
（最小宽度：767px）
中
时间线面板的宽度，并更新顶部声明

@media(max-width:767px) {
    //remove
     /*ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
      } */ 
}

.timeline > li > .timeline-panel {
    float: left;
    position: relative;
    width: 100%;
    padding: 30px 30px 20px 100px;
}

我更喜欢这种方法。这是密码笔，

谢谢