Custom Page Table not Centered, Tried mod-ing liquid files and page code

judithtirwin · ‎09-19-2022

Hi Guys,

I made a page uses the standard page template, in that page I have a table with a picture in each cell.

When I look at the page in the finished site, the left margin is fixed, the right margin gets pushed out too far.

Tried modifying my theme file, didn't work.

Tried modifying my page file, didn't work.

Please help.

Here is my page code:

<p>Custom Organic Walls Available on Request</p>
<p style="text-align: left;">Send Judith Direct Message via Contact Page</p>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>
<div></div>
<table width="1077" height="1418">
<tbody>
<tr style="height: 491px;">
<td style="width: 360px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_9983_480x480.jpg?v=1663618089" alt="" /></td>
<td style="width: 360px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_4030_480x480.jpg?v=1663618011" alt="" /></td>
<td style="width: 395px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_4441_480x480.jpg?v=1663618066" alt="" /></td>
</tr>
<tr style="height: 491px;">
<td style="width: 360px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_4440_480x480.jpg?v=1663618060" alt="" /></td>
<td style="width: 360px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_4375_480x480.jpg?v=1663618051" alt="" /></td>
<td style="width: 395px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_3800_480x480.jpg?v=1663618026" alt="" /></td>
</tr>
<tr style="height: 491px;">
<td style="width: 360px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_4474_480x480.jpg?v=1663618082" alt="" /></td>
<td style="width: 360px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_4029_480x480.jpg?v=1663617996" alt="" /></td>
<td style="width: 395px; height: 491px;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_4288_480x480.jpg?v=1663617985" alt="" /></td>
</tr>
</tbody>
</table>
<p style="text-align: left;"><img src="https://cdn.shopify.com/s/files/1/0626/4773/0347/files/IMG_4469_480x480.jpg?v=1663618075" alt="" /> </p>

You can see my <table> above and below.

See how the whole thing is offset to the right?

Compared to the standard catalog page, which is centered nicely:

judithtirwin · ‎09-20-2022

Added :

.rte__table-wrapper table { display: table; margin: 0 auto; }

to the bottom of theme.liquid file like this:

</body>
</html>

.rte__table-wrapper table {
display: table;
margin: 0 auto;
}

That did not work lol, probably should at least be inside the <html></html> tags, where thought?

The liquid file is quite large and confusing

Custom Page Table not Centered, Tried mod-ing liquid files and page code

Custom Page Table not Centered, Tried mod-ing liquid files and page code

Community Blog Articles