Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 22, 2017 at 1:47 pm #880248
    arapps

    Hi, I have a Grid Row element with two columns. One has a solid colour background and the other has an image background. As it’s a grid row these stretch full width. I have text blocks inside these two columns. I’d like these text blocks to stay inside the ‘container’ class (max-width:1310px), as seen with a Color Section. But, because it’s a Grid Row, they also stretch full width. On a big monitor this just doesn’t look right as the text in both columns are far away from each other against the left and right side of the monitor. Is there a ‘hack’ to have the text align to the container? Or is there an alternate way to have the backgrounds full width, but the text to align with the rest of the page content?
    Thanks

    November 22, 2017 at 2:21 pm #880266
    arapps

    OK. I’ve found a hack. I’ve removed the text from the grid row. Then underneath the element I’ve added a new Color Section and added two 1/2 columns to it. Then I added the text into these columns. On the frontend I added some CSS to make the new Color Section position:absolute and position it over the top of the grid row with a transparent background. I added a top:150px to compensate for the header bar. All seems to work, but it may get tricky further down the page when I need to do it again.

    Anything better I can do?

    Thanks

    November 25, 2017 at 5:57 am #881482
    Rikard

    Hi,

    Thanks for the feedback. I think your solution should work, if you need to do it again then you could try to copy the working section? You have an option for that when you hover the element in the builder.

    Best regards,
    Rikard

    November 25, 2017 at 2:09 pm #881595
    arapps

    Yes I did the same for the other sections but with it being a new colour section, the parent is “main” which wraps the whole page. Because this new color section is set to “position: absolute”, it will position itself to the top of “main”, as would all the other new color sections. So what I’ve done is, using jQuery, wrap each original color section and their new absolute color section layer in parent div so they position themselves correctly over the top of the correct part of the page.

    It’s hard to explain so hopefully I’ve made that clear!

    November 25, 2017 at 8:59 pm #881755
    Mike

    Hi,
    Thank you for sharing your solution, shall we close this then?

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.