Change text justificaiton on mobile

Support
#1

In the middle of this page: https://www.acworkplaceinvestigations.com/ you’ll see where I have two columns with a headline, a divider line, and dummy text. I would like the headlines on the left to be right justified on larger views, but left-justfied on mobile views. How can I do this? I tried this: @media (max-width:480px){
h4{
text-align: left
}

but struck out.

Thanks.

#2

Hello @Lorie,

Thanks for writing in!

Better option would be to assign CSS class to the heading element and then make the necessary changes using media queries. Here is a sample code that you can use to get started:

@media only screen and (max-width: 500px) {
    .sample-heading  {
        text-align: left;
    }
}

@media only screen and (min-width: 900px) {
    .sample-heading  {
        text-align: right;
    }
}

Suggest you to replace sample-heading with your own class name.

Thanks.

1 Like
#3

Great. I will give it a try! Thank you.

#4

Shoot. I still can’t figure it out. I’m a dunce about classes. If use your code with changes to the class names, which class would I assign if I have a right justified heading that I want to switch to left justification on smaller screens? Would it be left-heading ? Nothing seems to work.

@media only screen and (max-width: 500px) {
.left-heading {
text-align: left;
}
}

@media only screen and (min-width: 900px) {
.right-heading {
text-align: right;
}
}

#5

Hi Lorie,

I tried checking your site but there is an under construction page active.

Please provide us with the admin logins in a Secure Note so that we can check it.

Thank you.

#6

Ok. I did that above.

#7

Hi There,

Please change your custom CSS to this:

@media only screen and (max-width: 500px) {
    .left-heading.h-custom-headline {
        text-align: left !important;
    }
}

@media only screen and (min-width: 900px) {
    .right-heading.h-custom-headline {
        text-align: right !important;
    }
}