How do I prevent my div from shrinking so much that it interferes with viewing the contents?
Hello, I'm carrying out a project and I would like to know how I can prevent the width of my div with id #consultory from decreasing so much, because this is disturbing its position in relation to the page and the visualization of the image and the writings inside it;
i have tried to define, many different percentages for the width but the problem still happens.
Is there any way to limit the width of this div so that it doesn't shrink so much, or is there another way to solve this problem?
P.S: I added a gif with the problem happening and I created a sandbox with the codes, the sandbox is it: https://codesandbox.io/s/border-problem-46239x?file=/src/App.js
if necessary i post the codes here, ok?
Thanks for helping!
Gabriel959
CodeSandbox
border-problem - CodeSandbox
border-problem by Gabriel959 using bootstrap, get-google-fonts, react, react-dom, react-router-dom, react-scripts
9 Replies
you can set a
min-width: some-value; and it won't shrink past that. You'll run into issues if the screen is smaller than that thoughHi Jochem, Thanks for Answering Me, if you can answer me plus two questions I'd be Grateful
1º Do You think I must to use a min-width with percentage or rem for better responsiveness?
2º And about the issues, Do you think that below the min-width Should I media queries or other thing?
percentage won't help, it'll keep shrinking with the viewport
and media queries are there so that you can fix problems you can't otherwise
actually, let me rephrase that
media queries are there to fix issues at different screensizes that aren't trivial to fix without. There's no reason to avoid them
also, I just noticed that we're in #back-end. Please post #front-end questions to #front-end in future. This is 100% a frontend question
ok, sorry, I didn't know, thanks for answering me one more time, have a good day!
no worries, and glad to help 🙂
@Jochem why percentages won't help? When percentages are used, the div shrinks with the parent. That's the main thing required for responsiveness right?
OP wants to prevent it from shrinking too much
responsiveness isn't just nothing but responsive units and hoping everything works magically, sometimes you have to define breakpoints and set limits so that there is room for content to exist
Got it 👍
I’ve started using
width: min(100%, 8em); instead of a width: 100%; min-width: 8em;` as it takes the smaller of two values and just one property to work with and overwrite if needed but keeps things responsive. There’s also width:max(x, y) instead of width: x; max-width: y;