[Resolved] aligning text in Gutenberg column in mobile view

Home Forums Support aligning text in Gutenberg column in mobile view

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1019935
    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

    #1020071
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1020303
    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

    #1020405
    David
    Staff
    Customer Support

    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 ;

    #1021776
    Pauline

    Hi David

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

    Pauline

    #1021782
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.