css

  1. P

    Animation breaks blocks alignment

    My problem is visible in the snippet below. My animation works fine, but it destroyrs items alignment here. If you remove the animation from it, you will see that the elements are stick together, creating a marker together. However if I add a simple moving animation, it breaks woefully. What...
  2. B

    Srcset only loads largest image

    I have this image tag with a few different srcs and it's only loading the one. I feel like I followed the directions, but it's only loading the 600px width image (w_600 image). <img srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w...
  3. A

    Can I crossfade divs on click of a nav button using only CSS?

    I have a navigation (sort of navigation) which have three buttons. My goal is that when I click a button on the navigation, the divs fade rather than there being a hard transition (which is what I've got going on currently). I want it to look like the images are crossfading when you click on...
  4. S

    CSS - width and maximised windows

    I have a bit of CSS which displays data in 4, 2 or 1 column as the window width diminishes. The relevant bit of code is... @media screen and (max-width:1900px) { .col { width: 25%; } } @media screen and (max-width:1010px) { .col { width: 50%; } }...
  5. G

    Scrollable element with flex pushing other elements out as it grows

    I'm trying to create a page with the following layout: +-------------------------------------------------------+ | | | nav | | |...
  6. P

    Vuetify.js v-select minimum height limitation?

    As you can see from below, I am trying to reduce the height of a v-select element, but it appears there's a limit to the minimum height I can set. i.e. after height = 40, further reducing the height doesn't seem to work anymore. Is there anyway to surround this limit so I can make this element...
  7. L

    Move last <li> element to bottom of container with the rest centered

    I'm trying to get my menu centered using flexbox centering in the middle of the bar while the last element is pushed to the bottom of the container. Here is my JSfiddle. I've tried with align-self flex-end with no success and li:last-child { margin-top: auto; } That aligns my the last...
  8. K

    Text Positioning all locations with position: absolute;

    I'm trying to find a solution for positioning text inside a div at all the following locations: Top Right Top Left Top Center Middle (Center) Right Middle (Center) Left Middle (Center) center Bottom Right Bottom Left Bottom Center Since i wish to be able to position text only, and i...
  9. M

    Borders and margin between thead and tbody

    I'm trying to display borders between thead and tbody plus some margins using CSS. please help. table thead { border: solid red 1px; margin-bottom: 10px; } table tbody { border: solid green 1px; } <table> <thead> <tr> <th...
  10. D

    Margin appearing on the second subsection

    I created an isolated example but can't reproduce the error here. and As you can see everything looks fine here but couldn't figure out in my actual code why a margin is pushing my second section down. I'm attaching screenshots as well. #parent { margin: 10px; } #select { display...
  11. B

    Show content on button click then hide that button

    I am using Wordpress and I have an Iframe game that I want to prevent this game from running until the button (play game) is clicked. So I want to create a div area (something like a button) when it is clicked the game will display, and that div area disappear. Here is the code that I use...
  12. I

    How to scale <div> text font size dependent on number of characters?

    I look to make a simple html + css (js if requires) with 2 div blocks of 1000px each with the parent container of 3000px. <div class="blocks"> <div class="block-a">text 1</div> <div class="block-b">text 2</div> </div> I need the div.blocks to be 3000px width and height 1000px; I need...
  13. M

    Extra space after grid cell, don't know where it is comming from

    I'm building a sample project, I have created a grid container but soon after first cell (header), it is adding twice gutter as for other rows. Here is css .container { background-color:#fff; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: [full-start] minmax(6rem, 1fr)...
  14. A

    CSS changing separate elements on hover while all of them are hovered

    I was looking for the solution over stackoverflow, but didn't find anything. I have a set of icons. By default they're grey and only 4 out of 7 are visible. When I hover on div with icons I want 7 of 7 to be visible and grey. And while hovering them, I want every separate icon, that is hovered...
  15. P

    Overflow-y scrollbar leave a gap to the margin

    I have the following code: HTML <body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0"> <div class="container-fluid h-100"> <!-- Logo --> <div class="row align-top h-100"> <div class="col-md-1 text-center my-auto"> <img...
  16. D

    Issue with 2 absolute positioned elements not staying together on scale

    I have two absolute positioned elements. One is a dot and the other is a box with just corners - both are animated. I'd like the dot to always be in the center of the cornered box that shows on hover. But the issue I'm having is when I make the browser window small the cornered box is slightly...
  17. J

    Equal column heights Bootstrap

    So, I'm trying to get into coding again through school and have been giving the task to create a 'fake' company with a website to test my programming skills. I'm using bootstrap, but I can't seem to manage to get the columns in my row have an equal height. I have the following HTML & CSS so...
  18. B

    CSS styling - how to display a person's initials or a person's image

    Using this lovely html and css as a guide, I'm able to display my initials over my photo. This is great, however, I would like to display only the initials in the event the image does not exist; if the image exist, no peron initials should be rendered. In other words, the image should overlay...
  19. N

    Vertical Linear Gradient

    I am trying to get a vertical effect for a sidebar on a page. I have tried the deg option but it still shows a horizontal line .sidebar { position: relative; display: inline-block; padding: 15px 25px; background-image: linear-gradient(90deg, #1559EC, #1559EC); color: #fff...
  20. V

    Getting a flexbox item to fill remaining space

    I'd like to create a row with two elements, the right one with a fixed width and the left filling what space remains. This seems just like what flexbox was made for, but I can't really figure out how to do it. I feel like I had it at one point, but can't replicate since. I created plunker with...
Top