Category "css"

Add animation to alternating horizontal panes [duplicate]

I have a working snippet for two horizontal panes that alternate when clicking on the splitter. I need to add a simple animation to the splitt

How to align left and full-height side nav menu

I'm trying to build a sidenavigation menu for the tablet / mobile part of my website. What I can't do is get a left-alignment of the screen, an overlay and full

Change html background to image from video if on mobile

I'm currently developing a website which uses an autoplay video background, however this scales badly on mobile and only sits in the top third of the screen...

Cant access image in App.css from public/images/img-2.jpg

I am creating a react app when I want a particular section to have a background image that I have in my images folder which is inside the public folder. Accessi

Cannot resolve directory '~bootstrap'

I did npm install in terminal. I downloaded bootstrap. Currently, the codes I wrote over styles.css do not work. @import "~bootstrap/dist/css/bootstrap.min.css"

make Hamburger Nav sticky on Scroll and responsive on all mobile media queries

I am trying to make the navbar Hamburger on mobile view responsive and sticky on scroll on 320px, 375px, and 425px screen sizes. I would like to have a solution

Using CSS border-radius (rounded corners), how can we prevent the rounded corners from disappearing if the image is scaled down (max width/height)?

Consider this scenario: An image is centered both horizontally and vertically using a flex box The image has a CSS border-radius configured (rounded corners) Th

<a /> tag with a child image opens the image in new tab instead of the <a /> tag's link when clicked

I have an anchor tag <a /> with and image as a child , basically I want to create an image that works as a link .in this case the image is a youtube thumb

How do i properly position my SVG element, so its even on resizes

So heres the image of my problem. I have two SVG files, and i want them to sticky to the bottom no matter how i resize my window, and if I resize it to a mobile

How to access element from html that is stored in variable?

I have HTML that is stored in a variable. I am trying to figure out how do I access it. Fo example if I want to get element values by id or class name or apply

How do I solve a problem with a CSS file?

I am a new user and this is my first post on StackOverflow. I wanted to try to code an Infinity RGB animation using HTML and CSS and to get the work done, I fo

flexLayout div with full width

I have a form this form takes up 1/3 of the screen adjacent to the left , so ı want to this form display with full width (occupy the entire screen from lef

Tailwind css classes not showing in Storybook build

I am trying to build my storybook with tailwind css. When running build-storybook the components are rendered with the tailwind classes. Unfortunately, when I b

How do I make stacking cards with CSS and JS?

I created the effect I want below: const container = document.getElementById("container"); const boxes = document.querySelectorAll(".box"); const clearBtn =

When i click on delete button it deletes all notes after that note where i have clicked

To run this thats why i added css and html also, What i want tnat when i click on any notes delete button that note should be deleted however it deletes other n

Bootstrap with font-weight: 500 looks "normal" on Firefox

I'm using Bootstrap and setting an element to use font-weight: 500 causes it to look medium/semi-bold in Chrome but normal-weight in Firefox on Windows: Chrome:

How to "fix" image size inside card?

I have simple section with card with image and title. How can I fix image size inside the card, so it stays the same no matter what is the actual size of the or

Use PHP to populate the images and names of the images into this slideshow code

I'm struggling to create a php gallery slideshow and was hoping someone could recommend how to do this part.. The below code is taken from w3schools and works w

How to set the icons to the bottom of each card that must be present inside the card ,for my case it's overflow and crossing the some of cards?

when onclick functionality happens on the CLOSE button it generates some cards ,each card contains some icons at the bottom that needs to be fixed position(perf

how to render a JS variable into a html element

I am new to Javascript and want to be able to display a JS variable onto my page without the user going into the console as it is neater, and I find a lot of pe