Font Size for Order & Order History Tables in Customer Account

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 Partner
3477 464 551

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
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