Dawn Theme Tabellenausrichtung funktioniert nicht

[LarsLeipson]

Liebe Community,

ich versuche den Inhalt einer Seite auf einer URL einzubinden. Konkret den "Warum LIDA" Block auf dem angehängten Screenshot. Leider schaffe ich es nicht, diesen Block linksbündig, so wie alles andere auszurichten.

Ich habe den Table in HTML nachgebaut, weil ich sonst kein passendes Layout gefunden habe.

Habt ihr einen Tipp für mich, wie ich das richtig ausgerichtet bekomme? Support meinte via Custom CSS vielleicht? 

Danke!!

HTML Code:

<div class="rich-text__wrapper rich-text__wrapper--left page-width">
<div class="rich-text__wrapper rich-text__wrapper--left page-width">
<div class="rich-text__blocks left">
<h2 class="rich-text__heading rte h1" data-shopify-editor-block="{&quot;id&quot;:&quot;template--16790780510472__aead7ee7-78fe-40ef-8e65-dab34fbf0c1c-167232490921e9a1c4-0&quot;,&quot;type&quot;:&quot;heading&quot;}"></h2>
</div>
</div>
</div>
<style type="text/css"><!--
.table {
border: 0px;
border-collapse: separate;
border-spacing: 0px 20px;

}

th, td {
border: 0px;
padding:10px 10px 10px 10px;
background: #F3F3F3

}
--></style>
<div class="rich-text__wrapper rich-text__wrapper--left page-width">
<div class="rich-text__blocks left">
<table class="table" width="1100px">
<tbody>
<tr>
<td style="width: 10%; text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0658/4356/0712/files/proposition_32x32.png?v=1672434045" alt="" /></td>
<td style="width: 86.9147%;">  LIDA data is highly relevant and directly drives <b>business value</b> (increases revenue/reduces cost)</td>
</tr>
<tr>
<td style="width: 10%; text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0658/4356/0712/files/easy-to-use_32x32.png?v=1672434066" alt="" /></td>
<td style="width: 86.9147%;">LIDA is <b>easy to use</b> for anyone via highly flexible and intuitive Tableau dashboards</td>
</tr>
<tr>
<td style="width: 10%; text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0658/4356/0712/files/united_32x32.png?v=1672434087" alt="" /></td>
<td style="width: 86.9147%;"> LIDA fosters <b>collaboration</b> with anyone you work with, be it internally by other departments, or by external business partners</td>
</tr>
<tr>
<td style="width: 10%; text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0658/4356/0712/files/artificial-intelligence_small_9ac5e466-0139-4..." alt="" /></td>
<td style="width: 86.9147%;">LIDA let's you benefit from <b>modern technologies</b> like machine learning and artificial intelligence without you having to lift a finger</td>
</tr>
<tr>
<td style="width: 10%; text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0658/4356/0712/files/low-risk_32x32.png?v=1672434118" alt="" /></td>
<td style="width: 86.9147%;">LIDA is <b>low risks</b> for you, the pricing is reasonable, you can test what you get beforehand, and subscriptions can be canceled monthly</td>
</tr>
</tbody>
</table>
</div>
</div>

[Finer]

@LarsLeipson hast du einen Link zu deiner Seite? Das wäre definitiv einfacher.

[LarsLeipson]

hey, 
danke für deine antwort! 

https://www.literaturedata.com/de/pages/productssuccessanalytics

PW: welcometolida

danke und lg

lars

[Finer · Accepted solution]

@LarsLeipson du kannst zunächst aus der Section die Class "page-width--narrow" (vor dem Text "Warum Lida") entfernen. Dadruch ist der Container schon mal nicht einer Klasse zugeordnet, welches an sich bereits klein (schmal) ist. Dadruch rückt das ganze ein wenig weiter nach links.

Grundsätzlich besteht aber das Problem, dass die Tabelle statische Werte enthält. Dadruch wird sich das nicht so einfach an die Bildschirmgröße anpassen.