How to target H1 and H2 titles to change the text alignment on a given viewport

[philippe_bonneau]

Hi support team. I have a site where H1 and H2 title alignment have to switch from right to left on a given viewport. I have tweaked this page https://dev.ste-anne-de-la-pocatiere.com/municipalite/conseil-municipal/ that behave correctly with this custom CSS:

@media (max-width: 767px){
    .e131-8.x-text .x-text-content-text-primary {
		text-align: left;
	}
    .e131-9.x-text .x-text-content-text-primary {
		text-align: left;
	}
	.e133-8.x-text .x-text-content-text-primary {
		text-align: left;
	}
}

The problem is that the .e131-8 part of the tag is different on each title of each page .

Here is another page https://dev.ste-anne-de-la-pocatiere.com/citoyens/covid-19/

I did not find how to target these titles globally. I need help.

[nabeel]

Hi @philippe11,

Thank you for reaching out to us. The class e131-8 is generated dynamically and can change if the elements are moved within the same page so either you can use Element CSS to target specific element or you can simply add a class to all of your elements e.g align-left and then target them globally:

.align-left.x-text .x-text-content-text-primary {
    /* Your CSS here */
}

Hope this helps!

[philippe_bonneau]

@nabeel

.align-left.x-text .x-text-content-text-primary {
    /* Your CSS here */
}

Perfect! Solved. Thank you @nabeel

[matt]

You’re very welcome, @philippe11!