Issue with 2 columns layout when zooming in or out

The mobile-first code below works fine when both columns 1 & 2 content is text but when column 2 is an image the width of both column changes in a non-proportional way that is not 50% 50% when zooming in or out and even without zooming.

<style>
        .container__one {
            display: block;
            
        }
        @media only screen and (min-width: 1024px) {
            .container__one {
               display: flex;
        }
        }

        .column__one, 
          .column__two {
            width: 100%;
        	padding: 10px;
        }

        .column__one > h1 {
            font-size: 4em;            
        }
        .column__one > p {
            font-size: 2em;
        }      

        .column__two > img {
            background-size: cover
        }
  </style>  
</head>
<body>
    <div class="container__one">
        <div class="column__one">
            <h1>Title 1 </h1>
            <p>Democratic presidential candidate Joe Biden has attacked 
            President Donald Trump over a report that he said, if true,
            contains a "truly shocking revelation" about the commander 
            in chief and his failure to protect US troops in Afghanistan
            and stand up to Russia. You'll want to serve WebP images only 
            to clients that can display them properly, and fall back to legacy
            formats for clients that can't.</p>
        </div>
        <div class="column__two">
            <img src="showcase.jpg" width="" height="" alt="Table in a restaurant"> 

            <!-- <h1>Title 2 </h1>
            <p>Democratic presidential candidate Joe Biden has attacked 
            President Donald Trump over a report that he said, if true,
            contains a "truly shocking revelation" about the commander 
            in chief and his failure to protect US troops in Afghanistan
            and stand up to Russia. You'll want to serve WebP images only 
            to clients that can display them properly, and fall back to legacy
            formats for clients that can't.</p>          -->
        </div>  
    </div>
  <script src="js/scripts.js"></script>
</body>

Here are 2 pictures that shows the issue:

How to fix this?
That is 2 columns one text & one image, both column on desktop screen 50% 50%.

I modified this line:

I added width=“100%”

It mostly solved the issue, but now when I zoom out the text get smaller but not the image, but it maintains 50% 50% ratio.

Still better than before.

hi @FakhriAz

maybe this can help

Hi @sobadrdb, it is not a matter of tutorials. I did many tutorials. I need better debugging skills. Besides, for now, for better Flexbox knowledge I need more practice and projects.

1 Like

okay, sorry my mistake.

only i dont see you set the flex grow flex shrink and flex basis on the sibling column. thats what i thought in the first placed before i posted that tutorial. which i didnt know that you already did that.

pardon me

You always have to make images responsive otherwise they will just be the fixed width of their intrinsic size.

But with that added to the CSS I’m not sure what the issue is. If you look in the dev tools you can see both columns are the same width.

hi @lasjorg

sorry to bothered you, if you forgot to close the attribute value with semicolon, is there any problem or not?
background-size: cover

1 Like

Meaning that you just messed up your code. Any declaration after the missing semi colon won’t behave has expect or probably not even work at all.

1 Like