Content-container (1280px width) in image-container (1440px align right)

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:

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