changing the size and colour of my adings in collection page

Solved
ecotec
Excursionist
34 0 8

Hi Guys,

I made a custom text field below my collection page for my seo pages.  You can check it out here https://dezorgfirma.nl/collections/rollators

Now i want to make the headings (h2 and h3) bigger and give them a different colour. But i cant seem to find the css class to do it.

Could you guys help me?

 

0 Likes
dmwwebartisan
Shopify Partner
4380 982 1253

@ecotec 

Could you please provide a screenshot of which heading size and color you want to change?

It will be helpful.

Thanks!

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ecotec
Excursionist
34 0 8

All these headings:

Screenshot 2021-01-28 at 14.16.17.png

0 Likes
ecotec
Excursionist
34 0 8

dmwwebartisan
Shopify Partner
4380 982 1253

@ecotec 

You can add the following code at the bottom of your assets/theme.css file.

.card-secondary-body.rte h2 {
    font-size: 2em;
    color: red;
}

 

Above you can change color as per your need. I have given red as an example. You can change size as well.

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
ecotec
Excursionist
34 0 8

It does work, but only on desktop. Can we make it functional on mobile as well?

dmwwebartisan
Shopify Partner
4380 982 1253

@ecotec 

Add this for mobile.

@media screen and (max-width: 641px) {
.card-secondary-body.rte h2 { font-size: 2.15em; color: #f38b0f; font-weight: 550; }
}

 

You can reduce font size as per your need for mobile.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
ecotec
Excursionist
34 0 8
  @_media screen and (max-width: 641px) {
.card-secondary-body.rte h2
    { font-size: 2.15em;
      color: #f38b0f;
      font-weight: 550; }
}
  
.card-secondary-body.rte h2 {
    font-size: 2,15em;
    color: #f38b0f;
  font-weight: 550;
  
}
 
I saved it like this but its not working for mobile.. Or for ios at least.. 
0 Likes
dmwwebartisan
Shopify Partner
4380 982 1253

@ecotec 

Can you show me a screenshot?

Something is wrong there.

 

Thanks!

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
dmwwebartisan
Shopify Partner
4380 982 1253

@ecotec 

Try to use this code.

 

@Media screen and (max-width: 640px) {
.card-secondary-body.rte h2 { font-size: 2.15em; color: #f38b0f;  font-weight: 550; }
}
  
.card-secondary-body.rte h2 {
    font-size: 2.15em;
    color: #f38b0f;
  font-weight: 550;  
}

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App