Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 20, 2021 at 12:34 am #1310790
    pabloj13

    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:
    100vh
    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!

    July 20, 2021 at 10:26 am #1310857
    Ismael

    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,
    Ismael

    July 22, 2021 at 11:53 pm #1311655
    pabloj13

    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: http://www.tinfinitydesign.com/demo/jmo/wp-content/uploads/2021/07/kriesi.png

    July 23, 2021 at 10:36 am #1311780
    Ismael

    Hi,

    Thank you for the update.

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

    Screenshot: https://imgur.com/88MAX7e

    Is that how you want the page to look like?

    Best regards,
    Ismael

    July 28, 2021 at 12:19 am #1312870
    pabloj13

    UPDATE:
    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, 12 months ago by pabloj13.
    July 31, 2021 at 7:34 am #1313547
    Ismael

    Hi,

    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,
    Ismael

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