Text-wrap / text-indent for CARD lists ; align wrapped text w/o moving icons

1 reply·opened Oct 9, 2020
F
freakinbananaOct 9, 2020

I went through bootstrap.css and style.css. Tried text-wrap, text-indent, text-position, etc. Got close with inline <SPAN> tag and vertical-align: top, d-inline-block, etc. I am trying to align (wrap) the CARD List text (next to the icon bullets) without moving icons. Is this possible? Please see attached image for visual.

<!-- Start List 1 ============================================= -->
<div class="card event-meta mb-5">
<div class="card-body">
<ul class="portfolio-meta mb-30">
<li><span><i class="icon-shopping-cart"></i>Availability:</span>Lease, Rent or Buy.</span></li>
<li><span><i class="icon-line-hard-drive"></i>Processor:</span> 32-bit ARM11</li>
<li><span><i class="icon-cog1"></i>User Interface:</span> ATM style</li>
<li><span><i class="icon-memory"></i>Memory:</span> 192MB (128MB Flash, 64MB DDR)</li>
<li><span><i class="icon-eye-open"></i>Display:</span> 128 x 64 pixel LCD,  backlit</li>
<li><span><i class="icon-credit-card"></i>Readers:</span> Magnetic track 1 / 2 / 3, bi-directional ; Smart card EMV L1 & L2 certified</li>
<li><span><i class="icon-project-diagram"></i>Comm:</span> Modem: Sync. (HDLC, up to 9600bps) Asnyc. (V.92, up to 56kbps) ; Ethernet</li>
<li><span><i class="icon-lock"></i>Security:</span> PCI PTS 3.x approved DUKPT, Master / Session, 3DES ANSI / ISO9564 format 0, 1, 3 PIN ciphered key algorithm ANSIX9.9 / X 9.19 MAC algorithm</li>
<li><span><i class="icon-printer"></i>Printer:</span> Thermal printer, speed: 25 lps ; Paper roll w:58mm / dia:50mm</li>
<li><span><i class="icon-measure"></i>Size.Weight:</span> Length:8.5" Width: 3.75" Height: 3.4" ; 1.16 lbs.</li>
<li><span><i class="icon-plug"></i>Power:</span> AC adapter Input: 100~240VAC, 50Hz / 60Hz, 1.5A Output: 9 VDC, 1A</li>
</ul>
</div>
</div>
<!-- List 1 End -->
S
SemiColonWebSTAFFOct 10, 2020

Hello,

According to what you are trying to achieve, this will not work with the existing codes. It is recommended to use the Bootstrap Grid: https://getbootstrap.com/docs/4.5/layout/grid/ with Fixed Columns so that the Text remains in the Parent Column rather than overflowing to the Next Line. Example:

<div class="row">
	<div class="col-md-3">Meta Title:</div>
	<div class="col-md">Meta Description</div>
	<div class="w-100 mb-3"></div>
	<div class="col-md-3">Meta Title:</div>
	<div class="col-md">Meta Description</div>
</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