Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1075607

    Hey guys, I’ve tried to use some of the solutions on the forum to contain the content within my grid rows to sit within the constraints of the content wrapper of the entire site.

    I would like all the content to sit justified to the left on top of the background image the edge of where our logo sits and doesn’t expand out further.

    If I add max-width CSS it only seems to work on the image itself but actually I only want it on the content within.

    Seems like an alignment issue? How do I align the edge of the containers within the grid row to sit on the edge of the site’s container width?

    I’m really struggling here and cant figure this out, I’ve probably done all manner of random quick CSS now and asiggning everything and anything with the custom class of “top-grid”

    ….please help…

    #1075621

    Its Alright, I’ve gone and figured it out.

    Cheers guys!!!

    #1075622

    Nope, it’s not working on the two column split…..sigh…..

    #1077193

    Hi,

    Thank you for using Enfold.

    You can apply the “Maximum Container width” value to be the maximum width of the grid container and then set its margin to “0 auto”, so it perfectly aligns with the default container. Have you tried that?

    For example, assuming that there is only 1 grid element in the page, you can use this code:

    #av-layout-grid-1 {
        width: 1410px;
        margin: 0 auto;
        background: red;
    }

    You can replace the generic selector with the element’s Section ID or enable the custom css class field.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    #1077422

    Hi Ismael,

    Well, thanks for creating Enfold!

    That doesnt seem to work unfortunately, this is the CSS i’m using:

    It seems to work fine on single full page width but as soon as it goes into a two column view formatting gets lost

    /* Grid CSS */

    @media only screen and (max-width:767px) {
    #av-layout-grid-2 {
    display: flex;
    flex-direction: column-reverse;
    }
    }

    @media only screen and (max-width:767px) {
    #av-layout-grid-4 {
    display: flex;
    flex-direction: column-reverse;
    }
    }

    @media only screen and (min-width:1310px) {
    #top .flex_cell_inner {
    max-width: 1310px !important;
    margin: 0 auto !important;
    padding-left: 50px !important;
    }
    }

    @media only screen and (max-width:1310px) { #top .flex_cell_inner {
    max-width: 1310px !important;
    margin: 0 auto !important;
    padding-left: 0px !important;
    }
    }
    #top .lcell .flex_cell_inner {max-width: 655px !important;
    position: relative;
    float: right; }
    #top .rcell .flex_cell_inner {max-width: 655px !important;
    position: relative;
    float: left; }

    Thanks,
    Sean

    #1079787

    Hi Sean,

    Thanks for the update.

    Could you give us a screenshot of the expected layout? You can upload it to imgur or dropbox.

    Best regards,
    Ismael

    #1079857

    Here you go Ismael,

    Padding problem

    Basically its the alignment of the text with the outer edge of the container, it seems to be adding some padding or extra margin, meaning it doesn’t sit perfectly with the outside of the page container (something to do with the 50px I had to add to the single cell grid row to make it sit perfectly maybe?)

    I’ve tried fiddling around with padding but I can’t seem to find a way to right align the text to the container edge, I’m using the “float” css to keep the content sitting close to the centre at the moment.

    perhaps I am referencing it wrong in the css, i have left cell and right cell labelled “lcell” and “rcell” in custom css.

    Thanks again,
    Sean

    #1080226

    Hi,

    Thanks for the update.

    Have you tried adjusting the “Cell Padding” of the cell inside the grid row? It is currently set to this:

        padding: 100px 100px 50px 100px;
    

    The left padding is set to 100px, so the text inside the cell doesn’t align with the logo.

    Best regards,
    Ismael

    #1080801

    Oh. My. God. Such an oversight. I’ve been fiddling about with CSS padding and margin and didn’t think about avia layout assigning padding.

    Thank you so much Ismael, I got stuck on that for so long.

    Using enfold = Winning at life.

    Cheers!

    #1081070

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Contain content within Grid row to sit within site container’ is closed to new replies.