Then this is how you test it then?
no overflow
Overflow:hidden;
Overflow Added:
.wrape {
Overflow:hidden;
}
</path>
</svg>
</div>
</div>
6546654
Then this is how you test it then?
no overflow
Overflow:hidden;
Overflow Added:
.wrape {
Overflow:hidden;
}
</path>
</svg>
</div>
</div>
6546654
Yes you can clearly see the difference now.
The problem is once again compounded by your repeated use of heights on containers instead of letting the content dictate the height (although in this case the fixed height is essentially cutting off the bottom margin so although your use of it is accidental it gives you the solution you wanted).
Knowing when and when not to use something is what learning is all about:)
I will work on that next:
How do I fix this?
Before:
After:
Thereās this issue, and the other one where the text jumps off to the element above it.
If you think thatās an issue.
This is what happens when I remove height.
.wrape {
position: relative;
width: 266px;
/*height: 174px;*/
background:red;
background-position: 0 -168px;
}
Would I remove height from this too?
.jacketc {
position: relative;
width: 266px;
height: 174px;
background: #000000;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.jacketc,
.wrape {
background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
}
I wasnāt able to remove the height from these.
Maybe you can.
When I tried removing the height, it was messing up everything.
Maybe thereās a right way to do it, but I wasnāt able to figure it out.
.jacketa {
position: relative;
width: 936px;
height: 1121px;
background: #000000;
margin: 100px auto;
}
.wrapa {
position: relative;
width: 606px;
height: 50px;
}
.wrapb {
position: relative;
width: 266px;
height: 266px;
}
.jacketc {
position: relative;
width: 266px;
height: 174px;
background: #000000;
}
.wrapg {
position: relative;
width: 606px;
height: 344px;
background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.jacketb {
position: relative;
width: 606px;
height: 606px;
background: #000000;
}
.wraph {
position: relative;
width: 606px;
height: 606px;
border: 3px solid red;
box-sizing: border-box;
background: url("https://i.imgur.com/DRbLg4R.png") no-repeat -3px -3px;
}
I was able to remove the height from these:
.container {
width: 936px;
/*height: 1121px*/
margin: 100px auto;
background: green;
}
.wrapc {
position: relative;
width: 266px;
/*height: 50px;*/
}
.wrapc .playButton {
float: left;
width: 83px;
/*height: 44px;*/
}
.wrapd {
position: relative;
width: 266px;
/*height: 200px;*/
}
.wrapf {
position: relative;
width: 266px;
/* height: 251px;*/
background: #000000 url("https://i.imgur.com/fOfpsiC.png") no-repeat 0 0;
}
Working on this one but itās not working.
.wrape {
position: relative;
width: 266px;
/*height: 174px;*/
background: red;
background-position: 0 -168px;
}
You have the āhelloā text inside. wrape when it should be outside of the wrapper.
1 or 2 is wrong?
1.)
<div class="lines"></div>
</div>
hello
<div class="wrape hide">
<div class="wrapper">
<ul>
2.)
</path>
</svg>
</div>
hello
</div>
Shouldnāt the text be sitting at the bottom?
If I do this I get:
1.)
<div class="lines"></div>
hello
</div>
<div class="wrape hide">
<div class="wrapper">
<ul>
This:
Fixed that text part:
What do I do about the height?
.wrape {
position: relative;
width: 266px;
/*height: 174px;*/
background: red;
background-position: 0 -168px;
}
.wrape .playButton {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, .7);
cursor: pointer;
fill: #e0115f;
}
What would I be adjusting?
I donāt think itās that though.
I already explained that above and last year in detail when you first started floating these.
Without the height the margin on the bottom floats increases the wrappers height. You either remove the margins from the bottom floats or you set a height and hide the overflow. We went through this in detail the first time around and went through every combination so Iām loathe to repeat here again.
I already have overflow on it.
.wrapa,
.wrapb,
.wrapc,
.wrape,
.wraph,
.jacketa,
.jacketb,
.container {
overflow: hidden;
}
Read my post again I explained what choices you have.
You either remove the margins from the bottom floats.
That would be this?
.wrape .wrapper li:nth-of-type(n+11) {
margin: -3px 0;
}
That didnāt work, but I donāt understand what the right formula would be.
li:nth-child(n+11)
Targets the last 5 cubes:
Got it:
.wrape .wrapper li:nth-of-type(n+11) a {
margin: 0 4px 0 0;
}
Which ones of these can height be removed of?
Which ones do they need to stay on?
I donāt believe that same method works with these.
.jacketa {
position: relative;
width: 936px;
height: 1121px;
background: #000000;
margin: 100px auto;
}
.wrapa {
position: relative;
width: 606px;
height: 50px;
}
.wrapb {
position: relative;
width: 266px;
height: 266px;
}
.jacketc {
position: relative;
width: 266px;
height: 174px;
background: #000000;
}
I would be removing height and adding padding to the others too, right?
Are you telling me to:
Remove height and add padding instead?
For this one?
.wrapa {
position: relative;
width: 606px;
/*height: 50px;*/
padding-bottom:44px;
}
Like this?
.jacketa {
position: relative;
width: 936px;
padding-bottom: 600px;
/*height: 1121px*/
background: #000000;
margin: 100px auto;
}
And this:
.wrapb {
position: relative;
width: 266px;
/*height: 266px;*/
padding-bottom:260px;
}
.wrapb::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 266px;
/*height: 266px;*/
padding-bottom:260px;
https://jsfiddle.net/bwa3os2v/39/
.jacketc {
position: relative;
width: 266px;
/*height: 174px;*/
padding-bottom:168px;
background: #000000;
}
https://jsfiddle.net/bwa3os2v/41/
.jacketb {
position: relative;
width: 606px;
/*height: 606px;*/
padding-bottom:600px;
background: #000000;
}
Height is all removed from the containers:
Hello removed:
Do you need to specify height for this to be 200px?
I noticed this with 2 of them:
I donāt believe that can be fixed with margin or padding.
It should be 200px, not 203.
Why is 1.) 203px
and 2.) 200px
1.)
.wrapd {
position: relative;
width: 266px;
/*height: 200px;*/
}
2.)
.wrapd {
position: relative;
width: 266px;
height: 200px;
}
.wrapd .lines::before,
.wrapd .lines::after {
content: "";
position: absolute;
top: 0;
left: 83px;
width: 3px;
height: 194px;
background: #0059dd;
}
.wrapd .lines::after {
left: 174px;
}
I was able to remove the height off of everything except for these.
How come?
.wrapf {
position: relative;
/*width: 266px;*/
height: 251px;
background: #000000 url("https://i.imgur.com/fOfpsiC.png") no-repeat 0 0;
}
.wrapd {
position: relative;
/*width: 266px;*/
height: 200px;
}
.wrapc {
position: relative;
/*width: 266px;*/
height: 50px;
}