Hi,
I’m trying hard to achieve the following lay-out in Shoelace CSS / Flexbox.
***** DESKTOP *******
[ <–BACK-- ]
[----------------- HEADER -----------------]
[-- META DATA --] [ ------- IMAGE ------ ]
[-- TAG DATA --] [ ------- SUMMARY ----- ]
[ ------- CONTENT ------
------- CONTENT ------
------- CONTENT ------
------- CONTENT ------
------- CONTENT ------
------- CONTENT ------]
******* MOBILE *********
[------- HEADER ------]
[ ------ IMAGE ----- ]
[ ----- SUMMARY ----- ]
[-- TAG DATA --]
[ ------ CONTENT -----
------- CONTENT -----
------- CONTENT -----
------- CONTENT -----
------- CONTENT -----
------- CONTENT -----]
Steps to Reproduce
<article>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
back button
</div>
<div class=col-10>
<header><h1 class=text-center>{$page_title}</h1></header>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="col-auto text-small">
Date: <em>{$entry->postdate|cms_date_format}</em>
</div>
<div class="col-auto text-small">
<div class="row">
<div class="col-auto">
Category:
</div>
<span class="text-secondary">
{$tags|substr:0:-2}
</span>
</div>
</div>
<div class="col-auto text-small">
Author: <em>{$entry->author}</em>
</div>
<div class="col-auto text-small">
{svg use="bubbles"}
</div>
</div>
<div class="col-md-9">
Image
</div>
<div class="col-md-9">
Content
</div>
</div>
<div class="row">
<div class="col-md-3">
Category
</div>
</div>
</div>
</article>
Anyone able to help me to get a step further?
Thanks in advance for your cooperation!