Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 6, 2019 at 8:29 pm #1075607
    realisedesign

    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…

    March 6, 2019 at 8:57 pm #1075621
    realisedesign

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

    Cheers guys!!!

    March 6, 2019 at 8:58 pm #1075622
    realisedesign

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

    March 11, 2019 at 4:13 am #1077193
    Ismael

    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

    March 11, 2019 at 5:06 pm #1077422
    realisedesign

    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

    March 18, 2019 at 10:05 am #1079787
    Ismael

    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

    March 18, 2019 at 12:52 pm #1079857
    realisedesign

    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

    March 19, 2019 at 6:35 am #1080226
    Ismael

    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

    March 20, 2019 at 1:18 pm #1080801
    realisedesign

    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!

    • This reply was modified 5 years, 9 months ago by realisedesign.
    March 20, 2019 at 10:40 pm #1081070
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

  • Author
    Posts
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.