I have a <div> that contains text. The text have some very long lines, like "To use this page, you have to first register for an account..." etc.
At the right-side of this div, I have an image. When the user is on small screens, I want to wrap contents. When he is not, the image should stay the same size, and the text on the div should wrap lines (but keep the two elements side-by-side).
So far, I was able to make the text wrap only if I add a combination of flex: 0 1 400px, for example. But this combination makes things weird when resizing the screen, because the text stays wrapped even when there's space on the screen (because the div does not grow).
So, what I'm probably looking is that if there's a way to say "only wrap contents if the parent size is lower than ". Is it possible?
You can try setting the flex property to a media query, only for screens that exceeds the parent size so it would something like :
#media only screen and (min-width: *size* px){
parent{
flex: 0 1 400px;
}
}
By using this the text shouldn't be able to wrap anymore in screen lower than the size variable
Ok, I was able to make it work with #media. In the end, I did add a #mediawithmin-width: and set theflex-direction: row`, so that it'll simulate the wrap.
I tried to play with flex-wrap but the parent element won't resize when I'm wrapping, so I could not center the other elements, so that's the solution I ended up with.
Related
I got some cards that should show a trailer of a website taking the title and a excerpt from that given website. The bottom grey background is a parent div with display: flex on it. I've set the container to height: 200px and the child elements should fit inside.
Because the title and text can vary from site to site i would like to make them fit as best as possible with just one CSS class.
So, when a title is shorter and only takes up one line, I would like to add one line to the excerpt field.
Is there any way to make that happen with CSS? can display: flex handle this? I've tried to use flex-grow but it doesn't work
The body increases width if i have enough text on the page to fill the screen
Why does this happen?
See example here:
https://jsfiddle.net/dktzLqfm/2/
uncomment text and see the nav bar move slightly
Inline elements fill the block elements that contain them. When you insert a you are forcing a line break between inline elements. You only want to do this when you have some text needs to be forced to split on two lines. For example:
Burger
King
In general you should only use for this purpose. Instead, if you have blocks of text wrap them in the (when they are paragraphs) or other appropriate block level tags. In this way they will always fill their container and the text will wrap naturally.
Use CSS styles to set the width of the container.
Forcing
overflow-y: scroll;
on Body causes scrollbar to always show, which means the width is consistant across pages
I would like to know if there is any way to make a flex div, which will contains some little divs, with fixed width and height, depending of the users. That means that some users might have no divs to display, some others might have a hundred divs to show.
I want to know if anyone have an idea of how to make those subdivs kind of justified inside the main div, depending on the number of subdivs and the width of the screen (for example, users with big wide screen could have like 10 subdivs per line, where somebody on mobile phone should see 1 or 2 items per line).
I know I can do it with hardcoding responsive, but is there any way to have a smart and clean CSS code to fill my expectations ?
try flex-wrap property - flex-wrap: wrap;
https://jsfiddle.net/kozleek/w86qq9tt/6/
It is possible to do it maybe using the subdivs with a % on its width size, for example, .subdiv {width: 20%; height: you choose the size;}. The way the subdivs will distribute horizontally will vary, depending on the screen size, by putting the property FLEX-WRAP. If you really wanna use fixed sizes (on width) of the subdivs, it must be necessary to put media-queries on your css. I hope it will help you.
The problem is that my divs are being ordered so that the first column collapses first and is read first on mobiles (intended).
But on word-wrapping at very specific screen dimensions, the divs get out of balance and now look a little funky on their vertical balance with each other.
An image can be found here (red shows divs):
What I want is to add some space on the text that wasn't word wrapped so that
Personally, Id say the current design works well, as it can fit and change to different screen sizes, the fact that it doesnt line up is understandable as the word is just to long.
However if you wanted to you could set a min-width on the container which represents that box. This means the word wouldnt be wrapped when the screen gets smaller. But it could come with side effects as it will push over the other two divs depending on how the css works.
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.