DMS 2 Text alignment - Masthead

[Keith Vaugh+ 16]

Hi all

 

I want to align the text in a masthead to the left. I have added the following in the custom css:

.left-align {
text-align: left;
}

and in the custom styling classes for the masthead in question defined:

left-align

it has had no affect. 

 

Is there something that I am missing?

Thanks

Keith

[Danny+ 1,327]

Hi Keith,

Can you provide a link to the site in question please.

[Keith Vaugh+ 16]

Hi Danny

 

Belated happy new year.

 

The site is not online yet only in a local development environment. It seems such an easy think to do (align the masthead text to the left instead of centre) but doesn't seem to want to do it. I could simply target the masthead itself, but may want other mastheads centred elsewhere...

 

Keith 

[Danny+ 1,327]

OK, the reason as to why this isn't working is the because the Masthead title and Masthead P tag already have CSS styling that centers the header and text. Therefore, the styling classes field option will not work, as the class is applied to the section element and not the masthead title and p tag.

 

Therefore, you're going to need to override the following:

 

.masthead h1, .masthead p {

text-align: center;

}

[Keith Vaugh+ 16]

Thanks Danny. Was afraid that might be the case. I am sure I can clone the section and target it the ID of the relevant masthead.

[Danny+ 1,327]

You can add a class to that particular masthead and then apply the CSS that way for example, add the following class (or anything you like) to the mastheads styling classes field:

 

masthead-left

 

Then add the following CSS:

 

.masthead-left .masthead h1, .masthead p {

text-align: center;

}

 

This way the Masthead with that class will have its text aligned left and it will not effect the other Mastheads that don't have this class.

[Keith Vaugh+ 16]

Thanks Danny. Will give that a try