You’re offline. This is a read only version of the page.
I have a question about a two columns section component in a portal page. Is it possible to adjust the width of the columns? I would like to have one column 2 thirds the width of the container and the second column 1 third the width. The first column will contain an entity list and the second column will contain some text related to the entity list. Also, I would like the container, which has the 2 columns, to be the full width of the section which holds the container. I'm trying to achieve the layout as in the attached image file. I’ve got the image at the top of the screenshot working fine by creating a new CSS section class and using it in the web template for the page.
Thanks ragavanrajan
Hi @paulsnolan ,
If you are using the portal studio. Just select the first column > Select components from the left menu and insert entity list.
or you can simply include the liquid tag inside the first column like below.
Share
Report
All responses (
Answers (<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
<div class="col-md-8 columnBlockLayout" style="display: flex; flex-direction: column; background: red;">{% include 'entity_list' key: 'EmpList' %}</div>
<div class="col-md-4 columnBlockLayout" style="display: flex; flex-direction: column; background: green;"></div>
</div>
Output:
Hope it helps.
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
Thanks
How would I place my entity list in the first column?
Hi @paulsnolan ,
By changing a few inbuilt classes you can easily achieve this. Please try the below code to get what you want as per your screenshot.
<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
<div class="col-md-8 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
<div class="col-md-4 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
</div>
Output:
Hope it helps.
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
#1
Lucas001
60
Super User 2025 Season 2
#2
Fubar
55
Super User 2025 Season 2
#3
surya narayanan
35
