CODEWITHSUNDEEP
htmlcssflexbox
traumerisch
traumerisch

Reputation: 217

Resize the content of a flexbox when browser width changes

I'd like the content inside my flexbox to change size when I resize the browser (i.e. words and images shrink proportionally).

Inside the flexbox, I have two elements: some text on the left, and an image on the right.

<div id="flexbox">
    <div id="text">
        Some text
    </div>
    <img src="images/img.png" alt="" id="image" width="400px" height="414px">
</div>

#flexbox {
    background-image:url("images/board.png");
    width:100%;
    display:flex;
    flex-flow:row no-wrap;
    justify-content:space-between;
}

#text {
    margin-left:10%;
    width:40%;
}

#image {
    margin-right:10%;
}

Right now, the font size and image size stays static, so when I resize the browser, the image eventually gets cut off, and the text expands vertically.

Upvotes: 3

Views: 8827

Answers (2)

Abed Putra
Abed Putra

Reputation: 1215

check this DEMO

#flexbox { 
display: flex;
margin: 5%;
}

#text { 
font-size: 10vw; 
}

#image { 
height: 40vw;
width :40vw;
}
<div id="flexbox">
    <div id="text">Some text</div>
   <img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Dell_Logo.png" id="image" width="400" height="414" alt="">
</div>

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76414

You want responsive design. Essentially, responsive design is an approach of making the web-page look good in any browser or device. If you want to make the images shrink proportionally, then you need to set their width and height to certain percentage of their container, which, on the other hand should be a percentage of its container and so on. It is slightly more difficult to make the text shrink or enlarge upon window size change, since it you need media queries for that.

Read this tutorial to learn about responsive design and click on next chapter a few times, to make sure you read enough material about the topic in general. Use media queries to set the font-size property depending on specific cases you define according to your taste and needs.

Upvotes: 3

Related Questions