Check out this codepen here on codepen where the h4 tag is not displaying fully above the pseudo element. I've attempted to apply a pseudo-selector, but so far nothing has been effective. Am I missing something here?
Any assistance would be greatly appreciated.
Feel free to review the codepen link provided below and let me know if it addresses your needs:
https://codepen.io/shakcho/pen/eaYVdm
.card--blue {
position: relative;
width: 70%;
height: 100%;
.header{
position: absolute;
z-index: 1;
}
&::after {
display: block;
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: $color-3;
-webkit-clip-path: polygon(0 0, 46% 0, 81% 100%, 0% 100%);
clip-path: polygon(0 0, 46% 0, 81% 100%, 0% 100%);
}
}
I am facing an issue with the title div setup where the red background is not applied when only the leftmost div has content. Despite the 'title' div having content, the background remains white. Can anyone suggest why this might be happening? H ...
I'm attempting to fit these divs together like a jigsaw puzzle. My goal is to position div 4 between div 1 and 3. Currently, div 4 starts below div 3. What would be the solution to make the divs seamlessly fit into each other? <div style='ove ...
Currently, I am working on creating a tab positioned on the right side, as illustrated in the image below: https://i.sstatic.net/QGTEB.png The desired width for the tab on the right is only 25px. To achieve this layout, I am utilizing flexbox for the cont ...
Imagine a scenario where hovering over any row within group 1 changes the color of all rows within that same group. Now, extend this concept to apply to an unlimited number of groups, denoted by N. Let's consider having 300 groups, each consisting of ...
I have implemented a standard Bootstrap carousel in my project: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"> ...
Here is a screenshot of my issue: https://i.stack.imgur.com/duhzn.png Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to anothe ...
I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less. I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies s ...
I have a responsive photo grid built within a mobile app. I want to display three images across the screen with equal spacing between them. All the images are squares. Unfortunately, using percentages for each image's width and height is not possible ...
After finding out a peculiar phenomenon related to copy and paste, I decided to share it. If you head over to the Diablo 3 website () and scroll down to the bottom of the page, you will notice: ©2012 Blizzard Entertainment, Inc. All rights reserved A ...
Is it possible to add text on top of an image with a background, such as the example shown below? <div id="slider" class="nivoSlider"> <img src="images/slide1.jpg"/> </div> ...
Click here for the image, I am trying to incorporate the Bootstrap caret class into my select dropdown menu. .select_menu{ font-size: 12px; outline: none; border: thin #ddd solid; -webkit-appearance: none; -moz-appearance: none; appearance: ...
I am aiming to have my mail icon centered at the bottom of my page. I initially used <div class=section4> with a position: relative and applied position:absolute to my #mailicon. This successfully placed the icon at the bottom of my div, but it now c ...
As I delve into the world of HTML and CSS as a relative beginner, I've been following tutorials on w3schools while also trying out my own experiments. One obstacle I encountered early on involved the code below: <!DOCTYPE html> <html> ...
Let me explain, I have a form that includes a span and an input: <form onSubmit={e => handleSubmit(e)}> <Box className='form_box'> <span> <a href="/cd ...
Having trouble with CSS in my Django template, My settings.py looks like this: BASE_DIR = os.path.abspath(os.path.dirname(__file__) + '/') STATIC_URL = BASE_DIR + '/static/' I have a folder called "static/css/home_css.css" in my path ...
I am currently using a GIF as a background image, but I would like it to show a static image until the GIF is fully loaded and ready to play. After reading several similar discussions, I understand that you can manipulate elements with JavaScript once the ...
I'm curious to understand why setting a height value for the first flex-item in the example below results in an increase in the height of the first row. It would be helpful to determine how to calculate the height of a row, especially when the height ...
I have developed a hidden pop-up box that becomes visible when targeted, with its opacity increasing to one. I am aiming for the pop-up to appear if the user is identified as a "firstTimeUser," a status saved in a PHP $_SESSION variable. However, I am stru ...
I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...
Is there a way to optimize rendering on a website by only displaying elements on the screen and rendering others when they are in view? Similar to 3D culling, but for a website ^.^ [update] Is it not feasible to achieve this effect? [update2] I experim ...