Align Cards-List to Center

586
1
Jump to solution
03-22-2018 05:55 PM
KrystalPhaneuf3
New Contributor III

I'm trying to align the cards-list to center in the text block.  Right now it aligns to the top right of the block forcing there to be a larger gap between text on the left than on the right.  I'd like to center it so i can offset cards and text evenly.  Below is the code for the card and attached is a picture showing what I mean.  Any help is greatly appreciated!aligns top right of text block so the text on the left has a larger gap than text on the right.

<ul class="cards-list">
<li class="col-xs-12 col-sm-6 col-md-3">
<div class="card center-block"><img src="https://gis.vta.org/images/lrt.jpg" alt="Ridership">
<div class="card-options">
<br />
<br />
<a href="https://community.esri.com/pages/ridership" class="btn btn-default">Ridership</a>
</div>
<hr>
<br />
<h3>Ridership</h3>
<p> Explore the ridership dashboard.</p>
</div>
</li>
</ul>

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

Hi Krystal,

If I might offer a suggestion...I know the code above that you provided is part of the default site template. While we still support that type of card, it is our goal to update new site templates to use a more accessible, more mobile-friendly version of cards for which support is already included in our codebase. While you may be able to achieve your desired look by overriding the width of the cards in the .cards-list .card class with inline or embedded styling, I would encourage actually using this code instead: http://esri.github.io/calcite-bootstrap/patterns.html#card-classic which will automatically resize your card to fill the whole space. Then you wouldn't need to center the card and could instead add a margin to your text.

View solution in original post

0 Kudos
1 Reply
KlaraSchmitt
Esri Contributor

Hi Krystal,

If I might offer a suggestion...I know the code above that you provided is part of the default site template. While we still support that type of card, it is our goal to update new site templates to use a more accessible, more mobile-friendly version of cards for which support is already included in our codebase. While you may be able to achieve your desired look by overriding the width of the cards in the .cards-list .card class with inline or embedded styling, I would encourage actually using this code instead: http://esri.github.io/calcite-bootstrap/patterns.html#card-classic which will automatically resize your card to fill the whole space. Then you wouldn't need to center the card and could instead add a margin to your text.

0 Kudos