[Resolved] styling gutenberg columns

Home Forums Support styling gutenberg columns

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1025421
    Pauline

    Hi

    I am really puzzled about something. I have styled a block using css that I have put in Appearance/Simple Css. This has been fine. I have then tried to style a similar block with a different style in the Simple CSS window that appears at the bottom of the page, but it does not work. Where am I going wrong?

    In Appearance/Simple CSS I have:

    .firstsection {
        margin-left: 100px;
    }
    
    .firstsectionheading {
        font-size: 45px;
        margin-left: 100px;
    }

    And on the page I am working on, in the Simple CSS window I have written (I am trying to style a similar block underneath the first block):

    .secondsection {
        margin-left: 100px;
    }

    If you look on my page, you will see that the first section with text is aligned with a right margin, but the second section is not.

    I’d be really grateful if you could explain where I’m going wrong.

    Pauline

    #1025463
    Leo
    Staff
    Customer Support

    Hi there,

    I don’t see the .secondsection block of CSS showing up in the live site at all.

    Can you make sure there is no syntax error?
    https://jigsaw.w3.org/css-validator/

    When there is a syntax error somewhere in the CSS, it stops all the code below the error from working.

    Let me know 🙂

    #1025605
    Pauline

    Hi Leo

    The CSS for .secondsection is the ONLY CSS in the Simple CSS window on the page.

    I tried putting the .secondsection CSS into Appearance/CSS (as opposed to the Simple CSS window on the actual page), and a paragraph margin DID appear, but it was not the same width as the .firstsection paragraph, even though the margin width is the same (both set to 100px).

    I suspect I’m doing something fundamentally wrong – perhaps this is not the best/correct way to add margins to content within a gutenberg column?

    #1025614
    Leo
    Staff
    Customer Support

    I would try adding the class to the columns themselves instead of adding it to each headings/pragraph.

    #1025664
    Pauline

    In your opinion would I be better off using Lightweight Grid Columns for this purpose?

    #1025686
    Leo
    Staff
    Customer Support

    Gutenberg columns should be the way to go.

    I would recommend adding the custom classes to the columns blocks themselves instead of the paragraph/heading tags.

    #1026506
    Pauline

    Can you tell me the syntax for styling individual columns? If I style say:

    .wp-block-column {
    padding-left: 100px;
    padding-right: 100px;
    }

    It will apply this to all columns.

    I gave a class called “firstsection” to a column (via Advanced, Additional CSS), and then tried to style it as follows:

    .wp-block-column firstsection {
    padding-left: 100px;
    padding-right: 100px;
    }

    but it had no effect.

    Thanks.

    #1026584
    Leo
    Staff
    Customer Support

    It would be:

    .wp-block-columns .wp-block-column.firstsection {
        margin-left: 50px;
    }

    You can see the levels from browser inspector tool:
    https://www.screencast.com/t/gUMqyR0Ue

    #1027447
    Pauline

    Thanks Leo. That’s moved me forward & I have learnt a lot from your reply.

    I have another question:

    When I view the site in mobile view, after the Page Hero, there are 2 images, one under the other. The second image is offset to the right – I want to align the images neatly.

    I know this is because in desktop view, I have aligned the first image to the right, and the second to the left (which in desktop view looks fine).

    I have identified the image in the inspector as: img-wp-image-37. I have also given this image a class of .circleright

    The HTML appears as:

    <div class="wp-block-image circleright"><figure class="alignleft"><img src="link to image" alt="" class="wp-image-37"/></figure></div>

    I would really be grateful if you could give me the correct CSS syntax to budge this image in mobile view, as I’ve tried various combinations of CSS (all under the correct @media (max-width: 768px) heading, but have had no success.

    Many thanks.

    #1027754
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic for the separate question?

    Thanks 🙂

    #1028115
    Pauline

    Will do 🙂

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