Archived topic
Container width and Image
5 replies · Started by Benny on February 25, 2021
Hey there, i wanted to make a header like in the figma design --> https://www.figma.com/proto/NKG36Q7UhfV565fssAvPIA/Akademis?node-id=335%3A1&viewport=470%2C561%2C0.07217779755592346&scaling=min-zoom. I created a block element as generate_after_header because there is also a sticky sidebar and used the media and text gutenberg block.
My problem is, that on the right side there shouldnt be a space but on the left side i wanted the content to be aligned with the container. Is this even possible?
PS: I have tried to insert the image as a background-image but then there is a problem with stacking the image on mobile devices.
Thanks!
Hi there,
can you share a link to a site so i can see what you have setup ?
https://akademis-internatsberatung.de/
It's nearly good, just the alignment of the text left with the container (and the other content) is missing.
Tricky one that - you could try something like this:
@media(min-width: 1296px) {
.custom-class .wp-block-media-text__content {
position: relative;
left: calc((100vw - 1296px)/2);
}
}May need some tweaking what its doing or attempting to do is to calculate the white space around the #page content
You will need a custom-class on the Media Block and update the CSS above with that class.
It works perfect. Thank you!
Well - i am impressed lol
Glad to be of help.
