Need help with html code, keeping text within box

Solved

Need help with html code, keeping text within box

TUB
Tourist
6 1 1

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.png

How I want it to look ^^ Above ^^

 

how it is looking on shopify.png

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>

Accepted Solution (1)

AnneLuo
Shopify Partner
758 144 157

This is an accepted solution.

Hi, @TUB 

Please share the store URL so that I can assist you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 2 (2)

AnneLuo
Shopify Partner
758 144 157

This is an accepted solution.

Hi, @TUB 

Please share the store URL so that I can assist you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

TUB
Tourist
6 1 1

Hi AnneLuo, 

 

Thank you for responding! I have managed to figure it out, thank you so much.