Thanks in advance!
I am looking to customize the ‘Featured collection’ heading(s) text to my liking that works with mobile and pc.
Example:
password: dc
Topic summary
A user seeks to customize the font weight and size of ‘Featured Collection’ headings to work across both mobile and desktop.
Initial Solutions Provided:
- PageFly-Amelia suggested adding CSS code to the
base.cssfile withfont-size: 30pxandfont-weight: 30px - TerenceKEANE offered alternative code using
h2.titleselector withfont-size: 35px !importantandfont-weight: 700 !important
Current Issue:
The user reports that while TerenceKEANE’s code works, none of the solutions achieve the exact desired result. They want to change text boldness similar to how color codes (like color: #000) are applied for different headings.
Key Technical Note:
TerenceKEANE clarified that font-weight: 30px is invalid CSS (font-weight uses numeric values like 700, not pixel units). They explained CSS specificity rules, the !important property, and various color code formats (hex, RGB, HSL, HWB). The discussion remains open with an offer for continued assistance through direct messaging or thread tagging.
Hello @MMast
This is Amelia at PageFly - Shopify Advanced Page Builder app.
You can try the following steps I have provided to help you solve the problem you are facing:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file base.css
Step 3: Add code
/* You can change the value of 30px to the value you want */
.title {
font-weight: 30px;
font-size: 30px;
}
Copy
Hoping my solution helps you solve your problem.
Best regards,
Amelia | PageFly
The font weight doesn’t work with the code you provided unfortunately
Hi,
What exactly do you want to do? The following code can change the font size and thickness. You can change the values as you like. If you encounter any issues again, feel free to write, I’ll help.
- Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar.
h2.title {
font-size: 35px !important;
font-weight: 700!important;
}
Terence
Your code works as well but I’ve noticed that every code I’ve tried isn’t exactly what I’m looking for. I’m looking to change the text boldness and codes I’ve come across before for different headings have a ‘color: #000;’ code added to it.
It seems like you’re new to Shopify. While Shopify offers basic customization options, you can also purchase premium themes for more advanced features. These premium themes will likely be superior to your current free theme, but you’ll still need to use manual coding to achieve your desired look and functionality.
The most crucial aspect is having access to prompt assistance when needed. The code provided by the other person, ‘font-weight: 30px;’, is invalid. Each property has its unique application, and color usage can be quite complex.
Here are some examples of different color usage methods:
- The simplest form is using a hex code like ‘#fff’.
- To extract colors from websites, I recommend using the ‘Eye Dropper’ extension for the Google Chrome browser. However, it may not always work perfectly with your custom code.
- Chrome analyzes CSS code from top to bottom, prioritizing the last code block assigned to a class. The ‘!important’ property also overrides default priorities.
In essence, there are numerous rules to consider when working with CSS.
Based on your website, I believe you’re just starting out. Feel free to tag me in your posts or send me a private message if you require assistance. I’ll help whenever I have time away from my software development projects.
If you encounter any issues again, feel free to write, I’ll help.
#ff0099, rgb(255 0 153 / 80%), hsl(150 30% 60% / 80%), hwb(from green h w b / 0.5),light-dark(rgb(255 255 255), rgb(0 0 0))