- This topic has 11 replies, 3 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hope that’s understandable. The image should be in a container (1440px) and aligned to the right. The rest of the content should be in a container with a width of 1280px. Already tried to build something with position relative and absolute but didn’t work.
Unfortunately, I am not allowed to publish this page here.
Customer Support
Hi there,
can you share a link to where i can see this ?
like I said, I’m not allowed to make the page public. The site is also protected with a front-end login. I can send it to an email address.
Below the reply box is the Private Information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Only GeneratePress Admins can see its contents, so you can share any links and logins there.
Here are the Details:
Customer Support
Hi René,
Should the Image be a Background Image for your Page Hero? If so, can you try adding it as a Background Image for the Container Block for the Page Hero? Reference: https://docs.generateblocks.com/article/container-overview/#backgrounds
Otherwise, if it’s an Image under the Page Hero, can you try adding it through a GB Image Block instead? And, set the width to
100%. Reference: https://docs.generateblocks.com/article/image-overview/The first option is not responsive, because the image should slide under the text on tablet and mobile. A background image would be difficult to display responsively.
The other option is also not a solution. The GB image block would still be within 1280px.
One possibility might be (as I have already tried) to work with position absolute and relative.
Would that be somehow possible?
<div 1280>Defined at Customizer->Layout | cant change this> <div 1440 RELATIVE> <div 1280 FLEX> <div>text</div> <div ABSOLUTE(@media query) ALIGN-RIGHT>image</div> </div 1280> </div 1440> </div>Try this CSS:
@media(min-width: 1280px) { .home-hero { position: relative; } .home-hero .gb-inside-container { position: static !important; } .home-hero-image { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } }And then give the Image Block an Advanced > additional CSS Class of:
home-hero-image
Adjust the @media query to suit.
You will need to give the left hand grid column a higer z-index value to put it in front.In this way, the image is displayed completely at the edge of the screen. But it must be inside a container with a width of 1440px.
Change the
right: 0;to:right: calc( ( 100vw - 1440px ) / 2 );I solved the Problem width relative und absolute position. I missed your note with the
right:0;, thank you.@media (min-width: 1025px) { .home-hero-image img{ max-height: 564px; width: auto; } .ueber-uns .home-hero-image img{ max-height: 500px; } .page-hero-image{ flex-wrap: initial !important; } .relative>.gb-inside-container{ position: relative; } .home-hero>div>div>div>div>div:first-child, .smooth-scroll{ z-index: 99; } .home-hero>div>div:first-child>div>div>div:nth-child(2){ right:0; position: absolute; margin-top: 48px; max-width: 65%; } }Glad to hear you found a solution
- You must be logged in to reply to this topic.
