I try to customize dots with React Slick and have this issue with the background color.
Here is how I set the styles.
.slick-dots.circle-dots {
list-style-type: none;
display: flex !important;
justify-content: center;
padding: 0;
.slick-active {
background-color: red;
background-size: contain;
border-radius: 50%;
}
}
An this is the result. The background is actually larger than the circle with border-radius: 50%. As there dots are placed next to each other, it's easy to point out that one is bigger than the others and it's weird. Is there any way that I can fix it?
Since .slick-active is a child of .slick-dots.circle-dots, setting
.slick-dots.circle-dots {
list-style-type: none;
display: flex !important;
justify-content: center;
padding: 0;
overflow: hidden;
//hide anything that spans larger than the element
.slick-active {
background-color: red;
background-size: contain;
border-radius: 50%;
}
}
to hide overflows could work
Related
In my Next.js app (basically React) I am trying to draw a trapezoid form with Styled Components, using borders.
My code is like this:
const StyledContainer = styled.div`
position: relative;
border-right: 75px solid red;
border-top: 25px solid transparent;
height: 50%;
width: 75%;
display: flex;
`
However, for my purposes, I need the border-right and border-top properties to use percentages. But when I insert 75% instead of 75px in border-right, the trapezoid is not visible anymore.
I've tried the whole day to fix this but I didn't manage. Anyone have any idea what I need to do? 🙏
For context, the parent container has both width and height properties:
const SAGraph = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
background-color: hotpink;
`;
I have seen similar problems which were solved by using vw as unit, but this isn't helpful in my case, as I need to use percentages, to make sure that the trapezoid doesn't move outside the container and it uses the whole width of the container...
Edit: This is a picture of my desired output:
If the red section is just for decoration, you can add it to the parent element as a pseudo after element, colored red and clipped into the required shape using CSS clip-path and percentage coordinates.
* {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.SAGraph {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
background-color: hotpink;
position: relative;
}
.SAGraph::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: red;
bottom: 0;
left: 0;
clip-path: polygon(0 100%, 0 60%, 60% 50%, 60% 100%);
}
<div class="SAGraph"></div>
If you want the red bit to be an actual child element then use the same technique direct on a child element (not on a pseudo element).
I'm trying to add opacity to my background in CSS, but the navbar is getting the opacity and not the background.
I don't know what I'm doing wrong.
I tried to change the body tag in CSS, but the navbar is getting the opacity and not the background.
body {
background-image: url("images/fenerbahce.jpeg");
background-size: cover;
opacity: 50%
}
.navbar {
padding: 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #939392;
top: 0;
background-color: #ccd0d0;
}
Opacity is given as a decimal value. I.e. 50% is given as '0.5'
body {
background-image: url("images/fenerbahce.jpeg");
background-size: cover;
opacity: 0.5
}
.navbar {
padding: 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #939392;
top: 0;
background-color: #ccd0d0;
}
Also, your navbar is probably part of your body. So by adding parity into the body, you're changing opacity for every component.
It seems unlikely that you want the whole body to be slightly see through (which is what you have with opacity: 50%) and nor will you want the text in your navbar to be a bit faint.
What I think you are looking for is a way to make the background of your navbar slightly see through. As it is just one color you can do this by adding a couple of bytes at the end of the hex color. Experiment to see what gives you the transparency you want.
Here's a simple example:
<style>
* {
margin: 0;
}
body {
background-image: url("https://picsum.photos/id/1015/1024/768");
background-size: cover;
}
.navbar {
padding: 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #939392;
top: 0;
background-color: #ccd0d066;
}
</style>
<body>
<div class="navbar">
<ul>
<li>link1</li>
</ul>
</body>
I have tried reproduce the bug here but it didn't happen.
The problem i have is that the sticky header (which in my real app is a simple div as a toolbar) becomes transparent only when it hovers a list (ul or ol) (demo)
Anyone has a clue why this happen and how to prevent it ?
I have tried to force the opacity by setting it to 1 and i even tried a background-image besides of a background-color
.menubar {
background-color: #f8f8f8 !important;
height: -moz-fit-content;
height: fit-content;
padding-bottom: 0px;
width: 100%;
padding-top: 1px;
position: sticky;
bottom: 0;
display: flex;
align-content: center;
align-items: center;
background-image: url(https://www.fapceramiche.com/media/products/images/article/generated_fap_sheer_2020_beige_matt_R10_90x90_002_fPB0_hr.jpg.520x516_q85_crop_upscale.jpg);
opacity: 1;
}
Try adding a z-index with a large number like so, z-index: 100;
I'm trying to indicate the active link, using a triangle-shaped CSS "cut-out" (the triangle is cut out of the white header.
http://codepen.io/Goatsy/pen/xVvRmZ
/*
.container {
width: 1200px;
}
*/
How do I "cut out" the red triangle from both the contained header and full-width background (red) block? I need to cut out the triangle to expose underlying photo.
The header works great, but as soon as the full-width red block is applied to the background layer of contained header, it "fills in" the triangle cut-out.
UPDATE:
I created a flexbox within a flexbox. Unfortunately, the contained header is not exactly 1200px, and this will be difficult to apply to the overall layout.
http://codepen.io/Goatsy/pen/xVvRmZ
.wrapper-whole {
display: flex;
flex-direction: row;
height: 134px;
margin: auto;
}
.flexy {
background: #f00;
flex: 2;
height: 134px;
}
.wrapper { /* wraps contained header navbar */
display: flex;
flex-direction: row;
height: 134px;
border-left: 15px solid #fff;
border-right: 15px solid #fff;
max-width: 1200px;
margin: auto;
flex: 6;
}
Instead of cutting it out from a background, you could create the illusion of a background by making red elements on each side of the white header using :before and :after pseudo-elements.
In http://codepen.io/anon/pen/MyNpdX, I added the following CSS:
.wrapper {
/* the stuff that was already here */
position: relative;
}
.wrapper:after, .wrapper:before{
content: "";
background-color: #f00;
width: 4000px;
position: absolute;
height: 134px;
top: 0;
}
.wrapper:before{
margin-right: 15px;
right: 100%;
}
.wrapper:after{
left: 100%;
margin-left: 15px;
}
Too many questions:
let me try to answer the ones I've understood.
I'll keep editing this answer as I go:
to contain something: you can have the following parent div
.parent {
max-width: 1200px;
overflow: hidden;
}
this way a child red div, would not appear outside parents constraint.
you can achieve css-triangles as:
.arrow-up {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
<div class="arrow-up"></div>
p.s.: you're codepen is so far behind the layout in question, that it's hard to hands-on fix the problem
Place the contained flexbox header, inside of another flexbox.
Place one (red) block on left of header and one (red) block on right.
Create max-width for white header:
#media screen and (min-width: 480px) {
.wrapper { /* wraps contained header navbar */
min-width: 1200px;
}
}
http://codepen.io/Goatsy/pen/xVvdKN
I have an <li> which is constrained in width and the height is set to an aspect ratio of 1:1.
I then have an element inside which is positioned absolutely with a 100% width and height. I then add an icon font to the :before pseudo element. How can I vertically center that pseudo element?
My code is:
li
+span-columns(1, 6)
a
+border-radius(50%)
display: block
position: relative
width: 100%
border: 5px solid $bright-blue
border: remCalc(5px) solid $bright-blue
&:before
padding-top: 100%
content: ''
display: block
span
display: block
position: absolute
top: 0
left: 0
width: 100%
height: 100%
&:before
// Content is added via the style for data-icon
display: inline-block
min-height: 100%
vertical-align: middle
width: 100%
color: $white
font-size: 32px
text-align: center
outline: 1px solid red
A pic of the problem. The red outline is on the span:before
COMPILED OUTPUT:
li {
width: 150px;
}
li a {
border-radius: 50%;
display: block;
position: relative;
width: 100%;
border: 5px solid blue;
}
li a:before {
padding-top: 100%;
content: '';
display: block;
}
li a span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
li a span:before {
content: attr(data-icon);
font-family: 'IconFont';
display: inline-block;
min-height: 100%;
vertical-align: middle;
width: 100%;
color: white;
font-size: 32px;
text-align: center;
outline: 1px solid red;
}
I'v created a fiddle with a solution for you.
Here: http://jsfiddle.net/avrahamcool/h3e2G/
your span is called Content in my fiddle, and I've add a new span called Centerer.
also, I centered some text in the layout, but you can change it back to your logo without noticing any differnce.
the main ideads are:
fix the height of the li (you already fixed the width, and if it should be a circle, I dont see a problem with also fixing the height).
lossing the relative and ablsolute way
instead of centering the text inside the span (while the span was height:100%), we center the span inside his holder.
Had to solve this with top padding like so:
$half-width: space(1, 6) / 2
$half-font: remCalc(33px) / 2
$border-widths: remCalc(5px)
+rem(padding-top, $half-width - $half-font - $border-widths)
That gives me custom top padding in rems depending on the width of the circle at the time and it scales perfectly when the body font size is increased or decreased.