Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #880248

    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

    #880266

    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

    #881482

    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

    #881595

    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!

    #881755

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

    Best regards,
    Mike

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

You must be logged in to reply to this topic.