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.
Related
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;
`
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
We have a duplication issue while selecting content that contains a screen reader block, such as the following:
https://jsfiddle.net/dowbuabr/1/
<div class="content">
<div class="screen-reader">2 squared</div>
<div class="display" aria-hidden="true">2^2</div>
</div>
.screen-reader {
position: absolute;
clip: rect(1px,1px,1px,1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
By using aria-hidden, we're able to indicate to screen readers that the second content block is for display purposes and should not be read out loud. However, when highlighting the entire block and using a tool like Google Chrome's speak command, both blocks are spoken.
Is there a best practice for specifying that the first piece of content should be selected when the content block is highlighted? Using user-select: none doesn't feel right because it doesn't highlight the block if we want to copy it, and even though it technically solves the problem, it's a UX concern if we're highlighting a hidden block. See the following screenshot, which is "correct" but doesn't look right because there's no visual cue that we've highlighted the right thing.
https://jsfiddle.net/dowbuabr/2/
I think you are looking for pointer-events css property.
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
.avoid-clicks {
display: block;
width: 8em;
height: 8em;
background: rgba(51,51,51,0.85);
position: absolute;
top: 1em;
left: 4em;
padding: 0.75em;
pointer-events: none;
color: whitesmoke;
}
body {
font: 14px/1.4 "Trebuchet MS", sans-serif;
padding: 3em;
max-width: 600px;
background: whitesmoke;
}
p {
padding: 0.75em;
background: #ddd;
}
<p>This is some basic flow content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque expedita quia molestiae in.</p>
<div class="avoid-clicks">try selecting text through me</div>
I am working on a website, and I need to blue the background behind a div, and I am unable to find a way to do it using CSS.
I found an article that showed how to do it, but I was unable to accurately replicate it.
Here is the article: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
Here is my page: http://biolinks.redxte.ch/blur
If anyone can let me know what I'm doing wrong that would be great, thanks.
backdrop-filter: blur(10px);
It will blur area behind the element.
You were so close!
Remove position: relative on .name-container and add it to .head
Update:
Remove .name-bg, (use display: none if neccessary), and change .name z-index to 1 or greater. Then add this code.
.name:after {
content: "";
display: block;
position: absolute;
background-position: center -373px;
left: 0;
right: 0;
top: 0;
bottom: 0;
filter: blur(10px);
border-radius: 8px;
z-index: -1;
}
.head, .name:after {
background-size: 1500px auto; /* Really, this */
background-position: center; /* and this is the only code .head needs */
background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg');
}
Note: As the site used, you have to set an absolute background-size unfortunately. Also, as #media code gets used, you gotta tinker with the code a little.
Hope it helps!
add the blur filter to the #pp css (the img id used within your .name class) and remove it from the name-bg (which is affecting the whole background). That should work better for you. 10px might be a bit much. I previewed it (see image)
Hope this helps
EDIT:
After a closer look at your code (and seeing your comment, which clarified the question), you already have margin set to 0 auto around the name container, and the name-bg class is already being sized by this (it is being altered by the addition of the top/right/bottom/left coordinates) I adjusted the top/right/left/bottom to 2 or -2 (see fiddle), which decreased the size of the background div. I also changed the positioning to relative, so that when resized, that it will still come up in the middle.
https://jsfiddle.net/RachGal/rhav95o1/ :fiddle
I think this is closer to what you are looking for.
Yet another implementation. Note that the downside is that you have to duplicate the text in order to get the same height in both places (can probably do this with JS, or something, to be little cleaner)
html:
<div class="outer">
<div class="inner">
<h1>Blurred box</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
</div>
<div class="inner with-text">
<h1>Blurred box</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
</div>
</div>
scss:
#import "compass/css3";
$normal-img: "https://upload.wikimedia.org/wikipedia/commons/8/84/San_Stefano_Grand_Plaza%2C_Alexandria%2C_Egypt.jpg";
.outer{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:url($normal-img);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
.inner {
background-image:url($normal-img);
background-repeat:no-repeat;
#include background-size(cover);
background-attachment: fixed;
filter:blur(6px);
width:500px;
left:-webkit-calc( 50% - 250px );
top:20%;
position:absolute;
#include box-sizing(border-box);
color: transparent;
&.with-text {
color: white;
opacity: .5;
filter: none;
background: grey;
}
}
pen:
https://codepen.io/anon/pen/BxgyNR?
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