The (w3schools lol) documentation stated you can customize your scrollbar like this:

/* width */ ::-webkit-scrollbar { width: 10px; }

/* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; }

/* Handle */ ::-webkit-scrollbar-thumb { background: #888; }

/* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; }

But for me it doesn't do anything (Sorry that it's no codeblock, reddit is bugged)

https://reddit.com/link/1e7u69p/video/cfsbyn5qzndd1/player

I want to implement this font animation in my project but I don't know what animation is this since I'm not a CSS master please someone can help me in that

Thanks in advance

Each image is rendered at 50% of its 1050 x 600px actual size within an HTML table of unspecified width (see HTML code). I would like all table images to be horizontally separated only by the cellspacing amount, with the rest of the whitespace shifed to the right. Instead, images are separated based on the entire table width.

• style="border-collapse:collapse;" CSS didn't remove rightmost space.
• style="margin:0; padding:0;" CSS didn't remove rightmost space.

Any spacing tips appreciated. Thanks.

• https://i.imgur.com/hzW4aJN.jpg
• HTML code: https://pastebin.com/wmATk1Ze

Hi, CSS novice here. I've been building a website for myself which has an infinitely scrolling marquee on it. I originally had the text in courier new, which worked fine, but I recently decided to switch a different font I found online (it's a pixelated version of times new roman but i called it 'Times-New-Roman' for the font family). When I did this, I began having issues on mobile display. What's happening is that a segment of text on the left side of the screen will periodically get deleted, replaced with empty space. Each time this occurs, more text is removed, until the entire marquee is deleted. Keep in mind, text will keep scrolling in and replacing it, so its not like the animation stops. Its not removed by letter either, its by pixel, because sometimes half a letter will end up cut off. I thought if I made the text monospaced that would fix things, but it has not, so at this point I'm a little lost. If anyone has any tips, it would be greatly appreciated!! Anyway, here is the relevant CSS:

.marquee {
  position: absolute;
  width: 100%;
  height: 30px;
  overflow: hidden;
  background-color: #eabcff;
  white-space: nowrap;
  bottom: 0px; 
  line-height: 30px; 
  font-family: "Times-New-Roman", sans-serif; 
  font-weight: bold;
  user-select: none; 
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none;
  font-feature-settings: "liga" 0;
}

.marquee span {
  display: inline-block;
  padding-left: 0%;
  animation: marquee 90s linear infinite;
  animation-delay: 0s;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-85%);
  }
}

.marquee span:hover {
  text-decoration: underline;
}
.marquee {
  position: absolute;
  width: 100%;
  height: 30px;
  overflow: hidden;
  background-color: #eabcff;
  white-space: nowrap;
  bottom: 0px; 
  line-height: 30px; 
  font-family: "Times-New-Roman", sans-serif; 
  font-weight: bold;
  user-select: none; 
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none;
  font-feature-settings: "liga" 0;
}


.marquee span {
  display: inline-block;
  padding-left: 0%;
  animation: marquee 90s linear infinite;
  animation-delay: 0s;
}


@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-85%);
  }
}


.marquee span:hover {
  text-decoration: underline;
}

The final result I want is in this codepen and the result I am able to obtained is in this codepen.

Basically I want the cards to overlap in a fixed width, when it is overflowing its parent. And when it is not overflowing, I want them to retain the width according to aspect ratio. I have fixed the height, so width also should be constant.

You can click on each card and it will be deleted in each link. But in the second/not working link, the card becomes too big which is also a problem.

How can I solve this?

I am feeling like a crazy person that I can't figure this out. I'm working in Wordpress within the Astra theme. I wanted to add a margin and border radius to my header wrap. In "Additional CSS" I added this code:

.main-header-bar-wrap {
margin-left:10px;
margin-right: 10px;
border-radius: 10px;
overflow: hidden;
}

Worked great, however my dropdown menu is now, understandably, hidden because.. overflow.

Anywho, I cannot find a fix for this and I have lost my will to keep looking. Images for reference.

https://preview.redd.it/pqudztw01idd1.png?width=1325&format=png&auto=webp&s=a3382fcb73676f3c0b1d4927dff76fe1e9ad5a01

https://preview.redd.it/2m3hp5x01idd1.png?width=1324&format=png&auto=webp&s=b2ddda9557a58e9b753026ea5d25df97ff534800

Hey, so I'm trying to have the following hover effect.

https://preview.redd.it/42zz85qsvgdd1.png?width=438&format=png&auto=webp&s=360fb0e6191b38e1826f820a4bb7dfe0cf04fcb7

When hovering a card, room is being added to accommodate the button. WITHOUT moving the cards underneath.

I managed to achieve this effect but the entire row underneath is being moved down. I guess i'm doing something wrong with "position:".

Thanks in advance for all the help!

so, guys I was just creating a replica of an ecommerce website and the problem that has occurred in is that even if I try to add images in my code, they are not showing up on the front end that is Firefox browser.

do tell me you guys need images or screenshot of the problem

Above ^

I've started Web Dev (Non IT Background) and currently covered a lot of CSS. But I don't understand how to deal with complex things. Like placing a paragraph(with a shadow box) in an image without using Absolute and Relative ( Because they aren't responsive.). I could ChatGPT but I don't think there's any learning like that. Or copying code from Google. How do I figure things out and is it okay to copy styling at times when you can't find your way around stuff?

Set up recurring payments in your Squarespace store + use this CSS hack to alter ‘subscribe’ text.

https://ajmexperience.com/learn-posts/recurring-payments-squarespace-store

.big {
  width: 500px;
  height: 700px;
  color: #242424;
  box-shadow: 0px 0px 20px gray;

  display: grid;
  grid-template-rows: auto;
  justify-items: center;
  text-align: center;
  border-radius: 10px;
  padding: 20px;
  gap: 20px;

  .prod-title {
    font-size: 50px;
  }

  .prod-img {
    width: 350px;
    border-radius: 10px;
  }

  .prod-desc {
    font-size: 25px;
  }

  .prod-price {
    text-decoration: line-through;
    text-decoration-color: red;
  }

  .prod-price,
  .prod-new-price {
    font-size: 50px;
  }
}

.small {
  width: 300px;
  height: 325px;
  color: #242424;
  box-shadow: 0px 0px 20px gray;

  display: grid;
  grid-template-rows: auto;
  justify-items: center;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  gap: 7px;

  .prod-title {
    font-size: 25px;
  }

  .prod-img {
    width: 175px;
    border-radius: 10px;
  }

  .prod-desc {
    font-size: 15px;
  }

  .prod-price {
    text-decoration: line-through;
    text-decoration-color: red;
  }

  .prod-price,
  .prod-new-price {
    font-size: 25px;
  }
}

Edit: Thank you everyone for the prompt and informative responses! As a new and eager web developer I really appreciate it!

Hope this is the right place to ask this. If not, I'd be happy if anyone could point me in the right direction :)

To keep things short, I am trying to edit an element on a page by adding a background color to it. While I can easily do it using Firefox's element inspector, I would like for this change to be permanent.

I tried using the Stylus extension, which lets you edit a page's CSS, but the page uses scripts and by the time I get to the point where this edit is necessary, the page's html code has been altered enough that my custom Stylus script is not having any effects anymore.

Does anyone know of a way to achieve what I'm trying to do?

I want to hide the vertical scrollbar, but keep the functionality. I know it's possible, but only for all the scrollbars in the container. But in my case I want to keep the horizontal scrollbar as it is (overflow auto). Is there any way to do that or is it just not possible?

🎓Yesterday, my semester 2 results were out, and I was curious about my 1st-year CGPA. As a fun project, I created this CGPA calculator, and it turned out awesome! 🚀

Check it out:

Hi, I have a container "textbox" and I've been trying to align the text to the left side of my container.

Here's my code-

 <div className='textbox'>
        <h1 className='shoottothrill'>WHY BUMBLEBEE?</h1>
        <h1 className='shoottothrill1'>More bang for your buck</h1>
        <p1 className='shoottothrillpara'>Find deals on all kinds of drives — from the everyday to the extraordinary — complete with a better, more convenient experience versus rental car companies. Find the perfect vehicle for your budget, starting at $25 per day.</p1>
        </div>

CSS code-

.textbox
{
    position: relative;
    height:80%;
    width:70%;
    border: dashed red;
    top:15%;
    left:10%;
    display: grid;
    justify-content:left;
    
    /* padding: 2%; */
    
    
}

