I searched the demos and examples, but could not find something that fit this request...
I need to build an article's index page, listing the article title, date, number of views and average rating. It would need to be responsible: for medium-large screens, it would show all the 4 information, but for small screens, it would show just the titles.
Hello,
We have an Article Layout available here: https://themes.semicolonweb.com/html/canvas/demo-forum.html . You can also create one easily by using the Bootstrap Grid and List Groups using the following code:
<ul class="list-group mb-6">
<li class="list-group-item">
<div class="row py-2">
<div class="col"><a href="#" class="h5">This is an Article Title</a></div>
<div class="col-2 text-center">31st Dec 2021</div>
<div class="col-2 d-none d-md-block text-center">200 Views</div>
<div class="col-1 d-none d-md-block text-center">4.5/5</div>
</div>
</li>
<li class="list-group-item">
<div class="row py-2">
<div class="col"><a href="#" class="h5">This is an Article Title</a></div>
<div class="col-2 text-center">31st Dec 2021</div>
<div class="col-2 d-none d-md-block text-center">200 Views</div>
<div class="col-1 d-none d-md-block text-center">4.5/5</div>
</div>
</li>
<li class="list-group-item">
<div class="row py-2">
<div class="col"><a href="#" class="h5">This is an Article Title</a></div>
<div class="col-2 text-center">31st Dec 2021</div>
<div class="col-2 d-none d-md-block text-center">200 Views</div>
<div class="col-1 d-none d-md-block text-center">4.5/5</div>
</div>
</li>
<li class="list-group-item">
<div class="row py-2">
<div class="col"><a href="#" class="h5">This is an Article Title</a></div>
<div class="col-2 text-center">31st Dec 2021</div>
<div class="col-2 d-none d-md-block text-center">200 Views</div>
<div class="col-1 d-none d-md-block text-center">4.5/5</div>
</div>
</li>
<li class="list-group-item">
<div class="row py-2">
<div class="col"><a href="#" class="h5">This is an Article Title</a></div>
<div class="col-2 text-center">31st Dec 2021</div>
<div class="col-2 d-none d-md-block text-center">200 Views</div>
<div class="col-1 d-none d-md-block text-center">4.5/5</div>
</div>
</li>
</ul>This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I'm using the suggested solution in https://novo.firebase.com.br/artindex.php, and it works fine in desktop browsers, but in a smartphone, the "date" column overflows the screen area. How can this be fixed?
Hello,
You will need to change the Columns of the Title and Date according to your needs. You can consider using the following code for the Title and Date Columns:
<div class="col-12 col-md"><a href="#" class="h5">This is an Article Title</a></div>
<div class="col-12 col-md-2 text-left text-md-center">31st Dec 2021</div>This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard