I need my design to look the same on different browsers, but I can't find out why the same code gives me different results in different browsers. elements are shrinked in Firefox while using flex-direction: column; with display: flex; #a-p-c…
I have a navigation dropdown menu within a container. The HTML and CSS code provided is meant to display a language dropdown menu. However, I'm experiencing issues where the container's width doesn't adjust according to the length of the longest…
I'm working on a web layout where I need to display a series of steps connected by a line. I've set up a flexbox layout with spheres representing each step and a line connecting them. However, there's too much space…
<div class= "ban"> <div class= "ban1"> <img src= "Images/2.jpg"> </div> <div class= "ban2"> <img src= "https://img.freepik.com/vector-premium/plantilla-banner-plant-shop_401787-228.jpg"> /div> </div> .ban{ display:flex; background: black; transition: transform 0.3s ease-in-out; width: 100%; height: 100%; } .ban >.ban1 img{ width: 15%; height: 15%; } .ban…
I have the following HTML/CSS code, whenever I toggle the display: flex in .cards-container the height of the .card div seems to shrink (when display: flex is not present) and grow (when display: flex is present). I was wondering what's…
I am working on a web project and I would like to apply a filter effect, such as background blur or brightness adjustment, to the background of a specific section. However, I want the text within this section to remain…
My goal is to make a cart. That displays items with it's attributes, name, picture etc. I got the layout as I desired. However the cart-product-quantity won't take up the whole height. I could set the .cart-product-row to relative and…
In this snippet, the inner-left element gets a new item added to it every time the Add Item button is clicked. It has a max-width of 50% of the parent width, however the flex items are being wrapped before that…
I am working on a video calling application using reactjs. LocalTile component contains video of local user and RemoteTiles is returning videos of all remote users. My desired layout is like for 3 users: ===video1=video2=== =======video3====== for 4 users: ===video1=video2===…
Need some help on why my links aren't positioned where they should be. Only the :first-child seems to be aligned where it should. * { margin: 0; padding: 0; } body { min-height: 100vh; background-image: url(images/bgimage.avif); background-size: cover; background-repeat: no-repeat;…