Need help with html code, keeping text within box

TUB · ‎07-01-2024

Hello friends!

I am looking for some help with my HTML code.

I need a code that will keep my code within the box. Please see image of how I want it to look vs how it is looking on shopify.

The text is not combined within the box, instead it is spread across all boxes making it impossible to read.

Please see images attached for reference:

How I want it to look ^^ Above ^^

How it is looking on shopify ^^ above ^^

HTML code below:

<div id="ADVANCE_TABLE-Xl2FNx3czu">
<div class="advance-table-container">
<table>
<tbody>
<tr>
<td><strong> </strong></td>
<td>
<div class="advance-table-image-with-text">
<a href=" post link here" target="_blank"> <img alt="alt text here" src="post link here> </a>
<p><a href="link goes here" target="_blank"> name </a></p>
</div>
</td>
<td>
<div class="advance-table-image-with-text">
<a href="link goes here" target="_blank"> <img alt="alt text here" src="post link here"> </a>
<p><a href="link goes here" target="_blank"> name </a></p>
</div>
</td>
<td>
<div class="advance-table-image-with-text">
<a href="link goes here" target="_blank"> <img alt="alt text" src="link goes here"> </a>
<p><a href="link" target="_blank"> name </a></p>
</div>
</td>
<td>
<div class="advance-table-image-with-text">
<a href="link goes here" target="_blank"> <img alt="alt text" src="link"> </a>
<p><a href="link goes here" target="_blank"> name </a></p>
</div>
</td>
<td>
<div class="advance-table-image-with-text">
<a href="link goes here" target="_blank"> <img alt="alt text" src="link goes here"> </a>
<p><a href="link" target="_blank"> name </a></p>
</div>
</td>
</tr>
<tr>
<td><strong> Recognition </strong></td>
<td><a href="https://google.com" target="_blank"> <img alt="top seller badge" src="link"> </a></td>
<td><a href="https://google.com" target="_blank"> <img alt="customer favourite badge" src="link"> </a></td>
<td><a href="https://google.com" target="_blank"> <img alt="top performer badge" src="link"> </a></td>
<td>
<div class="advance-table-image-with-text">
<a href="link" target="_blank"> <img alt="best value badge" src="image"> </a>
<p><a href="link" target="_blank"> </a></p>
</div>
</td>
<td><a href="https://google.com" target="_blank"> <img alt="innovation award badge" src="link"> </a></td>
</tr>
<tr>
<td><strong> Price (From) </strong></td>
<td>£894</td>
<td>£998</td>
<td>£1078</td>
<td>£527</td>
<td>£658</td>
</tr>
<tr>
<td><strong> Overall Score </strong></td>
<td>
<div class="advance-table-score">
<div style="width: 95%; background-color: #86b556; color: #fff;">
<p>95</p>
</div>
</div>
</td>
<td>
<div class="advance-table-score">
<div style="width: 92%; background-color: #86b556; color: #fff;">
<p>92</p>
</div>
</div>
</td>
<td>
<div class="advance-table-score">
<div style="width: 86%; background-color: #a1b751; color: #fff;">
<p>86</p>
</div>
</div>
</td>
<td>
<div class="advance-table-score">
<div style="width: 90%; background-color: #86b556; color: #fff;">
<p>90</p>
</div>
</div>
</td>
<td>
<div class="advance-table-score">
<div style="width: 84%; background-color: #a1b751; color: #fff;">
<p>84</p>
</div>
</div>
</td>
</tr>
<tr>
<td><strong> Star Rating </strong></td>
<td>
<div class="advance-table-stars">
<span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span>
</div>
</td>
<td>
<div class="advance-table-stars">
<span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span>
</div>
</td>
<td>
<div class="advance-table-stars">
<span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">☆</span>
</div>
</td>
<td>
<div class="advance-table-stars">
<span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">☆</span>
</div>
</td>
<td>
<div class="advance-table-stars">
<span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">★</span><span style="color: #f19100;">☆</span><span style="color: #f19100;">☆</span>
</div>
</td>
</tr>
<tr>
<td><strong> Details </strong></td>
<td>Text Goes Here.</td>
<td>SText Goes Here.</td>
<td>Text Goes Here</td>
<td>Text Goes Here</td>
<td>Text Goes Here.</td>
</tr>
<tr>
<td><strong> Pros </strong></td>
<td>Text Goes Here.</td>
<td>Text Goes Here.</td>
<td>Text Goes Here.</td>
<td>Text Goes Here.</td>
<td>Text Goes Here.</td>
</tr>
<tr>
<td><strong> Cons </strong></td>
<td>Text Goes Here.</td>
<td>Text Goes Here.</td>
<td>Text Goes Here.</td>
<td>Text Goes Here</td>
<td>Text Goes Here.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="HEADING-MLwi4kOVma">
<h2 class="h2 heading-MLwi4kOVma"><br></h2>
</div>
<style>.heading-nezvkggm7f { color: #5d5a58; text-align: left; font-size: null; color: #5d5a58 !important; } #HEADING-nezvkggm7f {
margin-bottom: 10px;
} .two_column_grid-ZRyXjHmGFD { align-items: center; } .two_column_heading-ZRyXjHmGFD { color: #5d5a58; text-align: left; font-size: null; color: #5d5a58 !important; } .grid_plain_text-ZRyXjHmGFD { color: #5d5a58; font-size: ; text-align: left; color: #5d5a58 !important; } .grid_media-ZRyXjHmGFD { height: null; width: null; } .grid_media_container-ZRyXjHmGFD { text-align: null; order: 1; } .two_column_button-ZRyXjHmGFD { background-color: #000; color: #fff; font-size: 16px; color: #fff !important; } #TWO_COLUMN_GRID-ZRyXjHmGFD {
margin-bottom: 10px;
} .toc_heading-RgPWyH2CCH { color: #000; text-align: left; font-size: null; color: #000 !important; } #TABLE_OF_CONTENTS-RgPWyH2CCH {
margin-bottom: 10px;
} .two_column_grid-ISwx5Qx3X7 { align-items: center; } .two_column_heading-ISwx5Qx3X7 { color: #5d5a58; text-align: left; font-size: null; color: #5d5a58 !important; } .grid_plain_text-ISwx5Qx3X7 { color: #5d5a58; font-size: ; text-align: left; color: #5d5a58 !important; } .grid_media-ISwx5Qx3X7 { height: null; width: null; } .grid_media_container-ISwx5Qx3X7 { text-align: null; order: -1; } .two_column_button-ISwx5Qx3X7 { background-color: #000; color: #fff; font-size: 16px; color: #fff !important; } #TWO_COLUMN_GRID-ISwx5Qx3X7 {
margin-bottom: 10px;
} .two_column_vertical_grid_heading_0-iqd1dxfTbk { color: #000; text-align: left; font-size: null; color: #000 !important; } .two_column_vertical_grid_plain_text_0-iqd1dxfTbk { color: #5d5a58; font-size: ; text-align: left; color: #5d5a58 !important; } .two_column_vertical_grid_media_0-iqd1dxfTbk { height: null; width: null; } .two_column_vertical_grid_media_container_0-iqd1dxfTbk { text-align: null; } .two_column_vertical_grid_button_container_0-iqd1dxfTbk { text-align: left; } .two_column_vertical_grid_button_0-iqd1dxfTbk { background-color: #D36521; color: #fff; font-size: 14px; color: #fff !important; } .two_column_vertical_grid_heading_1-iqd1dxfTbk { color: #000; text-align: left; font-size: null; color: #000 !important; } .two_column_vertical_grid_plain_text_1-iqd1dxfTbk { color: #5d5a58; font-size: ; text-align: left; color: #5d5a58 !important; } .two_column_vertical_grid_media_1-iqd1dxfTbk { height: null; width: null; } .two_column_vertical_grid_media_container_1-iqd1dxfTbk { text-align: null; } .two_column_vertical_grid_button_container_1-iqd1dxfTbk { text-align: left; } .two_column_vertical_grid_button_1-iqd1dxfTbk { background-color: #D36521; color: #fff; font-size: 14px; color: #fff !important; } #TWO_COLUMN_VERTICAL_GRID-iqd1dxfTbk {
margin-bottom: 10px;
} .four_column_grid_container-abJoRAPTZW { background-color: #ad5e42; color: #ffffff; color: #ffffff !important; } .four_column_grid_heading_0-abJoRAPTZW { color: ; text-align: center; font-size: 20px; color: !important; } .four_column_grid_plain_text_0-abJoRAPTZW { color: ; font-size: ; text-align: center; color: !important; } .four_column_grid_media_0-abJoRAPTZW { height: null; width: 50px; } .four_column_grid_media_container_0-abJoRAPTZW { text-align: null; } .four_column_grid_heading_1-abJoRAPTZW { color: ; text-align: center; font-size: 20px; color: !important; } .four_column_grid_plain_text_1-abJoRAPTZW { color: ; font-size: ; text-align: center; color: !important; } .four_column_grid_media_1-abJoRAPTZW { height: null; width: 50px; } .four_column_grid_media_container_1-abJoRAPTZW { text-align: null; } .four_column_grid_heading_2-abJoRAPTZW { color: ; text-align: center; font-size: 20px; color: !important; } .four_column_grid_plain_text_2-abJoRAPTZW { color: ; font-size: ; text-align: center; color: !important; } .four_column_grid_media_2-abJoRAPTZW { height: null; width: 50px; } .four_column_grid_media_container_2-abJoRAPTZW { text-align: null; } .four_column_grid_heading_3-abJoRAPTZW { color: ; text-align: center; font-size: 20px; color: !important; } .four_column_grid_plain_text_3-abJoRAPTZW { color: ; font-size: ; text-align: center; color: !important; } .four_column_grid_media_3-abJoRAPTZW { height: null; width: 50px; } .four_column_grid_media_container_3-abJoRAPTZW { text-align: null; } #FOUR_COLUMN_GIRD-abJoRAPTZW {
margin-bottom: 10px;
} #ADVANCE_TABLE-Xl2FNx3czu {
margin-bottom: 10px; margin-top: 6px;
} .heading-MLwi4kOVma { color: #5d5a58; text-align: left; font-size: null; color: #5d5a58 !important; } #HEADING-MLwi4kOVma {
margin-bottom: 10px;
}

@media (max-width: 798px) {
#HEADING-nezvkggm7f {

} #TWO_COLUMN_GRID-ZRyXjHmGFD {

} #TABLE_OF_CONTENTS-RgPWyH2CCH {

} #TWO_COLUMN_GRID-ISwx5Qx3X7 {

} #TWO_COLUMN_VERTICAL_GRID-iqd1dxfTbk {

} #FOUR_COLUMN_GIRD-abJoRAPTZW {

} #ADVANCE_TABLE-Xl2FNx3czu {

} #HEADING-MLwi4kOVma {

}
}
</style>