.shoottothrill
{
    position: relative;
    font-family: "Anton SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
    color:  #030100;
    
    
}

currently have 12 products and their images on the website but i want a hover effect of when i hover over one of the images that text pops up ontop of the image but how do i do that ? https://github.com/20oddlion/testSite.git

Hi all!

Learning Sass in class this week and I went ahead and watched some videos on it beforehand to prep.

I was watching a video by developedbyed and understood everything up until he added parameters (variables) within a mixin.

For example:

@mixin flexcenter($direction, $background) (first line in the pic).

I understand how those variables pass through the code to give you different styles depending on what you declare for the variables. I do know a bit of Python and JavaScript so declaring variables, passing them and such aren’t new to me.

I just can’t wrap my head around why he added the variables in the parentheses with the mixin. Maybe I’m overthinking it.

TIA!

Ps, I love sass!??!?!!!!!!!

I've seen that trick at least twice

(where you need to align your text to a list image for example)

Like that : <li> <span position:relative;bottom:10> Text </span> </li>

Can you recall where did you use such a workaround ?

This code makes a background image appear on the back of the screen and stay fixed there. (This is what I want) I mostly copied the code from stack overflow and would like to understand how it works. Specifically I am wondering what the "top", "left", and "right" does and why the screen goes white if I remove one of them.

