[Support request] Vertically centering paragraph in a section?

Home Forums Support [Support request] Vertically centering paragraph in a section?

Home Forums Support Vertically centering paragraph in a section?

  • This topic has 7 replies, 4 voices, and was last updated 4 years ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #830141
    Tracy

    Hi! I was wondering — what CSS would I use to vertically center these headers and paragraphs in the section? See screenshot: http://cloud.smpl.ro/0ac75c409676

    Can’t figure this one out! Thanks!

    GP Premium 1.7.8
    #830485
    David
    Staff
    Customer Support

    Hi there,

    gridable uses flex, so we can take advantage of that with this CSS:

    .gridable--col {
        align-self: center;
    }

    All columns will vertically aligned to the centre.

    If you wanted to be selective over which sections you apply it to, then you can use a custom class e.g col-vert-centre and add that as a Custom Class in the GP Sections then this CSS:

    .col-vert-centre .gridable--col {
        align-self: center;
    }
    #841573
    Helen

    Hi,

    I want to achieve the same thing as above. I have added the css as suggested, but it’s not having the desired affect on my section. I am also using lightweight grids. Will this negate the gridable functionality? Should I be using the gridable plugin instead for this to work?

    Here’s my html:

    [lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″]

    <h6>Resolving disputes</h6>
    <h2>Finding a solicitor who can help</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque placerat enim nec porttitor. Donec mollis diam rhoncus tincidunt ultrices. In interdum dapibus risus, quis luctus urna rhoncus ac. Integer ornare eu dolor sit amet accumsan.

    Find a solicitor
    [/lgc_column]

    [lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”true”]

    [/lgc_column]

    Thanks for your help,
    Helen

    #841733
    Tom
    Lead Developer
    Lead Developer

    LGC doesn’t use flexbox right now. Can you link me to the page?

    #844079
    Helen

    Hi Tom,

    This is the page:

    https://familycourts.idas.org.uk

    Thanks for your help.

    Helen

    #844331
    David
    Staff
    Customer Support

    Hi there,

    you can try this:

    .inside-grid-column {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        height: 100%;
    }
    #852712
    Helen

    Hi,

    Thank you very much, this worked.

    Best wishes,
    Helen

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