I noticed that I have a lot of repeated code in my divs and that some people had:
* {
padding: 0;
border: 0;
margin: 0;
}
That effects all elements including headings and paragraphs so I tried:
div.* {
position: relative;
padding: 0;
border: 0;
margin: 0;
}
Which is not working right and is showing up as a Parse Error in the w3c validator.
What is the correct wildcard for a class?
Are you trying to match any div element that has a class, whatever that class may be?
If so, use an attribute selector:
div[class] {
position: relative;
padding: 0;
border: 0;
margin: 0;
}
Or are you just looking for any div element?
Then simply use div:
div {
position: relative;
padding: 0;
border: 0;
margin: 0;
}
Related
Currently I have this html in pug and vue code which is working fine. Basically the arrow width is dynamic.
.abc--step-bar: .abc--step-bar-color(:style="`width: ${progressBar.width}`")
.row
.col(v-for="(item, i) in progressItems")
.abc--step-item(:class="{ 'is__done': progressBar.index > i, 'is__current': progressBar.index === i }")
span.abc--step-dot
This is my css using SCSS
.abc--step-bar {
position: absolute;
top: 0;
left: 16.7%;
right: 16.7%;
height: 3px;
background: #e8e8e8;
}
.abc--step-bar-color {
background: #28A745;
position: absolute;
top: 0; bottom: 0; left: 0;
&:after {
color: #28A745;
content: url("../../assets/images/arrow.png");;
display: inline-block !important;
width: 0;
height: 0;
position: absolute;
right: 6px;
top: -6px;
}
}
.abc--step-dot {
display: inline-block;
width: 15px;
border-radius: 50%;
height: 15px;
background: #e8e8e8;
border: 5px solid #e8e8e8;
position: relative;
top: -7px;
.is__done &,
.is__current & {
border: 5px solid #28A745;
//background: #28A745;
}
}
I use the image for the arrow head.
I do not know how I can hide the arrow head with certain logic using Vuejs. i.e. when the progressBar.index equals 1. My arrow head is at after Pseudo-element.
I tried to put the similar example in my codepen.
https://codepen.io/steve-ngai-chee-weng/pen/xxXmRer
Use a Vue-conditional CSS class hide-arrow that hides it. JS cannot access pseudo elements directly.
.abc--step-bar-color.hide-arrow::after { content: ""; }
Please note that :after is very old CSS 2.1 syntax. In CSS 3 pseudo elements must be prefixed with ::.
This question already has answers here:
CSS scoped custom property ignored when used to calculate variable in outer scope
(2 answers)
Closed 1 year ago.
I have the following CSS
:root {
--primary: #1776BF;
--header-background-color: var(--primary);
}
header {
--primary: #EA5742;
}
header {
position: fixed;
top: 0;
height: 60px;
left: 0;
right: 0;
background-color: var(--header-background-color); //Expecting it to be #EA5742 but it is still #1776BF
}
As far as I have researched, CSS Variable is not meant to be for this type of case. But still, Is there any way to achieve the expected behavior as I mentioned in the comment line of the above code snippet.
If you want --header-background-color to update is value for header, then you'll have to redeclare that variable too. Just try re-adding --header-background-color: var(--primary); below your second --primary declaration and it will work.
:root {
--primary: #1776BF;
--header-background-color: var(--primary);
}
header {
--primary: #EA5742;
--header-background-color: var(--primary); /* you need to redeclare this variable so that it takes the newly assigned primary value */
}
header {
position: fixed;
top: 0;
height: 60px;
left: 0;
right: 0;
background-color: var(--header-background-color);
}
div { /* this is just an example so you can check the global variable works well too */
position: fixed;
top: 60px;
height: 60px;
left: 0;
right: 0;
background-color: var(--header-background-color);
}
<header>Test</header>
<div>Test</div>
You're right, as var(--xxx) is just replaced by it's value at this time. But why don't you simplify your problematic this way ?
:root {
--primary: #1776BF;
}
body {
background-color: var(--primary);
}
header, anotherelement, yetanotherelement, .aclass {
--primary: #EA5742;
}
header {
position: fixed;
top: 0;
height: 60px;
left: 0;
right: 0;
background-color: var(--primary);
}
<header>test</header>
I have a container div I'm using to create a speech bubble pointing to the right like this:
.container {
width: 90%;
height: auto;
padding: 10px;
position: relative;
border-radius: .4em;
}
.container:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-left-color: #ffffff;
border-right: 0;
border-top: 0;
margin-top: -0.406em;
margin-right: -0.812em;
}
When the screen is smaller than 700px, I need the following CSS to apply instead, which creates a pointer facing down instead of right:
.container:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}
This is how I'm trying to accomplish this, but the speech bubble doesn't seem to react.
#media(max-width:700px) {
.container:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}
}
If I apply that code directly to .container:after outside of the media query it displays perfectly, but I can't seem to use media query to switch between the two types of speech bubbles. I'm guessing this is a syntax error, do I need to target the div ID instead of the class? The ID is chat_bubble, and here's a code pen.
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
Your media query is working just fine, the "problem" with your code is that your default styling (Outside of media query) is also applying to the part that's within media query, so under 700px viewport, your :after element has both top: 50%, as well as bottom: 0 properties, same goes for left and right properties, which is why you don't get to see your speech bubble triangle, you can fix this by setting top and right properties to unset for example. otherwise, another solution is to create another media query that will apply 700 pixels and upwards and have your default pseudo element styling
`#media(min-width:700px) {
...
}`
so that your element properties don't "overlap" each other.
The div containing the CF7 is hidden until the user click on an icon, then the icon it's replaced with one with another color in the right bottom corner of the form, so Im using a fixed div for that. The problem is that when an error/success message appears the elements move outside of the form (and of the viewport), I need the form to expand in order to see all the elements or a solution for that.
My CF7
My CF7 after an error/success message
My relevant code:
/*Div for the CF7*/
#div-mail {
display: none;
position: fixed;
bottom: 4%;
right: 3%;
}
.wpcf7-form {
margin: 30px 30px 30px 30px;
width: 350px;
height: 286px;
}
/*First icon*/
#img-mail {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
}
/*second icon*/
#img-mail-active {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
display: none;
z-index: 1;
}
you need to change the height with min-height like this :
.wpcf7-form {
margin: 30px 30px 30px 30px;
width: 350px;
min-height: 286px;
}
I had to deal with something like this recently. Basically, I wrote a function to adjust the height of my form based on the invalid trigger.
$(".wpcf7").on('wpcf7:invalid', function(event){
adjustHeight();
});
For the adjustHeight() function, I did something like this for wider screens.
function adjustHeight() {
if ($(window).width() > 640){
if ($('body').find('.wpcf7-response-output').hasClass('wpcf7-validation-errors')){
$('body').find('.contact-container').css('height', '2500px');
} else {
$('body').find('.contact-container').css('height', '2200px');
}
}
}
Not the most elegant solution, but it worked.
I would like to change the videojs v5 controls layout in order to make a full width progress bar, on top of the vjs-control-bar area, similar to the pre-v5 player skin.
Here is the v5 skin:
And here is the pre-v5 skin. Notice the full width progress bar:
How should I proceed? Is it necessary to modify the component structure tree within the ProgressControl component or can it be done using CSS only, with the existing ProgressControl component?
I noticed that I can put it on top by changing the vjs-progress-control display CSS property from flex to block, initial or inline but I can't set the width to 100% (other ProgressControl components width are still considered). I assume it is because the vjs-progress-control is still in the flex flow of the container.
EDIT
I made some progress. I can achieve the desired effect by using the following CSS:
.vjs-progress-control {
position: absolute;
bottom: 26px; /* The height of the ControlBar minus 4px. */
left: 0;
right: 0;
width: 100%;
height: 10px; /* the height must be reduced from 30 to 10px in order to allow the buttons below (e.g. play) to be pushed */
}
.vjs-progress-holder {/* needed to have a real 100% width display. */
margin-left: 0px;
margin-right: 0px;
}
Unless one of you find a way to make it better, I will post this edit as accepted answer when it will be allowed.
DEMO
.vjs-fluid {
overflow: hidden;
}
.vjs-control-bar {
display: block;
}
.vjs-control {
position: absolute;
}
.vjs-progress-control {
bottom: 28px; left: 0;
height: 10px;
width: 100%;
}
.vjs-progress-holder {
position: absolute;
left: 0; margin: 0;
height: 8px; width: 100%;
}
.vjs-play-progress,
.vjs-load-progress {
height: 8px;
}
.vjs-play-progress:before {
font-size: 12px; top: -2px;
text-shadow: 0 0 2px black
}
.vjs-current-time {
display: block;
left: 35px;
}
.vjs-time-divider {
position: absolute;
display: block;
left: 70px;
}
.vjs-remaining-time {
display: none;
}
.vjs-duration {
display: block;
left: 70px;
}
.vjs-volume-menu-button {
position: absolute;
bottom: 0; right: 55px;
}
.vjs-playback-rate {
position: absolute;
bottom: 0; right: 28px;
}
.vjs-fullscreen-control {
position: absolute;
bottom: 0; right: 0;
}
There's still need to style the subtitles, captions and chapter buttons
.video-js .vjs-progress-control {
position:absolute;
width: 100%;
top:-.3em;
height:3px;
/* deal with resulting gap between progress control and control bar that
is the result of the attempt to keep things "clickable" on the controls */
background-color: #2B333F;
background-color: rgba(43, 51, 63, 0.7);
}
.video-js .vjs-progress-holder {
position:absolute;
margin:0px;
top:0%;
width:100%;
}
This seemed to get rid of the problems I had across other browsers with the :hover styling inherited from video.js. More masterful css developers might be able to make the expansion a bottom-to-top expansion, negating the need for the fancy footwork around the position of the progress control and the color.
Here is a minimal custom skin (in scss) that shows a full-width progress bar above the rest of the controls. This works with video.js 5.19.2
.video-js.vjs-custom-skin {
.vjs-custom-control-spacer {
display: flex;
flex: 1 1 auto;
}
.vjs-time-divider {
display: inherit;
}
.vjs-current-time {
margin-left: 1em;
}
.vjs-current-time, .vjs-duration {
display: inherit;
padding: 0;
}
.vjs-remaining-time {
display: none;
}
.vjs-play-progress:before {
display: none;
}
.vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: .5em;
top: -.5em;
&:hover {
height: 1.5em;
top: -1.5em;
}
}
.vjs-progress-holder {
margin: 0;
height: 100%;
}
}