nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Side by side alignment of comoponents in liquid layout

g2svnit

Hello All,

i am using LiveSite( TaemSite version : 6.7.2) to create a template with custom layout, but by doing so I am not be able to align components side by side in a particular area/column( though i can add one below the other) . I tried adding nested rows inside area in descriptor.xml file,so that i can add two areas/columns inside that row and can place the components in those areas, but it does not recognize those nested rows inside area.
Any solution please???

Thanks in advance,
Jitu.

Find more posts tagged with

Comments

vpatel

... I am not be able to align components side by side in a particular area/column( though i can add one below the other) . ...

In liquid layout (custom FALs), in any given area components just stack up on top of each other. You probably want a column (within a single row) for each component that you are trying to align in a given row.

HTH!

g2svnit

I want to align components, horizontally in a column.....

Here is a senario:


*


<canvas>

*<Row>

**<Area>

**<component/>

**<component/>(they r vertically aligned)

**</Area>

*</Row>

*<Row>

**<Area>

***<component/>(they r vertically aligned)

***<component/>

***<component/>

***<component/>

**</Area>***

**<Area>

******** <component 1/>

***<component 2/>< component 3/> (we want component 2 and 3 to come below component 1 and they should be side by side)

**</Area>

**<Area>

***<component/>(they r vertically aligned)

***<component/>

**</Area>

*</Row>

</canvas>*

**

allthree.png

vpatel

Create a Row that'll have component 1 and span 2 columns.

Create another Row that'll have component 2 and 3.

If I understand your question correctly that is all you need, right? Is that what you are after?