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
Jochem
Jochem11mo ago
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 though
gabrieldev959
gabrieldev95911mo ago
Hi 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?
Jochem
Jochem11mo ago
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
gabrieldev959
gabrieldev95911mo ago
ok, sorry, I didn't know, thanks for answering me one more time, have a good day!
Jochem
Jochem11mo ago
no worries, and glad to help 🙂
Aashrith Raksh
Aashrith Raksh11mo ago
@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?
Jochem
Jochem11mo ago
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
Aashrith Raksh
Aashrith Raksh11mo ago
Got it 👍
clevermissfox
clevermissfox11mo ago
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;
Want results from more Discord servers?
Add your server