I have the following template of a card: pen. It is comprised of two sections "one" and "two".
<div id="one">
<div id="two">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...
</div>
<div id="three">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been...
</div>
</div>
Both of the sections have content that overflows their respective size. I would like to maximize #two div, so that it will take maximum (and ellipsis the rest) size and leave one line for the #three div.
If there is not enough content for #two then take its respective size and give all size left to #three.
Edit:
I would like to fix the width and allow the height to grow to a certain limit and then ellipsis
Related
I'm using Bootstrap cards and I want to separate them by a 2px margin.
Nonetheless, when I apply it (either with Bootstrap's margin classes or directly on my stylesheet) flex-wrap triggers and a card goes one row down.
How could I deal with this behavior?
Should I give a max-width to the cards?
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
margin: 3px;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
h2,
.card {
margin-top: 20px;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="highlights row">
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</section>
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</section>
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</section>
First and foremost, remove any margins set on Bootstrap classes. Bootstrap is intended to not need to add spacing/sizing, as it is built into the classes.
I re-worked your structure quite a bit. Mostly to try to structure the elements as Bootstrap recommends. With that being said, don't nest each card in sections. Instead, nest them in divs. The <section> tag defines a section in a document. & if I am not mistaken, the three cards aligned in a row qualify as a section. I nested all three cards in one section and called it the highlights class you already had.
col's function as a method of reserving space for certain content. So with a three-card setup, you should use col-4. The largest col is col-12, which spans the full width of the screen. 12/4 = 3. Then you can use sm lg and md for responsiveness on media screens. The above example creates three equal-width columns on small, medium, large, and extra-large devices using the predefined grid classes. Those columns are centered on the page with the row parent.
With this being said, the main reason your code was not working as intended is the additional CSS margins and that the cards should be nested in the col's. Lastly, the misuse of column sizing as mentioned previously.
I'd suggest brushing up on the Bootstrap Grid System. You can build a fully responsive site with little knowledge in CSS if you know Bootstrap.
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row w-100 m-0 justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
</div>
</section>
Here, You can used Gutters class in the Bootstrap grid system.
Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.
You can use g-1, g-2, g-3, g-4, and g-5 in row according to your needs.
.dark-theme body, .dark-theme .card {background-color: #121212; color: #ffffffa6;}
.dark-theme section.card {background-color: #464646;}
.card {border-width: 0;}
main {padding: 100px;}
h1 {text-align: center;}
.dark-theme .btn {background-color: salmon;border-color: salmon;}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row justify-content-center g-1">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
</div>
</section>
I have assigned a border-radius of 50px to my div, to achieve the following results:
However, when the height of the div changes, the curvature of the border also changes
What I'm looking for is for the sides to remain straight and the corners to remain the same as the div expands, like so:
This is what my css currently looks like:
.card {
border-radius: 50px;
height: 100%;
}
I should also note, I have been searching for an answer to this question (I assume it's been asked before) but I haven't been able to find an answer. I think this probably has to do with my choice of words, but I'm not sure how else to ask this question. Apologies in advance if it is a duplicate.
In your first example you dont have border radius 50px as border radius cant be more than 50%
please see this answer for details.
Border-radius in percentage (%) and pixels (px) or em
so, to make it same for 2 boxes just use right border-radius values - 20px for example.
jsfiddle.net/xky4r539/
That's because 50px is too high a value for border-radius in the first place.
The reason why it works when it's small is because it gets capped at half the height of the side between them. So in your above example the actual (resulting) value is around 18px (half the height of the div).
When the div becomes taller, its small height no longer limits border-radius value and it goes up until specified 50px. You need to play with its size (or measure it) so it is correct for the tall box. I assure you it will also be correct for the short case as well.
50px border radius is too big here. you can use 20px.
.card {
margin-bottom:20px;
background: yellow;
padding: 10px;
width: 80%;
border-radius: 20px;
position: relative;
}
.avatar {
background: red;
height: 50px;
width:50px;
border-radius:50%;
position: absolute;
top: -2px;
right: -2px;
}
p {
width: calc(100% - 20px);
}
<div class="card">
<p>Lorem Ipsum is simply dummy text of the printing and typeset </p>
<div class="avatar"></div>
</div>
<div class="card">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="avatar"></div>
</div>
<div class="card">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="avatar"></div>
</div>
I have a website: http://marekzurek.hekko24.pl
I'm trying to copy the testimonial photo effect found on this website: http://i.imgur.com/bu3FuPR.png
What should I add to my css to make the image with the class "client-pic" round and small?
HTML:
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="testimonial-list">
<!-- START SINGLE TESTIMONIAL DESIGN AREA -->
<div class="single-testimonial text-center">
<img src="http://1stwebcoder.co m/themes/nexus/nexus/images/client.jpg" alt="client" class="client-pic">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum.</p>
<h2>mark jukarbarg</h2>
<h3>CEO facebook</h3>
</div>
Here is the css you want to add to make that photo round and small
.client-pic {
width: 80px;
height: 80px;
border-radius: 50%;
}
Tip for the future, if you want to scrape code off of other websites, use inspect element browser feature to get to css used on any specific element.
Is there a way to set only the background of block elements until only at end of text while keeping the css display: block property.
h1 and p are block elements when you set background to these block elements
the surrounding element will look like a box.
see below:
If I set the css display: inline to these block elements the background is applied only on the text surrounding the element.
see below:
How do we apply the background only surrounding text like the one above but keeping the css property display: block to the element. Is there any hacks in css or javascript to produce same output above?
Add an inline element inside the block element, like this:
<p><span>Text here...</span></p>
and style the inline element.
span {background: red;}
strong {
background-color:#ffa500;
}
span{
background-color:#03a9f4;
}
<h1><strong>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</strong></h1>
<p><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</span></p>
There is new HTML5 tag available to mark/highlight any sentence irrespective of the element type(block or inline). But the downside is we cannot control the highlight color, its always in yellow
<div>Lorem <mark>Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</mark> the industry's standard dummy </div>
preview at JS fiddle : https://jsfiddle.net/itsselvam/gLbgukd9/#&togetherjs=xHVthKGqIE
I hope this helps. Cheers
I have some html, css similar to this:
<div style="width: 40em; text-align: center;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex
</div>
which renders like this but i want that the shortest line to be on top, like this.
i am unable to figure out how to do this, any help would be appreciated!
Text is automatically displayed by web browser until the end of the block width. If you want something diferent you must use a break.
<div style="width: 40em; text-align: center;">
Lorem Ipsum is simply dummy text<br>
of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy tex
</div>