css isn't really my thing, so I'm having trouble formatting my text in my div. I'm making a portfolio, and I have a card with a title and a description.
however the size of the card has paddings, and the description text is invading this padding.
code of my card.
export const CardContainer = styled.div`
background-color: ${(props) => props.theme["base-post"]};
border-radius: 0.5rem;
max-width: 100%;
max-height: 15rem;
`
export const CardContent = styled.div`
padding: 2rem 2rem 3rem 2rem;
position: sticky ;
display: flex;
flex-direction: column;
gap: 1.5rem;
`
export const CardTitle = styled.div`
display: flex;
justify-content: space-between;
h1{
font-size: 1.5rem;
color: ${(props) => props.theme["base-title"]};
}
span{
font-size: 0.8rem;
color: ${(props) => props.theme["base-span"]};
}
`
export const CardDescription = styled.p`
font-family: 'jetBrains Mono', 'sansSerif';
`
export function Card() {
return(
<CardContainer>
<CardContent>
<CardTitle>
<h1>Java</h1>
<span>Há 1 dia</span>
</CardTitle>
<CardDescription>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores atque reiciendis voluptatum reprehenderit deserunt, velit ab vel aut provident voluptatibus iusto ipsum necessitatibus suscipit, veritatis rerum doloremque incidunt consequatur blanditiis?
</CardDescription>
</CardContent>
</CardContainer>
)
}
I need the text to occupy only the space of the div, without invading the padding, and when the text is larger than the space, it is necessary that the text be cut and added "..." to the end
example
Reduce this container's padding or make it zero.
export const CardContent = styled.div`
padding: 0; // 0 || 1rem 1rem 1.5rem 1rem;
position: sticky ;
display: flex;
flex-direction: column;
gap: 1.5rem;
`
Related
I am having some troubles with check-box component in HTML. Currently my checkbox looks like this:
Code snippet:
<p class="rte" style="display:grid; grid-template-columns: auto auto; font-size:12px;font-weight:400;margin-bottom:10px;">
<input type="checkbox" checked style="width:auto;" />
<label>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
MY LINK.</label></p>
Now the checkbox is in the middle of the text but I need it to be in top left corner. How do I do that?
Use align-self: start; on the input element:
CSS:
input {
align-self: start;
}
https://jsfiddle.net/br3k1wfu
Like others mentioned your HTML has a few problems. The p and a element closing tags are in wrong spots. You can see them highlighted in red in the JS fiddle. Also using inline styles is a bad practice and will make your code hard to read and maintain. Prefer adding the styles to separate CSS files.
Example:
.rte {
display: grid;
grid-template-columns: auto auto;
font-size: 12px;
font-weight: 400;
margin-bottom: 10px;
}
#my-input {
width: auto;
align-self: start;
}
https://jsfiddle.net/xv3kyLqo/
I am building a Portfolio website that will have a few sections like home, about me, skills, services, projects, and contact. I built a section of every part, then I have usually a header and some paragraph or a photo. At the center bottom of the every section I would like to have a button that leads to another section/part. So for example in the home section I wish to have a button that will direct me to another page which will be about me.
I have written a HTML code for the section and have a design in CSS, but not sure how to make, the button" work"
I don't want to have a separate HTML file for every section, this is why I am thinking if there is any better way to do it.
.btn {
margin-top: 1rem;
display: inline-block;
padding: 1rem 3rem;
font-size: 1.7rem;
color: #d9296f;
border: 0.2rem solid #d9296f;
border-radius: 5rem;
cursor: pointer;
background: none;
}
.btn:hover {
background: #d9296f;
color: #08122f;
}
<section class="home" id="home">
<div class="content"><span data aos="fade-up" data-aos-delay="150">Hi, I'm Emilia</span>
<h3 data-aos="fade-up" data-aos-delay="300">Your Web Developer</h3>
<p data-aos="fade-up" data-aos-delay="450">Lorem ipsum dolor, sit ametconsectetur adipisicing elit. Consequatur doloremque eius sit ratione eveniet laborum inventore recusandae consequuntur ipsum, nostrum aspernatur, ab, libero quos natus iusto et quasi sed est!</p>
about me
</div>
</section>
As you already use, you can use the anchor. You just have to use #id as hyper reference such as: Button Name. This will move your site to the elemnt with that id. The default behavior is an instant jump which you can change to scroll by using: scroll-behavior: smooth;
/* only for styling purpose - no actual use */
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
a {
color: white;
}
section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
}
section:nth-child(1) {
background-color: blue;
}
section:nth-child(2) {
background-color: orange;
}
section:nth-child(3) {
background-color: red;
}
section:nth-child(4) {
background-color: green;
}
<section id="section-1">
<h1>This is Section 1</h1>
Go to Section 2
</section>
<section id="section-2">
<h1>This is Section 2</h1>
Go to Section 3
</section>
<section id="section-3">
<h1>This is Section 3</h1>
Go to Section 4
</section>
<section id="section-4">
<h1>This is Section 4</h1>
Go to Section 1
</section>
Hey everyone I am super new to coding and I've made my research and finally come to conclusion that if I don't want the padding or margin to effect the total size I have to use box-sizing:border-box but here in the example if I change the padding it affects the total width and size and the container gets bigger? How do I solve this? İ've tried changing the display property but I couldn't make it. I also tried using box-sizing:border-box in the .mid_card element itself and still the same. :(
A note: I've used SASS I also tried changing the CSS code too but problem(i think its not a problem its me who doesn't know how to code :() kept being alive!
Thanks in advance.
body {
font-size: 10px;
box-sizing: border-box;
}
.mid {
background-color: #f6f9fc;
margin: 1rem;
height: 95vh;
}
.mid__card {
background-color: white;
margin: 4rem;
border-radius: 12px;
border: .1em solid white;
box-shadow: 0 0.2rem 0.4rem 0.2rem rgba(0, 0, 0, 0.171);
height: 10rem;
width: 40rem;
padding: 3rem;
}
<link href="https://fonts.googleapis.com/css2?family=Raleway&family=Staatliches&display=swap" rel="stylesheet">
<div class="mid">
<div class="mid__title">
<h1 class="mid__title__head">Our Team</h1>
</div>
<div class="mid__card">
<h2 class="mid__card__title">Roger Harry</h2>
<h3 class="mid__card__subtitle">Founder</h3>
<p class="mid__card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum animi magni hic molestias? Et adipisci cum ad doloremque exercitationem corporis error dolorum, voluptatem, dicta tenetur sunt nam explicabo quaerat architecto. Placeat corrupti esse
debitis, veritatis nihil suscipit voluptates dolorem ab architecto est officiis laboriosam velit, sit dolore fugiat perferendis doloribus totam harum! Autem accusantium placeat fugiat soluta dolorem quidem eaque.
</p>
<button class="mid__card__button">LinkedİN</button>
</div>
</div>
</div>
box-sizing: border-box does force all padding on selected elements to not affect the total size of the element like you mentioned. You are correct. The problem with your code is you were only setting this property on the body element on your first line:
body {
font-size: 10px;
box-sizing: border-box; /* this is only affecting the body element */
}
I moved that rule outside of the body selector into a universal selector which selects all elements in the document. This allows your element in question .mid_card to not grow larger when padding is applied.
* {
box-sizing: border-box; /* moved this rule outside of body to affect all elements */
}
body {
font-size: 10px;
}
.mid {
background-color: #f6f9fc;
margin: 1rem;
height: 95vh;
}
.mid__card {
background-color: white;
margin: 4rem;
border-radius: 12px;
border: .1em solid white;
box-shadow: 0 0.2rem 0.4rem 0.2rem rgba(0, 0, 0, 0.171);
height: 15rem; /* increased height to avoid clipping */
width: 40rem;
padding: 3rem;
}
<body>
<div class="mid">
<div class="mid__title">
<h1 class="mid__title__head">Our Team</h1>
</div>
<div class="mid__card">
<h2 class="mid__card__title">Roger Harry</h2>
<h3 class="mid__card__subtitle">Founder</h3>
<p class="mid__card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum animi magni hic molestias? Et adipisci cum ad doloremque exercitationem corporis error dolorum, voluptatem, dicta tenetur sunt nam explicabo quaerat architecto. Placeat corrupti esse
debitis, veritatis nihil suscipit voluptates dolorem ab architecto est officiis laboriosam velit, sit dolore fugiat perferendis doloribus totam harum! Autem accusantium placeat fugiat soluta dolorem quidem eaque.
</p>
<button class="mid__card__button">LinkedİN</button>
</div>
</div>
</body>
So you can see how this works in action: See the snippet below. The square on the left has default box-sizing whereas the square on the right has box-sizing: border-box applied. In this animation, as you can see we are increasing the padding of the div. Notice the div on the right never grows in size as the padding increases
* {
margin: 0; padding: 0;
}
html, body {
height: 100%;
font-family: Arial;
}
body, div {
display: flex;
justify-content: center;
align-items: center;
}
div {
margin: 0.5rem;
border-radius: 1rem;
width: 7.5em; height: 7.5em;
background-color: #09f; color: #ccf;
text-align: center;
text-transform: uppercase;
animation-name: add-padding;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
p {
background-color: rgba( 0,0,0,0.125 );
}
#keyframes add-padding {
100% {
padding: 2.5rem;
}
}
<div>
<p>default</p>
</div>
<div style='box-sizing: border-box'>
<p>box-sizing: border-box</p>
</div>
Edit
Adding a screen recording below so OP can see the padding size increase in dev tools without affecting the total dimensions of the div in question.
It's the margin which is not included in the total width when box-sizing is border-box - the padding (and border width) is always included with that setting. Don't mix these two up.
I have to do a semantic webpage from a pdf. Everything is going fine (not at all), but I have a footnote that doesn't fit in a resposive line-height. I want to put it inside a p tag, which works fine, but I don't know if that is good.
here's the code:
.text {
padding-left: 8.5vw;
padding-right: 8.5vw;
padding-bottom: 10vw;
}
.text-column {
padding-top: 10vw;
column-count: 2;
column-gap: 4vw;
}
.text p {
color: #333;
margin-bottom: 2.7vw;
line-height: 3vw;
text-align: justify;
text-indent: 3vw;
font-size: 2.12vw;
}
.footnote hr {
background-color: #000;
width: 33%;
height: 0.2vw;
margin-top: 4vw;
margin-bottom: 1vw;
border-color: #000;
}
.footnote {
font-size: 1.36vw !important;
text-align: justify !important;
line-height: 1em !important;
}
<article class="text text-column">
...
<small class="footnote">
<hr>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempore nostrum laboriosam laborum sed nulla
quae libero distinctio consequuntur. Ut sint molestiae, placeat voluptatibus vitae repudiandae architecto nemo
et in?
</small>
</article>
Yes. In fact, the MDN page for <small> itself showcases a <small> tag nested inside a <p> tag as its example:
<p>This is the first sentence.
<small>This whole sentence is in small letters.</small>
</p>
<p> is a flow content element, and <small> is a phrasing content element. Any phrasing content can go inside of any flow content. In addition to this, <small> is an inline element, so will not break the flow of the content.
However, keep in mind that <small> sets the size one size smaller than the default text size on the page, so you may need to adjust it accordingly. This can be done by nesting <small> within <small>, as <small> is also a valid parent of <small> itself. Note that there is an equivalent <big>, though this is obsoleted in favour of CSS' font-size.
Yes you can, According to Official document also allow it.
https://www.w3.org/MarkUp/html3/footnotes.html
I want to underline only the last line of some text. When the text wraps to more rows, still only the last line has to be underlined.
I found this Solutions. But that does not work when the text is centered. Because the line stretches all the way to the left on the last row when the text gets wrapped.
p{
position: relative;
display: inline
}
p:after {
position: absolute;
left: 0;
bottom: -15px;
width: 100%;
height: 1px;
border-bottom: 10px solid #000;
content: ""
}
<div style="text-align:center;">
<p>Een lijn onder alleen de laatste regel, werkt ook op mobiel als de tekst over meerdere regels valt</p>
</div>
Jsfiddle
Anyone has an idea?
Thx!
I guess that's what OP wants:
.underlined {
position: relative;
}
.text {
display: inline-block;
text-align: center;
}
.line {
color: transparent;
display: inline;
position: relative;
left: 50%;
}
.line:after {
content: "";
display: block;
width: 100%;
height: 1px;
border-bottom: 10px solid black;
position: absolute;
left: -50%;
top: 0;
}
<p class="underlined">
<span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sed ratione voluptatum ducimus unde velit debitis asperiores expedita, a deleniti repellat quis officia. Voluptate, earum rerum itaque, iste eligendi velit!</span>
<span class="line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sed ratione voluptatum ducimus unde velit debitis asperiores expedita, a deleniti repellat quis officia. Voluptate, earum rerum itaque, iste eligendi velit!</span>
</p>
I don't like this solution because it requires to duplicate the content, but maybe someone has an idea to improve it...
JSFiddle
Edit: Adding a screenshot of my result:
Is doesn't work in Firefox 50.0
I answered similar question. It can't be done in pure css.
I have created the fiddle using javascript.
http://jsfiddle.net/VHdyf/89/
Javascript part
var parentEl = document.getElementsByClassName('customBtn');
for(var i=0;i<parentEl.length;i++){
var currentEl = parentEl[i];
var button = currentEl.childNodes[1];
var words = button.innerText.split(/[\s]+/); // An array of allthe words split by spaces, since that's where text breaks by default. var
var lastLine = []; // Putall words that don't change the height here.
var currentHeight = currentEl.clientHeight; // The starting height.
while(1){
lastLine.push(words.pop());
button.innerText = words.join(' ');
if (currentEl.clientHeight < currentHeight) {
var span = document.createElement('span');
span.classList=['underline'];
span.innerText = ' '+lastLine.reverse().join(' ');
button.appendChild(span);
break;
}
currentHeight = parentEl[i].clientHeight;
if(!words.length){
break;
}
}
}
Try the following CSS
div > p:last-child:after {
position: absolute;
left: 0;
bottom: -15px;
width: 100%;
height: 1px;
border-bottom: 10px solid #000;
content: ""
}
Here is updated JSfiddle