0
The desktop layout has a horizontal Timeline and when accessing through mobile, Timeline should be vertical.
HTML code:
<section class="status">
<div class="status__box">
<p class="notaEmitida">Nota Fiscal Emitida</p>
<div class="status__vector">
<svg class="notaFiscalEmitida" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
<svg class="line" width="120" height="3" viewBox="0 0 120 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M119.675 1.26636L0.111959 1.26636" stroke="#E5E5E5" stroke-width="2" />
</svg>
</div>
</div>
<div class="status__box">
<p class="despachado">Despachado</p>
<div class="status__vector">
<svg class="produtoDespachado" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
<svg class="line" width="120" height="3" viewBox="0 0 120 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M119.675 1.26636L0.111959 1.26636" stroke="#E5E5E5" stroke-width="2" />
</svg>
</div>
</div>
<div class="status__box">
<p class="transito">Em trânsito</p>
<div class="status__vector">
<svg class="emTransito" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
<svg class="line" width="120" height="3" viewBox="0 0 120 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M119.675 1.26636L0.111959 1.26636" stroke="#E5E5E5" stroke-width="2" />
</svg>
</div>
</div>
<div class="status__box">
<p class="entrega">Saiu para entrega</p>
<div class="status__vector">
<svg class="rotaEntrega" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
<svg class="line" width="120" height="3" viewBox="0 0 120 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M119.675 1.26636L0.111959 1.26636" stroke="#E5E5E5" stroke-width="2" />
</svg>
</div>
</div>
<div class="status__box">
<p class="entregue">Entregue</p>
<div class="status__vector">
<svg class="produtoEntregue" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
</div>
</div>
</section>
SCSS code:
.status {
margin-top: 116px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
&__vector {
display: flex;
justify-content: center;
align-items: center;
}
&__box {
p {
padding-bottom: 20px;
position: relative;
font-weight: bold;
font-style: italic;
font-size: 13px;
color: #E5E5E5;
}
}
}Is that way:
Should get mobile version:
What is the best way to make the layout fit the mobile?
Take a look at the property
@mediaCSS. She is responsible for applying styles conditionally. Click here– yoyo
It would be easier if you had done it in CSS and not with SVG, it will complicate things a lot
– hugocsl