Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to change font size on Shopping Cart page?


Short-Horn

Question

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

Screenshot 2020-11-26 at 18.42.36.png

Screenshot 2020-11-26 at 19.49.32.png

Edited by Short-Horn
Link to post
  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS /* Shopping cart heading */ h2.CartHeader-cartTitle-9Dk3d.cart-title { font-size: 42px; } /* Labels size */ .CartTable-cartItemListLabels-D0rsA.cart-ite

Posted Images

19 answers to this question

Recommended Posts

  • 0
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;
}

 

Link to post
  • 0

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>

 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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;
}

 

Link to post
  • 0

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

 

Screenshot 2020-12-13 at 15.16.21.png

Link to post
  • 0

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>

 

Link to post
  • 0
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;
}
}

image.thumb.png.ce1ecee73f033e47606c6b625955213f.png

Link to post
  • 0

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>

Screenshot 2020-12-19 at 16.31.28.png

Link to post
  • 0
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>

Screenshot 2020-12-19 at 16.31.28.png

 

Edited by Short-Horn
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...