Add a Summary Block (List Design). To better understand the concepts applied on this snippet, please check-out our Module 5 Pseudo Elements. /// MOBILE SECTION-SELECTOR { @media screen and (max-width:767px) { .sqs-block-summary-v2 { margin-left:17px; } .sqs-block-summary-v2::before { content:""; position:absolute; left:0%; height:100%; width:1px; background:red; } .summary-item::before { content:""; position:absolute; height:10px; width:10px; background:red; border-radius:50%; left:-5px; border:1px solid black; } } } /// DESKTOP SECTION-SELECTOR { @media screen and (min-width:768px) { .summary-item-list::before { content:""; position:absolute; left:50%; transform:translateX(-50%); height:100%; width:2px; background:#9D503E; } .summary-item:nth-child(odd)::before { content:""; position:absolute; height:10px; width:10px; background:#4E5851; border-radius:50%; left:-22px; border:1px solid #9D503E; } .summary-item:nth-child(even)::after { content:""; position:absolute; height:10px; width:10px; background:#4E5851; border-radius:50%; right:-7px; border:1px solid #9D503E; } .sqs-block:last-child { padding-bottom:0px !important; } .summary-item:nth-child(odd) { position:relative; left:50%; width:50%; margin-left:17px; } .summary-item:nth-child(even) { display:flex; flex-direction:row-reverse; position:relative; width:50%; .summary-content { text-align:right !important; } .summary-title, .summary-excerpt p, .summary-metadata { text-align:right !important; margin-right:17px; } } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter