[Resolved] aligning text in Gutenberg column in mobile view

[Pauline]

Hi there

Can you please check some CSS for me? I have put a heading and text in a gutenberg column, but I’m having difficulty aligning in mobile view properly. In mobile view, I would like the heading to be centered, and the text aligned properly without such a wide left margin.

In Simple CSS I have written:

/* Mobile First Section */
@media (max-width: 768px) {

.firstsectionheading {
   text-align: center;
}

.firstsection {
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

Many thanks,
Pauline

[Tom]

Hi there,

Your CSS is missing a closing bracket.

Try this:

@media (max-width: 768px) {
    .firstsectionheading {
       text-align: center;
    }

    .firstsection {
        margin-left: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

Let me know 🙂

[Pauline]

Hi Tom

Thanks for looking into this. However, I HAVE included the closing bracket – my apologies – I chopped it off by accident when I cut and pasted it into my question.

Can you please advise me?

Thanks
Pauline

[David]

Hi there,

remove the CSS and add it to the very top of your CSS code.
If it works then it means there is an issue with the other CSS you have added, like an additional bracket or a missing ;

[Pauline]

Hi David

It was just that – a missing bracket in the other CSS. That was a good tip. Thanks again as always.

Pauline

[David]

Glad to be of help

[Author]

Posts