Screenshot: https://drive.google.com/file/d/1CdCux8YbLlo3MRk2zx7YC9Y3ZfWiwUaH/view?usp=sharing

body:after{
  content:"";
  position:fixed; /* stretch a fixed position to the whole screen */
  top:0;
  height:100vh; /* fix for mobile browser address bar appearing disappearing */
  left:0;
  right:0;
  z-index:-1; /* needed to keep in the background */
  background-image: linear-gradient(rgba(0, 30, 0, .5), rgba(0, 30, 0, .5)), url("https://cdn.outsideonline.com/wp-content/uploads/2021/06/15/camping_fun_h.jpg");
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

I'm creating a list app that displays the images you've selected. I'm trying to get it to where the image you select will overlay the entire box AND its dotted border. I can't seem to figure out how to do this, though; the image either stays within the dotted box or it'll randomly overlay only the top/bottom lines if its a tall image.

Any tips?

Feel free to look at the code I've got, note that "tour_numbers" is the class of the parent elements/numbered boxes and "saved_img" is the class of the child elements (i.e. the images being appended to each number).

https://preview.redd.it/q79icwem4xcd1.png?width=252&format=png&auto=webp&s=4ebac0a1578b0bda95b8d873e25558e2c2654c93

https://preview.redd.it/zt2gjcem4xcd1.png?width=557&format=png&auto=webp&s=04c95ce0149ae70c4a73f6bd49705395c0b42c89

i am not a professional, but i designed a fair amount with wordpress 10+ years ago. i'm definitely rusty. i'm stuck on what seems like a silly css problem, but i just am not familiar enough nowadays to troubleshoot this one on my own.

i'm using "the events calendar" plugin, but the current month button and text alongside it are not readable no matter what i've tried. i'm sure i'm missing something so simple, so i would appreciate any advice!!

https://culturalautismstudiesatyale.space/events/

when clicking an event, the event description and "<< All Events" button needs to be changed to a lighter color as well.

here's what i have in the custom CSS file:

/* Targeting event titles */
.tribe-events .tribe-events-event-title a {
    color: #ffffff !important;
}

/* Targeting event dates */
.tribe-events .tribe-events-event-date-start {
    color: #ffffff !important;
}

/* Targeting event containers */
.tribe-events .tribe-events-event {
    background-color: #333333 !important;
}

/* Targeting venue details */
.tribe-events .tribe-events-venue-details {
    color: #ffffff !important;
}

/* Targeting event meta details */
.tribe-events .tribe-events-event-meta {
    color: #ffffff !important;
}

/* Targeting navigation buttons */
.tribe-events .tribe-events-sub-nav a {
    color: #ffffff !important;
    background-color: #333333 !important;
}

/* Targeting event descriptions */
.tribe-events .tribe-events-content {
    color: #ffffff !important;
}

/* Targeting all links in event listings */
.tribe-events a {
    color: #ffffff !important;
}

/* Targeting calendar day numbers */
.tribe-events-calendar-month__day-number {
    color: #ffffff !important;
}

/* Targeting events in calendar view */
.tribe-events-calendar-month__calendar-event-title {
    color: #ffffff !important;
}

/* Targeting event tooltips */
.tribe-events-tooltip h3,
.tribe-events-tooltip p {
    color: #ffffff !important;
}

EDIT: Solved. Thank you sheriffderek and kynovardy.

I'm wondering if it is possible to produce my desired here result with CSS. Take the following HTML snippet:

<div>
    <h1>Heading</h1>
</div>
<div>
    <h2>Subheading</h2>
</div>

Would it be possible to select the h2 element only when it is preceded by a div whose immediate child is an h1? Obviously the below CSS snippet is invalid (can't nest pseudo-selectors as far as I know), but I hope it illustrates what I am trying to shoot for:

// or maybe `div:has(+ div > h1) > h2` if they are synonymous (albeit still invalid)
div:has(+ div:has(> h1)) > h2 {
    color: red;
}

Any help would be really appreciated. Thank you :)

Newton's Cradle Animation: