Font Size for Order & Order History Tables in Customer Account

Ambria
New Member
6 0 0

Hi,

 

I am trying to change the font size of the headers in my Order History and Main Order tables on my Customer Account pages. They appear way too big on smaller screens.

 

I have tried editing the relevant sections in my code (using Craft Theme) (thead, tr, th, and general div and row lines) but nothing I do seems to work.

 

I would like to change the font size to match the rest of my site with 14px size.

 

Any suggestions?

 

Site Link:

https://www.ambriajewellery.co.uk

 

Problem Page Link (account needed):

https://www.ambriajewellery.co.uk/account

 

Images of the relevant pages:

Screenshot_20240224-140308.png

 

Screenshot_20240224-140415.png

This is the code I have tried changing:

 

<thead role="rowgroup">
<tr role="row">
<th id="ColumnOrder" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">Order</th>
<th id="ColumnDate" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">{{ 'customer.orders.date' | t }}</th>
<th id="ColumnPayment" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">{{ 'customer.orders.payment_status' | t }}</th>
<th id="ColumnFulfillment" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">{{ 'customer.orders.fulfillment_status' | t }}</th>
<th id="ColumnTotal" scope="col" role="columnheader" style="font-size: 14px; font-weight: bold;">{{ 'customer.orders.total' | t }}</th>
</tr>
</thead>

Thanks.

Replies 2 (2)

BSS-Commerce
Shopify Expert
3465 459 515

Hi @Ambria ,

The code you add will not change the interface, because the part where you adjust the font size is the part of the interface that is not displayed.

You can adjust the font size of the head section in the table as follows:
Step 1: Open Edit code and find the customer.css file
Step 2: Open the file, and add the following code at the end of the file:

 

.order-history tbody td::before,
.order-details tbody td::before {
font-size: 14px;
}

 

Hope it helps @Ambria 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Ambria
New Member
6 0 0

Thanks, but that didn't work for me. So I went through each line of code until I found it. 

For anyone else with the same problem, look for the line with  .customer td::before