Different text align on desktops and mobile

Support
#1

Hi, So, I have a client who likes the look of left align text on the desktop, but wants it centered on portrait devices, I have added the custom class “align-element” to the columns I want this to happen to, and the css: “@media screen and (max-width: 979px) {
.align-element {
text-align: center;
}
}”

but it doesn’t seam to work on all of them, ie the 1st heading, the testimonials etc.

Please help.

#2

Hi There @logoglo

Thanks for writing in! Your CSS rule will not be parsed, because your have inline CSS style="text-align: left;" specified in your elements which gets higher priority.

Try removing those inline styles and then your CSS rule should be apply to those elements as well.

Hope that helps.

#3

Hmm, ok, but I need both right? to align left, to add margins etc…how do I have both? I dont want to add “align-element-01, 02, 03, 04” etc…thats gonna be messy…

#4

Hey @logoglo,

If you don’t specify the text-align property, by default text-align: left; is applied so you can safely remove the inline CSS from your content and only add the following code in the Theme Options > CSS to center align the content in smaller resolutions:

@media screen and (max-width: 979px) {
    .align-element p {
        text-align: center !important;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

I understand, but what about text size, color, for example, I have color:#ff; on some content.

#6

Hi @logoglo,

You can simply assign another class to your column e.g style-text and then you can define font-size or color as per your need. For example you can use the following code for this one:

.style-text {
    font-size: 18px;
    color: #000;
}

Change the font-size and color as per your need. Hope this helps!

#7

I think I have worked this out, thanks.

#8

Glad you’ve sorted it out.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.