Changing font size for product heading and price on individual product page MOBILE ONLY

I only want to change the font sizing for the mobile version.

It is fine size for desktop, but is too large for the mobile view (gets cut off - and the pricing needs to be half the size).

Thanks

2 hours ago, isobeleastwood said:

I only want to change the font sizing for the mobile version.

It is fine size for desktop, but is too large for the mobile view (gets cut off - and the pricing needs to be half the size).

Thanks

Hi, please share the website link and password if applicable 

On 3/5/2022 at 7:05 PM, Jia said:

Hi, please share the website link and password if applicable 

www.stuffbystink.com

password: swagger

8 hours ago, isobeleastwood said:

www.stuffbystink.com

password: swagger

Add this code to custom css. Let me know how it goes 🙂

@media screen and (max-width: 767px) {
  .ProductItem .ProductItem-details h1.ProductItem-details-title {
    font-size:30px;
  }
  .ProductItem .ProductItem-details .product-price {
    Font-size:22px;
  }
}

Hey

It came up with this (and nothing changed):

9 hours ago, isobeleastwood said:

Hey

It came up with this (and nothing changed):

 

Ahh my bad, the second font-size is accidentally capitalised! Here's the edited code:

@media screen and (max-width: 767px) {
  .ProductItem .ProductItem-details h1.ProductItem-details-title {
    font-size:30px;
  }
  .ProductItem .ProductItem-details .product-price {
    font-size:22px;
  }
}

On 3/8/2022 at 6:57 PM, Jia said:

Ahh my bad, the second font-size is accidentally capitalised! Here's the edited code:

@media screen and (max-width: 767px) {
  .ProductItem .ProductItem-details h1.ProductItem-details-title {
    font-size:30px;
  }
  .ProductItem .ProductItem-details .product-price {
    font-size:22px;
  }
}

Perfect! Thanks so much.

I have yet another request I am so sorry haha. I genuinely don't know how to thank you for all your help. THANK you!!!

So, next up haha, I need to edit the main headers on my first three sections for the desktop view. They are perfect size on the mobile view if that is any reference for scaling them up. I also want them to be pushed to the edge of the desktop view, as it is in the mobile view! 😄

I'd also love to possibly change the font for the 'shop the collection' button on the first page. (image with the table cloth)

28 minutes ago, isobeleastwood said:

Perfect! Thanks so much.

I have yet another request I am so sorry haha. I genuinely don't know how to thank you for all your help. THANK you!!!

So, next up haha, I need to edit the main headers on my first three sections for the desktop view. They are perfect size on the mobile view if that is any reference for scaling them up. I also want them to be pushed to the edge of the desktop view, as it is in the mobile view! 😄

I'd also love to possibly change the font for the 'shop the collection' button on the first page. (image with the table cloth)

 

Hi, no worries! Here's the code for the button:

.sqs-button-element--tertiary {
  font-family: 'mainfont';
}

The first 3 header sections look fine on desktop for me.

On 3/10/2022 at 5:03 PM, Jia said:

Hi, no worries! Here's the code for the button:

.sqs-button-element--tertiary {
  font-family: 'mainfont';
}

The first 3 header sections look fine on desktop for me.

Hmmm. that is strange for the website view. I am kind of playing with the layout anyhow, so it is all good. Do you know how to avoid cropping the banners on mobile version? I might just edit the text over the images in photoshop / illustrator, and then upload (but will need it not to crop on mobile! :))

On 3/12/2022 at 12:08 PM, isobeleastwood said:

Hmmm. that is strange for the website view. I am kind of playing with the layout anyhow, so it is all good. Do you know how to avoid cropping the banners on mobile version? I might just edit the text over the images in photoshop / illustrator, and then upload (but will need it not to crop on mobile! :))

Hi, I'll need access to the website to help out with that. This is what I get when trying to view the website:

@Jia website working again! 🙂