I always encounter error whenever I try to change Bootstrap 4 image carousel-indicator shape from rectangle to eclipse. How can I change carousel indicator shape to circle in Bootstrap 4
Original css code for indicators:
.carousel-indicators li {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 30px;
height: 3px;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
background-color: rgba(255,255,255,.5);
}
What you need to do, is change height and width as you want, but values have to be equal, and add
border-radius: 50%;
Here is the result:
Related
I want to change the margin on the .v-dialog class and the max-height when it's not full screen.
The code from the console:
.v-dialog {
border-radius: 4px;
margin: 24px; <-------- want to change this
overflow-y: auto;
pointer-events: auto;
-webkit-transition: .3s cubic-bezier(.25,.8,.25,1);
transition: .3s cubic-bezier(.25,.8,.25,1);
width: 100%;
z-index: inherit;
-webkit-box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,
}
and:
.v-dialog:not(.v-dialog--fullscreen) {
max-height: 90%; <--------- want to change this
}
It's not enough just to add a class to the v-dialog component somehow it dosen't register it.
It's always a good idea to use the docs for reference, if you haven't done so already.
https://dev.vuetifyjs.com/en/components/dialogs#dialogs
You have to use the content-class property, instead of the normal class, if you want to attach a class to the v-dialog
Applies a custom class to the detached element. This is useful because
the content is moved to the beginning of the v-app component (unless
the attach prop is provided) and is not targettable by classes passed
directly on the component.
In this class you can then override the margin and max-height:
.custom-dialog.v-dialog{
margin: 10px;
}
.custom-dialog.v-dialog:not(.v-dialog--fullscreen) {
max-height: 50%;
}
The green nav bar behind the parent element is positioned as fixed .
And the fixed elements are suppose to break out from the document flow .
But when I am assigning position:fixed; [withot any top,left,right,bottom], then it should be starting from the top-left pixel of screen.
But no it is starting from a very odd position [it's taking margin-top:100px]
[why it is not breaking off from document flow]
Yes parent block [block not element] is having margin of 100px [all sides] Then also
first -> it[green nav] should not care about margins because it should not be in document flow.
Second -> even if its considering the margin from top [of another element], then why it is not considering margin from the left ?
CSS For the Green nav Block -
div.nav{
background-color: green;
text-align: center;
height: auto;
width: 50%;
margin:0 auto;
position: fixed;
}
position fixed is not breaking out of document flow
as it is considering margin-top of the parent element! When
positioned as relative working expected [within document flow]
CSS for Another block parent whose margin the above navbar is taking -
div.parent{
margin: 100px;
height: 400px;
width: 400px;
border: 3px solid red;
background-color: skyblue;
position: relative;
}
Green Navbar with position fixed, not breaking off document flow
Green Navbar with position relative, staying in document flow as expected
So the real question is why the navbar is not starting from top,left most corner ?
Try this css for stick green navbar on top
div.nav{
background-color: green;
text-align: center;
height: auto;
width: 50%;
margin:0 auto;
position: fixed;
top:0px;
left:50%;
transform:translateX(-50%);
}
Bump. Any idea? Thank you!
-
Displaying 3 slides/images per view, looped, centered.
With a clean cache, Swiper starts with the last slide and misses the first to the right. Browser refresh seems to fix it: swiper starts/initializes with first slide, no blank slides remain.
The amount of images is dynamic.
UPDATE:
The issue is with the CSS we added:
.swiper-container {
width: 100%; height: 100%;
margin-left: auto; margin-right: auto;
}
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
}
.swiper-slide img {
height: 550px;
width: auto;
}
.swiper-slide:nth-child(1n) {
height: 550px;
width: auto;
}
Removing the very last bit (nth-child) resets the slider to always start with the first slide. But the images stop sitting next to each other, but instead are spread apart.
Created this to demonstrate a little quicker:
http://jsfiddle.net/L3b1fzh9/13/
You can remove the last few lines of CSS, because .swiper-slide:nth-child(1n) matches every single .swiper-slide element, so this selector doesn't actually do anything (n is a set of all integers, so when you multiply by 1 you just get 0, 1, 2, etc.).
The reason why the images stop sitting next to each other is that their parent container .swiper-slide has width: 100%. You need to change that to width: auto and add margin: 0 auto to center the slides.
So your .swiper-slide CSS becomes:
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
width: auto !important;
margin: 0 auto;
}
And just remove the .swiper-slide:nth-child(1n) CSS.
Updated fiddle
I am using a number of Pseudo elements throughout a website I am building. They all look great except in IE. I am testing it in IE 10 and 11 to start off with.
For some reason the positioning is always slightly off - in the example below, about 5 px for each element.
I have tried changing the display and positions, setting the origins, but nothing seems to work.
Any help would be appreciated.
.home .welcome-row h1 {
position: relative;
margin-bottom: 0;
}
.home .welcome-row h1:before {
background-image: url('/wp-content/uploads/2017/10/welcome-line-1.png');
-webkit-transform: translateY(-23px);
-moz-transform: translateY(-23px);
-o-transform: translateY(-23px);
transform: translateY(-23px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
.home .welcome-row h1:after {
background-image: url('wp-content/uploads/2017/10/welcome-line-2.png');
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
*EDIT - I have added any additional theme styles that are applied incase they have any relevance.
*:after,
*:before {
box-sizing:border-box
}
:-webkit-any(article,aside,nav,section) h1 {
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
user agent stylesheet
h1 {
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
h1 {
margin: 0;
padding: 0;
}
I'm designing my first page using CSS3, and I'm running into a snag. I used this question and answer to create a neat looking background for the body of my site. This worked fine until I added a content class. This caused the CSS gradient to not quite reach the end of the page (scroll down to see the effect). Here is my CSS:
html{
height: 100%
}
body {
background: #c5deea; /* old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
#content{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5%;
margin-top: 2%;
margin-bottom: 2%;
width: 50%;
}
h1, h2, h3 {
color: #066dab;
}
Can anyone tell me what has gone wrong, and how to fix it? I should note that I am very new to CSS, let alone CSS3; so, any insights are appreciated
Do it like this instead:
Live Demo
I neatened the way you were setting height: 100%.
I took the margin off #content.
To compensate for the lost margin, I added an extra wrapper element and gave it padding: 2%.