Image right, text left works, but image left, text right doesn't (for website)

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

  1. this fix the text over the image, as per the other answer:

    .b img {
    width: 100%;
    }

  2. 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

Pixel2XL_display

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

desktop_view

Mobile behavior

mobile_view


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

Leave a Reply

(*) Required, Your email will not be published