![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: background, enfold, Gridrow
-
AuthorPosts
-
July 20, 2021 at 12:34 am #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:
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 100vhI 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 #1310857Hey 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,
IsmaelJuly 22, 2021 at 11:53 pm #1311655Hi 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 #1311780Hi,
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,
IsmaelJuly 28, 2021 at 12:19 am #1312870UPDATE:
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 3 years, 1 month ago by
pabloj13.
July 31, 2021 at 7:34 am #1313547 -
AuthorPosts
- You must be logged in to reply to this topic.