How to seperate an H4 style text from the rest of the H4's?

[Juan Rios1]

Basicly, I have some text I would like to make bigger in my homepage, but when I change it's font, some other text also change size, all the H4's in the class "title_block" change. Is there a way to change this specific H4 to a different class?

I'm using prestashop 1.7

[musicmaster]

Sure, just mention a surrounding element in your css like

div.appagebuilder h4 { font-size: 1000px; }

 

[Juan Rios1]

On 3/27/2021 at 4:51 AM, musicmaster said:

Sure, just mention a surrounding element in your css like

div.appagebuilder h4 { font-size: 1000px; }

 

Thank you, can you help me how to do this with a live example? I mean I see you put "div.appagebuilder" but I don't know where you got that from

My link is test.riograndeboots.com.mx

Thanks in advance!

[musicmaster]

1 hour ago, Juan Rios1 said:

Thank you, can you help me how to do this with a live example? I mean I see you put "div.appagebuilder" but I don't know where you got that from

My link is test.riograndeboots.com.mx

Thanks in advance!

 

Sorry, but this is basic CSS. In addition I already explained it.

But I will try once more:

The enclosing div has description:

<div  class="block products_block exclusive appagebuilder text-align:center; apProductCarousel"> 

"block products_block exclusive appagebuilder text-align:center; apProductCarousel" are all class names and you can use any of them for this purpose. I chose "appagebuilder" as that seemed the most specific. But I could have chosen any of them. The only risk is that there will be more than one enclosing div's with the same class name.

I could also have used classes of div's higher in the hierarchy like "ApRow"

BTW: the "text-align:center" shouldn't be among the classes. That is a major error.

[Juan Rios1]

I have not managed to change it, I've tried with various classes such as the picture I attached.

Do you see anything wrong?

[musicmaster]

7 minutes ago, Juan Rios1 said:

I have not managed to change it, I've tried with various classes such as the picture I attached.

Do you see anything wrong?

Yes, this is wrong.

You must think hierarchical. At the left is the top level and towards the right you get lower levels.

So ".title_block .ApProductCarousel h4" translates as: find a "h4" that is enclosed by an element with class "ApProductCarousel". This "ApProductCarousel" element should be enclosed by an element with class "title_block".

[Juan Rios1]

2 hours ago, musicmaster said:

Yes, this is wrong.

You must think hierarchical. At the left is the top level and towards the right you get lower levels.

So ".title_block .ApProductCarousel h4" translates as: find a "h4" that is enclosed by an element with class "ApProductCarousel". This "ApProductCarousel" element should be enclosed by an element with class "title_block".

Ok, I have tried following it hierarchical and still have no sucess. I actually tried a few methods and nothing

I only know basic css properties, and haven't seen structure that much, sorry if I'm having trouble understanding

[musicmaster]

Trying three things at once is waste of time. Only the last one will count.

Refresh the browser cache (ctrl-F5 on pc) after every css change.

".title_block h4" translates as: find a h4 enclosed by an element with class title_block. If you want a h4 with class title_block you should use "h4.title-block".

[Juan Rios1]

It simply is not working, I tried over written to see if my changes were actually making effect and they are, it's probably the structure of the theme?

Do you know how I can find the code to change the h4 class instead?

[musicmaster]

When I look at the code I see that there is already some definition for it in the css. Only the last definition counts and probably you insert your definition in a later stage as the template.

[Juan Rios1]

11 hours ago, musicmaster said:

Trying three things at once is waste of time. Only the last one will count.

Refresh the browser cache (ctrl-F5 on pc) after every css change.

".title_block h4" translates as: find a h4 enclosed by an element with class title_block. If you want a h4 with class title_block you should use "h4.title-block".

Well after endless tried I somehow got it to work using your class observation, thank you so much for all this help!