How to change font size on Shopping Cart page?

Site URL: https://short-horn.com/cart

I want to increase the font size of the "Shopping Cart" heading on the shopping cart page.

I also want to increase the weight and font size of the cart item list labels as well "Item" "Quantity" "Price" .

I've tried doing it on the normal header settings but it wont work - it's Heading 2 but doesn't change with the rest of the Heading 2's.

Can anyone help i'm stuck on the bit of code you can see in the picture

What is access password?

Short-Horn

If you could also tell me how to increase the font and image sizes of the products themselves within the shopping cart p[age that would be incredible

On 12/5/2020 at 5:34 PM, Short-Horn said:

If you could also tell me how to increase the font and image sizes of the products themselves within the shopping cart p[age that would be incredible

Add to Home > Design > Custom CSS

/* Shopping cart heading */
h2.CartHeader-cartTitle-9Dk3d.cart-title {
    font-size: 42px;
}
/* Labels size */
.CartTable-cartItemListLabels-D0rsA.cart-item-list-labels * {
    font-weight: bold;
    font-size: 30px;
}
/* product name */
.item-desc * {
    font-size: 30px !important;
}

That hasn't worked for me I'm afraid, thanks for trying 😞 any other suggestions?

Add to Home > Settings > Advanced > Code Injection > Header

<style>
  /* Shopping cart heading */
h2.CartHeader-cartTitle-9Dk3d.cart-title {
    font-size: 42px;
}
/* Labels size */
.CartTable-cartItemListLabels-D0rsA.cart-item-list-labels * {
    font-weight: bold;
    font-size: 30px;
}
/* product name */
.item-desc * {
    font-size: 30px !important;
}
</style>

you legend, worked a treat! Thank you so much, final question: any chance you could tell me how to get this blog grid to go on two columns on mobile please: https://short-horn.com/healthbenefits

And also sorry to be a pain but any help making the price and subtotal bits bigger on the checkout screen as well would be amazing 

On 12/10/2020 at 9:24 PM, Short-Horn said:

you legend, worked a treat! Thank you so much, final question: any chance you could tell me how to get this blog grid to go on two columns on mobile please: https://short-horn.com/healthbenefits

 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.blog-basic-grid.collection-content-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.blog-basic-grid.collection-content-wrapper img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}

On 12/10/2020 at 9:25 PM, Short-Horn said:

And also sorry to be a pain but any help making the price and subtotal bits bigger on the checkout screen as well would be amazing 

Add to Custom CSS

/* sub total price */
.CartTable-subtotal-2nJjm * {
    font-size: 30px;
}

Thanks for you response!

The code for the blog grid isn't working when i put it into CSS, any other ideas? 

Also, the writing on the price in the subtotal is still quite small but the actual word 'subtotal' is now bigger if I inject it into the header - any ideas as to how to make it bigger?

Thanks again for taking the time to reply

Add to Code Injection > Header

<style>
  @media screen and (max-width:767px) {
.blog-basic-grid.collection-content-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.blog-basic-grid.collection-content-wrapper img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}
</style>

That worked, thank you so much

On 12/15/2020 at 4:11 PM, Short-Horn said:

That worked, thank you so much

Some pages on tablet doesn't look good. Do you want to reduce text size or change to 2 items/row on tablet only?

If resize text, add to Home > Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
h1.blog-title a {
    font-size: 0.7em;
}
}

I've now done that thanks.

Next question (so sorry)

The code we injected to make the health benefits blog grid go on two columns on mobile has now affected our recipes page: https://short-horn.com/recipes PW: Short-Horn5

Any tips on how we can get the images to be seperated even slightly? Horizontal spacing now makes not difference see image.

Injected code:
<style>
  @media screen and (max-width:767px) {
.blog-basic-grid.collection-content-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.blog-basic-grid.collection-content-wrapper img {
    width: 100% !important;
    height: auto !important;
    top: 1 !important;
    left: 1 !important;
}
}
</style>

Do you still need help with this?

Yes please the last thing i said about spacing the blog pictures out i still need help with. see below

On 12/19/2020 at 4:34 PM, Short-Horn said:

 

Next question (so sorry)

The code we injected to make the health benefits blog grid go on two columns on mobile has now affected our recipes page: https://short-horn.com/recipes PW: Short-Horn5

Any tips on how we can get the images to be seperated even slightly? Horizontal spacing now makes not difference see image.

 

Injected code:
<style>
  @media screen and (max-width:767px) {
.blog-basic-grid.collection-content-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.blog-basic-grid.collection-content-wrapper img {
    width: 100% !important;
    height: auto !important;
    top: 1 !important;
    left: 1 !important;
}
}
</style>

Hi. Sorry for the delay. I was off some days.

What is your current problems? We will check again.