Bootstrap: Solutions to breakout half vw image from container (Two column layout)
Hi, I'm struggling a bit to find the best solution to create a two column section with a half width image that's breaking out of the container.
Often I use the solution to set the image parent to a 100vw solution with a translateX(-50%) and a right: 50%;
I think there will be better solutions because the image is not always 100% visible. I need to play a bit with the width of the viewports to get it right.
Do you know a better way? 😉
https://codepen.io/impactftw/pen/QWzgQKK
2 Replies
Some front-end expert that can tell me te fix? 😄
Now i'm using this mixin calculation: width: calc( 100% + ( ( ( 100vw - #{map-get($container-max-widths, #{$container_size})} ) + #{$grid-gutter-width} ) / 2 ) );
To: width: calc( 100% + ( ( ( 100vw - 1320px ) + 1.5rem ) / 2 ));
Like this and then change it with media queries:
https://codepen.io/impactftw/pen/oNJejaL