Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1310790

    Hello Kriesi team,
    I am having an issue with background alignment within a gridrow element and was hoping you could help.

    I’m working on an ‘about’ page for a musical artist friend. On desktop, he would like the content to use:
    the left 3/4 of the screen to show his biography (text)
    the right 1/4 of the screen to have his image, stretched to fit 100vh

    I tried to do this with a color section and content elements – however, as the screen was resized to accommodate different desktop sizes, the image would resize.

    I was able to get a mostly successful implementation using a gridrow element… but the gridrow starts at the very top of the page and I have to use a transparent background in order for the image to show completely. I tried moving the entire gridrow down – but have not had any luck. I tried using css. I tried using whitespace above the gridrow. I have tried adding a gridrow with just whitespace above the gridrow I want moved down. The text will move down – but the background image will not.

    Any suggestions would be appreciated.

    Thank you!


    Hey pabloj13,

    Thank you for the inquiry.

    We could adjust the top margin of the grid row to move it downwards.

    #aboutgridrow {
        margin-top: 50px;

    We may also have to adjust the background of the main wrapper.

    .html_stretched #wrap_all {
        background-color: #000000;

    Best regards,


    Hi Ismael,
    Thank you so much for your help. Unfortunately, I tried that before reaching out and didn’t have any luck. I tried again because it was your recommendation and have confirmed it didn’t fix the issue.

    I updated it to show a 100px margin t show the issue more easily. I would like the graphic to start at the top. You can see it here:



    Thank you for the update.

    We see the site or the grid image differently. Please check the screenshot below.


    Is that how you want the page to look like?

    Best regards,


    Hi Ismael – when I sign-out or view the page in incognito, my page matches the image you sent. However, I am trying to control the entire grid-row – and the changes provided just affect the text portion of the gridrow element. (For example, if you use margin-top:100px instead of 50px, you will see just the text moves down. I am trying to move the entire row – including the background down on the page.

    I have tried inserting the following above the gridrow to attempt to move it down and have not had any success:

    • whitespace element
    • container element with whitespace
    • gridrow element with a single cell with whitespace

    Nothing seems to shift the entire gridrow element (including the background) down.

    Any thoughts?

    Thank you!

    ORIGINAL: Hi Ismael,

    That’s perfect! Did you update your code or do you see something different in my code? I tried clearing cache and hard-reload and still see the same in Chrome and Firefox.

    Thank you!

    • This reply was modified 2 years, 7 months ago by pabloj13.


    Thank you for following up.

    Have you tried removing the browser history or check the site on another machine? It looks the same on our end — same as the screenshot that we posted above. You might be looking on a cached version of the page.

    Best regards,

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