traumerisch February 2016

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.

Answers


Lajos Arpad February 2016

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.


Abed Putra February 2016

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>

Post Status

Asked in February 2016
Viewed 1,888 times
Voted 6
Answered 2 times

Search




Leave an answer