Jump to content

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

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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

Please give this a 👍 if it helps

Link to comment
9 hours ago, isobeleastwood said:

Hey

It came up with this (and nothing changed):

 2134676913_ScreenShot2022-03-08at9_53_35am.png.85445487e9bb0335afaa81633d6467af.png

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

Please give this a 👍 if it helps

Link to comment
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! 😄961836591_ScreenShot2022-03-10at4_28_57pm.thumb.png.39d35b331b93fa476578c939b1e7eab3.png661074898_ScreenShot2022-03-10at4_28_51pm.thumb.png.ab932c10bde521e56564b1d10c0c74dd.png

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

 

Screen Shot 2022-03-10 at 4.27.39 pm.png

Edited by isobeleastwood
Link to comment
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! 😄961836591_ScreenShot2022-03-10at4_28_57pm.thumb.png.39d35b331b93fa476578c939b1e7eab3.png661074898_ScreenShot2022-03-10at4_28_51pm.thumb.png.ab932c10bde521e56564b1d10c0c74dd.png

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

 

Screen Shot 2022-03-10 at 4.27.39 pm.png

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.

1187792052_ScreenShot2022-03-10at13_58_28PM.thumb.png.983c828c3eec4134cb58aaec46527c76.png

Please give this a 👍 if it helps

Link to comment
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.

1187792052_ScreenShot2022-03-10at13_58_28PM.thumb.png.983c828c3eec4134cb58aaec46527c76.png

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! :))

Link to comment
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:

1170265189_ScreenShot2022-03-13at15_45_42PM.thumb.png.1c8d609077a0c3368424825aadf50929.png

Please give this a 👍 if it helps

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.