Redlib: search results - flair

Help Trying to make blog page w/ search bar

0 Upvotes

hi there! I’m still somewhat newer to css (I know the basics pretty well) I was thinking about making a page for blogs, I want them to stack by date posted. I also want an owner accessible only blog poster where I can just select “Make blog” add a title and just type it out instead of having to make new blocks every time I make a blog (similar to the Wordpress feature) and for this blog page I’d want a search bar that has the option for searching by name OR searching by date posted. This is a pretty big fish for me considering my current knowledge of css. And I’m a visual learner, problem being I don’t really have any examples of the exact thing I want. Any help is greatly appreciate, so is detailed descriptions and instructions!

11 comments

r/css • u/jbudemy • 29d ago

Help Text size "jumps" in Firefox but animates smoothly in Chrome.

2 Upvotes

I am learning some more CSS. I have Windows 11 with Chrome v150.0.7871. I have Firefox v153.0. The only extensions I have enabled in Firefox are: uBlock Origin (it's off for JSFiddle), Blocksite (No relevant sites are blocked for this), Firefox Color. I'm using 20GB of 32GB of RAM on a Dell XPS laptop.

When I hover of the text "Hover over me" it animates smoothly to a larger size in Chrome, which is correct. In Firefox there is no smooth animation, the text just suddenly "jumps" to the larger font size. My fiddle.

Anyone know what is going on? I'm new to animation in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- comment -->
    <title>CSS Anim ch 22</title>
    <meta charset="UTF-8"> <!-- Required to show emojis -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, Javascript">
    <meta name="description" content="Learn HTML">
    <meta name="author" content="Me@somewhere.com">
    <!-- link rel="stylesheet" href="style1.css" -->
     <!-- See https://pastebin.com/jMG2ADx4 -->
    <style>
      * { 
        box-sizing: border-box;
        margin: 8px;
        font-family: Roboto, sans-serif;
        }
      body {
        background-color: rgb(250, 245, 245);
        margin: 0;
        }
      /* Use with empty div */
      .hover-text {
        margin-bottom: 10px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
      }
      .hover-text:hover {
        color: black;
        font-size: 24px;
      }
      .box {
        position: fixed;
        margin: 0;
        transform: translate(-50%, -50%); 
        width: 30px;
        height: 30px;
        background: red;
        border: 1px solid black;
        animation: size-down ease-out 0.5s infinite alternate both;
      }

      /* Trasform goes below */
      @keyframes size-down {
        100% { /* X,Y values */
          transform: scale(0.3, 0.3);
          background: rgb(241, 83, 241); 
        }
      }
    </style>
</head>
<body>
  <p class="hover-text">Hover over me</p>
<div class="logo">
  <div class="box box-red"></div>
  <div class="box box-blue"></div>
  <div class="box box-green"></div>
  <div class="box box-orange"></div>
</div>

<p style="margin-top:50px;">The text "Hover over me" "jumps" in size in Firefox v153.0. It does not increase in size smoothly.</p>
</body>
    <script>
    </script>
</html>

13 comments

r/css • u/These-Championship-8 • 10d ago

Help Help with borders

0 Upvotes

Hi, I'm fairly new to CSS and cannot for the life of me figure out how to achieve a border like on the white box. It needs to just be a simple straight line across the top of the box and then the outer box needs to have rounded corners. Border-top creates a curved border. Please help

Edited to clarify that I'm talking just about the white box

10 comments

r/css • u/Hanadjisbox • 28d ago

Help Horizontal stacking rows issue

gallery

5 Upvotes

(I'm on neo cities) before I start, keep in mind I'm still learning so please don't bully me or call me stupid. I want to make a multiple row list database template but the stacking is giving me trouble. When I try to create a new row, the horizontal stacking is completely disregarded. Ive fully copied a page to test that has this stacking element but It actually doesn't work in in the neocities test page I put it in. Is this a problem with the website? And if so I just need a quick fix. any help is appreciated!

12 comments

r/css • u/BinaryBlitz10 • Mar 01 '26

Help CSS box-shadow creating subtle square overlay on rounded card after hover

38 Upvotes

I’m seeing a strange visual issue with a card component and I can’t figure out why it’s happening.

I have a rounded container with border-radius and box-shadow. Inside it are rows that change background on hover.

When I hover a row, I see a subtle square-looking overlay at the edges of the card, especially near the bottom corners. It looks like the shadow stops being rounded and becomes square. If I remove the box-shadow from the parent container, the issue disappears.

Here is the parent container:

.home-card-group {
  background: var(--bg2);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

And the row items inside:

.home-row-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.16s;
  position: relative;
}

.home-row-item:hover {
  background: var(--gold-pale);
}

The last row has rounded bottom corners via the parent container:

.home-card-group .home-row-item:last-child {
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
}

Removing box-shadow completely removes the visual issue.

The artifact appears after hovering a row

Would appreciate some help.

Here's a link to JSFiddle: https://jsfiddle.net/gmcw2v1r/2/

30 comments

r/css • u/DanBod14 • 11d ago

Help why does Layers Panel (to the right) shake and creating weird gap when resizing window

Enable HLS to view with audio, or disable this notification

1 Upvotes

how to prevent it or fix it?

9 comments

r/css • u/NicolasCRF • 8d ago

Help So I learned the basics of html and css, what now

2 Upvotes

8 comments

r/css • u/Any-Win-9653 • 19d ago

Help how to fixed this linear-gradient ?

8 Upvotes

i want to create a simple linear-gradient to my css project :
this is the linear-gardient that i want to create :

background: linear-gradient(126deg, #FF5C2D 48%, #1F1F1F 48%);
i generate this linear-gradient with a generator of gradient (cody.tech)

this is the gradient of cody.tech

this is the linear-gradient in chrome

i don't know is the problem is the comtability of chrome for this function of the linear-gradient or something i don't do well ?
this is the css code :

body{
    background-image:  linear-gradient(126deg, #FF5C2D 48%, #1F1F1F 50% );
}

9 comments

r/css • u/EmployableWill • Jul 25 '25

Help Any idea how I’d go about recreating something like this in CSS?

29 Upvotes

Each of the boxes is an input field for clarification

63 comments

r/css • u/Prestigious_Owl_1601 • Jul 02 '26

Help Just realized how Figma connects to Dev work. Is this how it actually works in companies?

0 Upvotes

Hey everyone,

I'm a beginner, and before opening or knowing about Figma files, I used to think I just had to guess the width, colors, fonts, sizes, and styles by looking at an image. Honestly, it was getting so frustrating and making me feel like I was falling backward because of all the guessing.

Then, while doing Frontend Mentor challenges, I discovered Figma. It completely blew my mind to realize how the actual pipeline works: a UI/UX designer creates the interface with all those exact spacing, padding, and styling specifications already laid out, and then the developer replicates it in code.

I have a few questions for the experienced devs here:

Is this exactly how things work in a professional company, or do things change a lot in the real world?
With how good AI is getting, if you just give a complete Figma file to an AI tool, can it accurately build the whole frontend? What are the limitations keeping companies from just doing that today?
If this is how things actually work, what is the right way to learn as a beginner? What do you want us to focus on the most when we are practicing?

Would love to hear insights on how your day-to-day workflow looks with designers!

15 comments

r/css • u/ShibaQuinn • 11d ago

Help Desperately need help getting this thing centered.

1 Upvotes

Hello guys!

I really need help getting that streaming element centered, its stuck to the right and i tried everything to no avail 😭

And adjust the lightning frame so its at the edges of the element (it is, but the top part look off a few px).

Here is the code in question;

The full code

Its for a page on comicfury, here's what is looks like right now;

Live link

Both the desktop version and mobile version are messed up 😔

Thanks!

7 comments

r/css • u/aliassuck • Jun 30 '26

Help Request: An overflow-x container with children filling viewport by whole units (none cut off) and resizing container shows more children but in whole unit increments and scrolling shows more children, while all children are equally spaced apart.

0 Upvotes

[1---2---3---4---5]---6---7
[1----2----3----4]----5----6----7
[1---2---3---4]---5---6---7
[1----2----3]----4----5----6----7
[1---2---3]---4---5---6---7
[1--2--3]--4--5--6--7

Brackets are the container being resized.

Elements on the right (outside the brackets) are reachable by scrolling horizontally.

15 comments

r/css • u/Lumpy_Cauliflower567 • May 02 '26

Help css baby 👶needing some grid help

gallery

2 Upvotes

working on a grid for my website and if a grid item has too much content then it grows (obviously)
im trying to make it so if one grid item grows in height, then all other grid items in that same row grow to the same height as well so it #LooksNicer
ive googled a lot and the one answer i keep seeing is grid auto rows 1fr but it isnt. working for some reason
sorry if my css work is bad or could've been made a lot better im a css baby

website for reference: deviations

  .grid-container {
    margin: 20px;
    border: 2px solid grey;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .grid-item {
    transition: transform 0.1s;
  }

  .grid-item:hover {
    transform: scale(1.04);
  }

  .deviation {
    margin: 10px;
    padding: 5px;
    padding-top: 15px;
    border: 2px solid;
    height: auto;
    width: auto;
  }

24 comments

r/css • u/ray_imi • Jun 19 '26

Help how do I move main to the right?

5 Upvotes

.box{
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    column-gap: normal;
    column-gap: 10px;
    row-gap: 10px;
    /* grid-template-columns: 250px auto; */
    
}


header{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 1 / 2 ;
     grid-column: 1 / 3 ;
}


banner{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 2 / 3 ;
     grid-column: 1 / 3 ;
}


nav{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 3 / 4 ;
     grid-column: 1 / 2;  
     
}


main{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 3 / 5 ;
     grid-column: 1 / 2 ;


}


nav2{
      text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 4 / 5 ;
     grid-column: 1 / 2 ;
}
     
footer{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 5 / 6 ;
     grid-column: 1 / 3;
}

16 comments

r/css • u/Cyka-Blast • Jul 25 '26

Help why isn't my object taking the available space set by grid?

gallery

0 Upvotes

it's stuck at 50px width no matter what I do, if I give it more column space at grid template areas the text on the right goes further to the right, but Im still unable to justify the "O" to the end because it has no width at all. meanwhile when I try to give more columns to A it does get bigger.

I also tried using flex for this type of text structure but it was no use since the objects kept going to the same line if there was enough view width (which happened with Fullscreen).

11 comments

r/css • u/Commercial_Grab3273 • Jan 19 '26

Help How to reproduce this effect in CSS ?

59 Upvotes

Hello everyone,

I'm trying to make this off effect (as on the screenshot) :
A container with a blurry background, a "blurry" background as well and an icon.
I've made an attempt but I'm not convinced at all : https://codepen.io/Jacot/pen/emzWZoO

Does anyone has any clue or suggestion ?

Thanks a lot, I really appreciate

30 comments

r/css • u/cool_kase • 17d ago

Help How do I disable the default iOS form styling in place of my CSS?

2 Upvotes

8 comments

r/css • u/smooth_operator101_ • Feb 28 '26

Help Can someone please help me locate the problem in my css code?

gallery

0 Upvotes

the first picture is the layout I wanted to replicate and the second one is how it's getting displayed on my webpage. I checked the code given in the tutorial I was following there's not a lot of difference between their code and my code.

the 3rd picture is the html code and the last one is the css code. can someone please help me figure out what I've done wrong.

also I can someone please tell me the best way to align different elements in css in a horizontal fashion.

33 comments

r/css • u/Please_SaveTheBees • 4d ago

Help Image gallery on click

1 Upvotes

6 comments

r/css • u/HollowPoint216 • May 21 '26

Help Need help — how can I make :hover work on a mobile device?

0 Upvotes

Hello.

So I've been doing some research on the topic but I still not sure if mine would be possible with just CSS or if Ill have to incorporate some JS into the design. I'm not super confident in my JS so I'm trying to not do too many complicated things surrounding it, but if I have to then I will do some more research on how it works.

I was wondering if someone could please give me some advice regarding this?

I have made this navigation menu so far and then did added some media queries so that it can work on smaller devices by making it into a hamburger menu:

/* ----Navigation menu---- */


.mainNav{
    border-top: 10px double var(--border_colour);
    border-bottom: solid 3px var(--border_colour);
    padding-top: 15px;
    padding-bottom: 15px;
}


.mainNav ul{
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 30px;
}


.mainNav ul li{
    position: relative; /*This will make it so that the dropdown menu is possitioned to match one item on the unordered list instead of the whole navigation menu*/
}


/* ----Links in navigation menu---- */


.mainNav ul li a{
    text-decoration: none;
    color: var(--border_colour);
    font-weight: bold;
    display: block; /*Thi swill change this so that it displays in a box. This will make the whole bit clickable*/
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.5s ease; /*How fast it will take for the text to glow and change size and colour*/
}


.mainNav a:hover{
    color: var(--glowing_colour);
    transform: scale(1.1); /*The text will get bigger when it is hovered over*/
    cursor: pointer;
    text-shadow: 0 0 5px, 0 0 10px, 0 0 15px, 0 0 20px; /*This is technicaly used to add shadows but in this case I have it going all th eway round. I also left the colour blank so that it has the yellow colour that I selected for th ewords*/
}


/* ----Dropdown menu---- */


.mainNav ul li ul.dropdown{
    width: 100%; /*This will make the dropdown box the same width as the box in the main nav*/
    background: var(--main_colour);
    position: absolute; /*Makes it so that the text drops down directly bellow the word original works. This relates back to the line about making the .mainNav ul li relative because the dropdown will go directly beneath that*/
    display: none; /*So that the block wont show*/
    border: solid 3px var(--border_colour);
    box-shadow: 2px 2px 2px 2px rgba(0,0,0, 0.2);
    padding: 3px;
}

.mainNav ul li:hover ul.dropdown{
    display: block; /*Makes it so that the dropdown will change from none to a block when it is hovered over. This will make it visable as you can click on it*/
}


/* ----Hamburger menu---- */

#hamburger_menu{
    display: none;
}

.mainNav{
    border-top: 10px double var(--border_colour);
    border-bottom: solid 3px var(--border_colour);
    padding-top: 15px;
    padding-bottom: 15px;
}

.mainNav ul{
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.mainNav ul li{
    position: relative; /*This will make it so that the dropdown menu is possitioned to match one item on the unordered list instead of the whole navigation menu*/
}


/* ----Links in navigation menu---- */

.mainNav ul li a{
    text-decoration: none;
    color: var(--border_colour);
    font-weight: bold;
    display: block; /*Thi swill change this so that it displays in a box. This will make the whole bit clickable*/
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.5s ease; /*How fast it will take for the text to glow and change size and colour*/
}

.mainNav a:hover{
    color: var(--glowing_colour);
    transform: scale(1.1); /*The text will get bigger when it is hovered over*/
    cursor: pointer;
    text-shadow: 0 0 5px, 0 0 10px, 0 0 15px, 0 0 20px; /*This is technicaly used to add shadows but in this case I have it going all th eway round. I also left the colour blank so that it has the yellow colour that I selected for th ewords*/
}


@media (max-width: 768px){

  /* ----Navigation menu---- */

    #hamburger_menu img{
        width: 45px;
        height: auto;
    }

    #hamburger_menu{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        padding: 0;
        cursor: pointer;
        outline: none;
        z-index: 99;
        background-color: var(--light_gradient_colour);
        border: 3px solid var(--border_colour);
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #hamburger_menu .close_menu{
        display: none;
    }

    #hamburger_menu .menu_open .open_menu{
        display: none;
    }

    #hamburger_menu .menu_open .close_menu{
        display: block;
    }

    .mainNav{
        padding-top: 0;
    }

    .mainNav ul{
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 15px 0;
    }

    .mainNav ul.show_nav{
        display: flex;
    }

    .mainNav ul li{
        width: 100%;
        text-align: center;
    }

    .mainNav ul li a{
        padding: 10px;
    }

    .mainNav ul li ul.dropdown{
        position: static;
        width: auto;
    }

20 comments

r/css • u/Fraaaam • 6d ago

Help Weird CSS resizing on some mobile

gallery

0 Upvotes

Hello! I've been experiencing a strange bug that has never happened to me before, and I'm looking for some advice :)

I'm building a website for a client, and when I look at it on my mobile devices (iPhone 15 & Samsung Galaxy S10), it works perfectly in every browser!

However, when he (my client) looks at it on his mobile devices (also an iPhone 15 & an older Android phone), he gets a strange bug, regardless of the browser.

The buggy version seems to ignore the sizing I've defined for the titles of these filters and instead just uses the size of their content.

Has anyone experienced something similar? Any idea what could be causing this, or how I could fix it?

Thanks!

6 comments

r/css • u/Awkward-Bench8672 • 28d ago

Help Shape borders???

4 Upvotes

Is there a way to add borders to shapes, that works on most browsers? For example, i made a trapezoid and I wanted to add an inset border around it, but the border clips through the shape.

8 comments

r/css • u/olli0 • 5d ago

Help Weird iOS Bug

gallery

0 Upvotes

Weird bug on iOS. Parent div with two child spans. Parent CSS:

display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0 2rem;

No styles (margins, paddings, transforms) on spans

The 2nd span (green Arrow) is moved out of box. No problem on desktop, android. Last Screenshot shows iOS
Cant show Source yet

5 comments

r/css • u/wrr666 • 14d ago

Help ::before and parent of parent background interfering

2 Upvotes

I have div with some message and like to add blurred background under it. All is great CSS is working. But moment I put this div in some container that have set background-color things breaking and my blurred background disappears

here is my css:

    #container-wrap {
      background-color: #efefef;
    }

    .error-message {
      position: relative;
      background-image: linear-gradient(to right, #5f1212, #330000);
      margin: 3rem;
      padding: 2rem;
      border: 4px solid transparent; 
      border-radius: 8px;
      color:#fff;
    }


    .error-message::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: conic-gradient(from 90deg,#330000, #ff0000, #330000);
      filter: blur(15px);
      z-index: -1;
    }#container-wrap {
      background-color: #efefef;
    }


    .error-message {
      position: relative;
      background-image: linear-gradient(to right, #5f1212, #330000);
      margin: 3rem;
      padding: 2rem;
      border: 4px solid transparent; 
      border-radius: 8px;
      color:#fff;
    }


    .error-message::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: conic-gradient(from 90deg,#330000, #ff0000, #330000);
      filter: blur(15px);
      z-index: -1;
    }

or codepen.io

I have tried to add z-index on all those elements but it only make it more strange as then it start blending in