Jump to content

Change the font size of product names in the mobile

Go to solution Solved by Ziggy,

Recommended Posts

Hi guys! I use this code to make two columns of products in shop page on mobile version, but the font and price are very large.

How do I reduce the font of the name and price in the mobile version?

@media screen and (max-width:767px) { .products .list-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    display:grid;
    grid-column-gap:12px;
    grid-row-gap:12px;
}}

 

Edited by Venera
Link to comment

Can you share your website URL and store page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Try this Custom CSS:

@media screen and (max-width: 767px) and (orientation: portrait) {
  .collection-type-products .grid-title {
    font-size: 4vw;
  }
  .collection-type-products .grid-prices {
    font-size:3vw;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
42 minutes ago, Ziggy said:

Try this Custom CSS:

@media screen and (max-width: 767px) and (orientation: portrait) {
  .collection-type-products .grid-title {
    font-size: 4vw;
  }
  .collection-type-products .grid-prices {
    font-size:3vw;
  }
}

Perfect! Thank you so much!

and please how to reduce the text "sold out " or "sale" and make it not bold?

Link to comment

Here you go:

.collection-type-products .grid-meta-status {
  font-weight:100 !important;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
19 minutes ago, Venera said:

Perfect! Thank you so much!

Can you mark my post as the solution to your question? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try this instead:

.grid-meta-status {
  font-weight:100 !important;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
34 minutes ago, Ziggy said:

Try this instead:

.grid-meta-status {
  font-weight:100 !important;
}

it looks like nothing has changed anyway, unfortunately.. what could be the problem? on the product page, the inscription "sold" is displayed well, but not on the store page..(

Link to comment
On 4/19/2023 at 7:23 PM, Venera said:

it looks like nothing has changed anyway, unfortunately.. what could be the problem? on the product page, the inscription "sold" is displayed well, but not on the store page..(

The code should be 

div.grid-meta-status div {
    font-weight: 100 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
9 hours ago, Venera said:

Perfect! Thank you!

To change the font size of product names on a mobile device, you will need to modify the CSS code of your website. Here is a general guide to help you get started:

Identify the CSS selector for the product name. This will depend on the structure of your website, but it could be something like ".product-name" or ".product-title".

Add a media query to target mobile devices. You can use the following code as a starting point:

@media only screen and (max-width: 768px) {
/* CSS rules go here */
}

This media query targets devices with a maximum width of 768 pixels, which includes most smartphones.

Add a font-size rule within the media query. For example, if you want to make the font size 18 pixels, you can use the following code:
@media only screen and (max-width: 768px) {
.product-name {
font-size: 18px;
}
}

Save your changes and test them on a mobile device. You may need to adjust the font size and media query to achieve the desired result.
Please note that this is just a general guide, and the exact CSS code will depend on the structure of your website and the specific product name selector you are targeting.

Edited by Paulhugo
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.