Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 14, 2017 at 1:21 am #864192
    Sladestyle

    Hi,

    I cannot figure out for the life of me how to contain the content width when inside a cell of a Grid Row element. I did the layout on my laptop but when I went to view it on my 27″ monitor the content (text) begins to spread the full width and does not stay within the sites container. I tried to add a 1/1 column to the ½ Grid cell but that didn’t work.

    Here are 2 screenshots to show what my issue is and maybe you have a better solution or can point me in a direction to fix.

    What it should look like on all browser widths (minus mobile)

    How it looks on a large screen

    I hope this makes sense.

    Thanks!
    Slade

    October 14, 2017 at 11:44 pm #864365
    Mike

    Hey Slade,
    You are using the stretched layout so the body will stretch to full width, yet the header will stay within the container dimensions, to solve change the Enfold Theme Options > General Layout > Dimensions > Maximum Container width > 2500px
    This way the logo and menu will also stretch to full width.

    Best regards,
    Mike

    October 15, 2017 at 12:51 am #864374
    Sladestyle

    Hi Mike, thanks for the reply.

    I don’t think I explained my issue very well. Let me try again –

    The logo and menu positions are fine. If you look at the ‘desktop’ screenshot again you will see how the Content that is inside each Grid cell (purple and orange) float Outside the Website’s container. I need the content to stay put but the background color of the Grid cells to expand full width…which the background does.

    For example – in the purple background where it says “We’re the UK’s first….” along with the other content in the same cell should NOT fall outside where the logo is. It should be directly underneath but instead the wider the browser screen the further to the left it floats.

    Is there a way to “Contain” the content inside of a Grid cell? I am using the Grid Row element because I need a 50/50 split with different background colors but also expands the width of the browser window. Maybe there is a better solution?

    Does this make better sense? I can create a new screenshot with arrows/directions if that would help.

    Thanks!
    Slade

    October 15, 2017 at 5:11 pm #864509
    Mike

    Hi,
    Unfortunately, you can’t constrain the grid row element on the main container. It will always be full width unless you use the boxed layout. What you can do is to add a custom css class on the grid row element to specify the width of the grid on different screen sizes using media queries.
    As an example I added classes .lcell & .rcell to your first two cells
    and used this css:

    @media only screen and (min-width: 1700px) { 
.lcell .flex_cell_inner {max-width: 655px !important; margin-left:55%;  }
.rcell .flex_cell_inner {max-width: 655px !important; margin-right:55%;  }
}

    as 1700px was when the grid row began to brake out of your container & 655px is half of your container width. at 25k it looks like this:
    2017-10-15_105403
    I issue I see is the background cell images which are not contained.
    Another option is to give the container a max width and a background-color:

    #main {max-width: 1310px!important; margin: auto!important; }
#wrap_all {background-color:#8F78A8!important; }

    2017-10-15_110717

    Best regards,
    Mike

    October 16, 2017 at 10:50 am #864747
    Sladestyle

    Hi Mike,

    Sorry for the late reply. Your solution works great! Thank you so much for taking the time to do this.

    Slade

    October 17, 2017 at 1:49 am #865047
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Grid Row content width issue’ is closed to new replies.