Issue
I am creating a website and trying to get the best css setup (responsive/works on all browsers) for creating a section where an image is either right or left of a block of text. I heard that flex was the best way to go, so I tried mimicking other websites that use a flex setup. So far I have a chunk of code that works for when the image is to the right, and the text is to the left….but it doesn’t work for when image is to the left, and the text is to the right.
Here’s my code: https://codepen.io/7harrypotterrr/pen/MZEdVY
.containerabcolumn {margin: 0 auto !important;}
As you can see, when I reverse the orders of div a and b, the results are bad. On my actual site, there’s actually no overlap, but theres an issue with how the image overflows. When the window size is shrunk down for the first section of code, things works as intended…the image to the right goes beyond its div container and cuts off more and more as the window size is shrunk (that’s good)….however for the second section of code where the image is to the left and text right, the image ends up overlapping the text…instead of going beyond its container to the left (the way I want it to).
Any ideas how to fix?
Thanks in advance for any help I get, and as you can tell from the way I tried to describe my issue, I am a complete noob at coding.
Also, if anyone have thoughts as to whether this set of code is responsive/works on all browsers/generally a smart approach, that would be great too.
Solution
You ask for the right approach so I will give two answers. Answer 1 answers your request. Answer 2 is a more elegant and professional solution that – with the same css – is able to display two views, optimized depending on the target screen
Solution 1: respecting your intention also on mobile
in order to have both the problems solved
-
this fix the text over the image, as per the other answer:
.b img {
width: 100%;
} -
removing
flex: 0 0 auto;makes fixes the text cut on mobile:.a {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 50%;
margin: auto;
}
This is a simulation on a Pixel2 XL after the two css modifications
Solution 2: best UX
The preceding solution mimics the dynamics of a desktop screen. But on a mobile you want to see better the text and the image. This doesn’t happen with the preceding solution. So my suggestion is to go with this css. You will preserve the same layout you want on desktop screens BUT you will reorganize the things much better when you open the page on mobile
<style>
.containerabc {
background-color: #fff;
display: block;
overflow: hidden;
width: 100%;
}
.containerabcolumn {
margin: 0 auto !important;
max-width: 1080px;
float: none !important;
position: static !important;
}
.containerabc .et_pb_text {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.a {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 50%;
margin: auto;
}
.b {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 50%;
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
flex-basis: auto;
flex-basis: auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.b img {
width: 100%;
}
@media only screen and (max-width: 600px)
{
.containerabc .et_pb_text
{
display: block;
}
.a
{
margin: unset;
max-width: 100%;
padding: 20px;
}
.b
{
max-width: 100%;
padding: 20px;
}
}
</style>
Desktop behavior
Mobile behavior
Update after OP clarification
.containerabc {
background-color: #fff;
display: block;
overflow: hidden;
width: 100%;
}
.containerabcolumn {
margin: 0 auto !important;
max-width: 1080px;
float: none !important;
position: static !important;
}
.containerabc .et_pb_text {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.a {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 50%;
margin: auto;
display: inline-block;
position: relative;
top: 0px;
left: 50px;
padding-left: 30px;
padding-right: 30px;
padding-top: 100px;
padding-bottom: 150px;
background: white;
}
.b {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 50%;
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
flex-basis: auto;
flex-basis: auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.b img {
width: 100%;
min-width: 700px;
position: relative;
overflow: hidden;
}
@media only screen and (max-width: 600px)
{
.containerabc .et_pb_text
{
display: block;
}
.a
{
margin: unset;
max-width: 100%;
padding: 20px;
position: unset;
}
.b
{
max-width: 100%;
padding: 20px;
}
.b img
{
width: 100%;
min-width: unset;
}
}
Answered By – Antonino
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0