Turbo theme "image with text" -sections font (need for CSS)

Solved
Kjankko
Pathfinder
158 3 18
Hi,
 
I have a Turbo theme in my store and would like to change the font. I have set up the fonts, but I want a few sections font to be bigger.
 

 

<div class="featured-link--half one-half column image-with-text__text-column is-flex is-align-center image-with-text__column medium-down--one-whole block--1637393573ffd0a2dc-0"> 

<div class="info text-align--left"> <a href="/pages/masters" class="collection_title">Masters</a> <div class="description"><p>This includes some description<br><br><strong>Some text</strong></p></div> <a href="/pages/masters" class="global-button global-button--text image-text__button">Call to action</a></div></div>

 


PROBLEM: I have "Image with text" -section AND I want it's class "collection_title" to be:
 
font-weight: 700;
font-size: 41px;
 
All the other "image with text" sections in my store should be much smaller.
 
font-weight: 400;
font-size: 28px;
 
Could you give me CSS for my problem?
 
The store is under password.
Accepted Solution (1)

Accepted Solutions
LitExtension
Shopify Partner
2001 333 409

This is an accepted solution.

Hi @Kjankko,

Please add code:

@media only screen and (max-width:480px) {
    .block--1637393573ffd0a2dc-0 .collection_title{
		font-size: 31px;
	}
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Replies 4 (4)
LitExtension
Shopify Partner
2001 333 409

Hi @Kjankko,

When you use class "collection_title" it will include all but if you enclose it by a separate class it will work only.

Like the code you sent, you just need to enclose the class "block--1637393573ffd0a2dc-0", it will be unique for "collection_title". https://i.imgur.com/ew5CYsM.png 

Code:

.block--1637393573ffd0a2dc-0 .collection_title{
    font-weight: 700;
    font-size: 41px;
}

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
Kjankko
Pathfinder
158 3 18
Kjankko
Pathfinder
158 3 18

@LitExtension It works, How about the code if I want the text be smaller in phone (max-width 480px)?

 

Lets say the text would be for example 32px in mobile OR 70% of the original (desktop screen's size)

LitExtension
Shopify Partner
2001 333 409

This is an accepted solution.

Hi @Kjankko,

Please add code:

@media only screen and (max-width:480px) {
    .block--1637393573ffd0a2dc-0 .collection_title{
		font-size: 31px;
	}
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post