Html – Want to add tag at the top left of a product card
I want to make a tag for a card on my website for a new product. My idea is to have something like this in the top left corner of the card. I am writing about this, because I need…
Css – How can I set the width of a Bootstrap 4 toast?
I have a page with a Bootstrap 4 toast where I set the toast's postion as postion: fixed. The whole toast part looks like this: <div class="container mt-5"> <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button> <div id="toastContainer" style="position: fixed; top: 1.5vw;…
Css – Problems with positioning vertical navbar
I am learning CSS and I am fed up with positioning, can somebody tell me, why vertical navbar overlaps horizontal? I want vertical to be sticky and link elements inside to be absolute to navbar, as you see i tried…
Html – How to center text at the bottom of the page with css?
I am trying to place some text at the bottom-center of an html page but it is not aligned. main { position: relative; text-align: center; max-width: 240px; margin: 0 auto; } .bottom { position:fixed; bottom:0; } <main> <div> <h1>Hello</h1> </div>…
Css – Fit a div in sibling remainging space using only flexbox
I'm currently trying to make a div fit an empty space by using only CSS and flexbox, but I can't find a way to make it work. I can't change the HTML layout, and can't use absolute positioning either. .parent…
Html – How to avoid content div overlapping a footer div inside a scrollable container
Please tell me how I can set a margin or padding to a #list element so that when the final scroll occurs, the #menu does not overlap the #list div? I know that you can set a margin bottom to…
Html – Why is position sticky not working as expected?
I'm having some problems trying to identify why in this snippet the container__item--special behaves as a sticky element <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { display: flex; overflow-x: auto; position: relative; }…
Html – I want two divs to move dynamically with one another
I have a sentenced with a solid border around it. When I the sentence, the border changes, adjusting to fit the sentence. I also have a pink circle. I would like the pink circle to be in the top right…
Html – Centre a fixed-width variable-height div horizontally so it overflows its parent
Consider this HTML: <body style="max-width: 50px; border: 1px solid black; margin: 0 auto;"> <p>This is some text</p> <div style="width: 100px; background: yellow"> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body> I want to centre the yellow box so that…
Html – Why is my website resizing different on computer and mobile?
I have been working on a website for a school project, and added code for my tables to change size. As I was coding, I often resized my browser widnow to check the sizing on mobile. It looked great! When…