I think I already know the answer to this one, but i hope maybe someone will have a some neat trick for that .
I want to specify a min-height of a DIV , but not px / % based . (I know it sounds strange , but it is for compatibility reasons / responsiveness)
Basically I want to be able to specify it by number of lines .
I have a grid of DIVS , but the elements inside are not fixed, so one element can have 3 lines, and the next one only 2 or 1 line . this messes up the layout .
Basically , what I need is THIS :
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit.
===================== ===================== =====================
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur
adipiscing elit.
===================== ===================== =====================
and NOT this :
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. ===================== =====================
=====================
===================== =====================
===================== Lorem ipsum dolor sit Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur =====================
amet, consectetur =====================
adipiscing elit.
=====================
can this sort of thing can be achieved by specified "I want 3 lines" ?
(As opposed to pixels, percentage / em ??)
Edit I
After comments -
What I really want is something like the FORM elements , INPUT or TEXTAREA where you can simply specify the height and width by lines / characters !
<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>
It is hard o believe that no one has invented such a solution and left us all to struggle with PX / em / % calculations and the likes ..
Why are you so opposed to the idea of setting min-height in ems? If you have line-height set in ems, multiply that by three and you got your desired height!
div {
line-height:1.5em;
min-height:4.5em;
float:left;
width:33%;/*close enough*/
}
Fiddled
Update: setting min-height to three lines is an exercise in futility - it does not account for scenarios where content does not fit into the space available. You could use faux columns instead to make content appear to be of uniform height within the row
I accomplished this by using flexbox and min-height.
Have each of your div elements within a flexbox container to get them to have the same height and react responsively (i.e. use breakpoints, flexbox wrap, and min-width to ensure that the probability of having more than 3 lines of text is low). Then for each of your internal elements, set the min-height and line-height values like #o.v. suggested. min-height should equal font-size * line-height multiplier.
I needed the internal paragraphs to be at least 2 lines high (there is a high probability that they would contain 1 or 2 lines of text, with a very low probability that they would contain more than 2 lines of text), so this is what I ended up with:
HTML
<div class="flex-container">
<div>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
<div>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</div>
CSS
div.flex-container {
display: flex;
}
div.flex-container p {
font-size: 1em;
line-height: 1.125; // Default is 1.2, but varies by browser
min-height: 2.25em; // 2 * 1em * 1.125
// (number of lines) * (font-size) * (line-height multiplier)
}
You should use a clearfix hack
It will allow you to get your divs aligned without specifying any height. It's like a line separator :
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. ===================== =====================
=====================
{clearfix}
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur =====================
===================== adipiscing elit.
=====================
You still can set height / margin on each div, of course :
EDIT :
For an internal equal size without using tables, you've got several solutions :
Using overflow:hidden on the parent and an extra margin-bottom on children if you only use background.
Using display-table attribute (Method 1)
Or using javascript (Method 3)
I dont know why would you want that..but you could fix the height and width of the div class according to the size of the font you are gonna use.
say your font size is 10px and you are gonna use 10 px padding then use divs with 50px height.. then add a margin-bottom to those divs and you are good to go i think!
Related
CSS grid does not seem to be working, and I do not know why. Can anyone advise?
I have an index.html and css via Visual Studio. The html is basic. I made a container with a couple of items in.
This is the html
.container {
display: grid;
grid-template-columns: 1fr 200px;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
Can someone let me know as my take on it is the container is the parent so I use that class. I changed it to items and nothing.
I have tried changing the elements and that still did not work.
I don't have any other options.
It's really hard to understand what you are expecting😐. Please make your questions more specific in the future.
However, from what I understand, you are not too happy about the second element sitting at extreme right. Ok let's talk about that.
If you want to use the grid-template-columns property in your CSS, Ask yourself these:
How many columns do I want?
How much width do I want on each column?
CASE 1: If you want only ONE column, i.e. you want your list to look like this
Lorem ipsum dolor sit
Lorem ipsum dolor sit
Lorem ipsum dolor, sit
Use grid-template-columns: auto one auto for one column
.container {
display: grid;
grid-template-columns: auto;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
CASE 2: If you want TWO columns, i.e. you want your list to look like this
Lorem ipsum dolor sit Lorem ipsum dolor sit
Lorem ipsum dolor, sit
Use grid-template-columns: auto auto two autos for two columns
.container {
display: grid;
grid-template-columns: auto auto;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
CASE 3: If you want THREE columns, i.e. you want your list to look like this
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor, sit
Use grid-template-columns: auto auto auto three autos for three columns
.container {
display: grid;
grid-template-columns: auto auto auto;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
Now that you know how many columns you want, next you'd want to decide the width you want on each column and width can be different for each column.
If you don't want too much trouble, keep using auto to automatically set the width for each column. But if you're ready to do a little bit of tinkering, start changing the values.
For example, you can say grid-template-columns: 1fr 200px 20%, this will generate a grid of three columns.
The first column will have width of 1fr.
The second column will have width of 200px.
The third column will have width of 20% of its parent, container.
.container {
display: grid;
grid-template-columns: 1fr 200px 20%;
}
<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>
So, in your case, template-grid-columns: 1fr 200px means the first column is of 1fr width and the second is of 200px. Use your browsers dev tools to verify it.
Here are some useful links:
Play with grid-template-columns
Learn more about Grid
I hope that solves your problem. Happy Coding!😺
So I am trying to create a website and currently have a side section and the main body to the right of that. What is the best way to make the right main body of text move down below the side section so when viewing on smaller devices (mobile tablet etc).
so essentially keep div 2 where it is and move divs 6 + 8 + 9 + 10 down below 2
Here is what I have so far:
<div class="1">
<div class="2">
<div class="3">
<img src="" />
</div>
<div class="4">
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
</div>
<div class="5">
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
</div>
</div>
<div class="6">
<h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
</div>
<div class="8">
<h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
</div>
<div class="9"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
<div class="10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>
</div>
And here is my css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #BBBDC0;
}
.1 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 10%;
}
.2{
grid-area: 1 / 1 / 7 / 2;
}
.6{
grid-area: 1 / 2 / 3 / 6;
}
.8{
grid-area: 3 / 2 / 5 / 6;
}
.9{
grid-area: 5 / 2 / 7 / 6;
}
.10{
grid-area: 7 / 2 / 8 / 5;
}
.2,
.6,
.8,
.9,
.10{
border: 1px solid black;
text-align: center;
}
I'm unsure which is the best way to do about this, would it be media queries? if so what is the best way to do? if not what are some other possibilities one could consider? (I renamed my divs to numbers as i wanted to keep them private for the time being)
Thanks to any contribution in advance anything is a help :)
Using flex, you can order your elements however you wish. Combine this with media responsive CSS selector such as #media only screen and (max-width: XXXpx){}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
I have an amp carousel with some hide/show content at the bottom. I am using amp-bind to dynamically hide and show some extra content as well as adjust the height value of the carousel itself so that the content can be seen.
The markup is something like this, but with a couple more slides with similar content:
<amp-carousel
[height]="visible ? 720 : 550"
height="550"
width="400"
layout="responsive"
type="slides">
<div class="carousel__slide">
<p>Text content here</p>
<button [text]="visible ? 'See Less' : 'See More'"
on="tap:AMP.setState({visible: !visible})">See More</button>
<ul [class]="visible ? 'show' : 'hide'" class="hide">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
</div>
</amp-carousel>
With that mark I get the following error:
amp-bind: Default value for [height] does not match first expression result (550). This can result in unexpected behavior after the next state change.
I tried adding a default value for height before the carousel but that didn't seem to help
<amp-state id="props">
<script type="application/json">
{
"height": "550"
}
</script>
</amp-state>
I tried passing it both a number and string, with brackets and without but none of it seems to work
You're missing single quotes '. Try this:
<amp-carousel
[height]="visible ? '720' : '550'"
height="550"
width="400"
layout="responsive"
type="slides">
<div class="carousel__slide">
<p>Text content here</p>
<button [text]="visible ? 'See Less' : 'See More'"
on="tap:AMP.setState({visible: !visible})">See More</button>
<ul [class]="visible ? 'show' : 'hide'" class="hide">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
</div>
</amp-carousel>
After discussing with the AMP team, they informed me that's it's actually a bug with the validation in developer mode
Bug has been filed here: https://github.com/ampproject/amphtml/issues/12028
I am no guru at CSS so please excuse what might be a basic question. I have an annoying problem which I can't seem to fix:
Here is my text without CSS line-height:
I would like to move the text up closer to the heading tags so I did this:
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
The Result
The result is perfect and exactly what I want, but... the problem comes when I resize the browser.
Problem Resizing the browser
My Question
Why is the text condensing on browser resize? What am I doing wrong? Should I not use the line-height property? Any workaround for this?
The line-height property is used to control how much vertical space is allocated for each line. In general, it is used to adjust how much space there is between lines within an element.
line-height: 1 means that lines are exactly big enough to fit the tallest letters and lowest descenders, with no space between. A line-height of more than 1 means there is some extra space between lines, and less than 1 will result in lines overlapping.
line-height: 0 means that a line of text has no vertical space allocated to it, so all lines will overlap each other in one line. That is what you are seeing here: the text is wrapping onto a second line, which is rendered over the top of the first line.
What you are trying to do is adjust the space between elements, not the space between lines in a single element. For this, the recommended approach is to adjust either margin or padding. Consider adjusting the margins of your elements until you have your desired vertical rhythm.
For a really detailed explanation of how all three properties work, see this CSS Tricks article on the box model.
Example
body { font-family: sans-serif; }
.cramped h2 {
margin: 0.4em 0 0.2em;
}
.cramped p {
font-style: italic;
margin: 0;
}
<section class="cramped">
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>
Add this to your CSS:
h2 {
margin-bottom: -10px;
}
h2 tags have margins by default
Here is the JSFiddle demo
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
try this it works fine on my browser
try this
p{margin-top:-10px; font-style:italic;}
#media screen and (max-width:768px){
h2{font-size:18px;}
p{font-size:14px}
}
Line height usage is for setting the distance (height) of each line. 0 value gives no distance so you have this problem.
You should let the line-height in the default value and reset default h2 and p element margin.
line-height
On block level elements, the line-height property specifies the
minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that
is used to calculate line box height. On replaced inline elements such
as buttons or other input element, line-height has no effect. [1]
h2, p {
margin: 0;
}
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
Reference: MDN - line-height - w3.org - line-height
HTML:
<div class="heading">
<h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<a class="action" href="#">Print</a>
</div>
Desired default look:
| Lorem ipsum dolor sit [Print] |
| amet, consectetur adipiscing elit. |
Desired look on small screen (using media-queries):
| Lorem ipsum dolor sit |
| amet, consectetur |
| adipiscing elit. |
| [Print] |
Not desired:
| [Print] |
| Lorem ipsum dolor sit amet, |
| consectetur adipiscing elit. |
Not desired:
| Lorem ipsum dolor sit [Print] |
| amet, consectetur |
| adipiscing elit. |
Remarks:
Text may be any long.
Action element is constant height and variable width.
I see no way to do this using only CSS.
Right now I use JS (Harvey lib) to put floated DOM element before text on bigger screen.
Any ideas?
/// EDIT - moved to answer (sorry for mess)
There's no easy way to achieve both results using only CSS without modifying your markup. There are a few tricks you can use to try to emulate the behavior you want, though.
Trick 1: Use Absolute Positioning
Set the link to position:absolute;top:0;right:0; (and the container to position:relative; if needed). Then, use .text::before{display":block;content' ';float:right;} to place a gap where the print link will appear.
Trick 2: Double Links
You could place a link before/in the <h2> to float right for large displays, then hide it and show a (formerly-hidden) second link as a block element below the text on small displays.
Thanks to suggestions above, I finally decided to break pure semantics structure and put .action element before .text, so it floats easily with proper text wrapping. Adding the behavior desired for smaller screen was quite easy with the constrains about .action element size:
cssdeck.com/labs/epcoxk7o
HTML:
<div class="heading">
<a class="action" href="#">Print</a>
<h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>
CSS:
.action {
float: right;
line-height: 20px;
padding: 5px 70px;
background: #eee;
}
.text {
line-height: 30px;
}
#media (max-width: 30em) {
.heading {
position: relative;
padding-bottom: 20px;
}
.action {
position: absolute;
bottom: 0;
left: 0;
}
}
Other solution would be what #cimmanon suggested: cssdeck.com/labs/9bntxaro