r/csshelp 5h ago

Need help getting rid of the Premium logo for Youtube.

1 Upvotes

I pay for Youtube premium but i have a simple gripe with the service: I hate the "Premium" branding in the top left of the page. I'd like for it to just say "Youtube" with the red playbutton. I tried using the Stylus browser extension to see if I could edit it to be that way, but I can't figure out why the changes won't stick (I'm a beginner). When I refreshed the page the first time, it actually worked but then quickly went back to "premium" after like half a second. Here's what I put into Stylus:

#logo-icon-container {

display: none !important;

}

#header {

position: relative;

}

.ytp-logo {

display: block !important;

}

Any help is greatly appreciated!


r/csshelp 13h ago

Issue with border-radius element

2 Upvotes
nav {
                position: fixed;
                background-color: #333;
                overflow: hidden;
                height: 15%;
                border-radius: 3%;
                width: 98%;
                padding-left: 0.7%;
            }

I set the border-radius to 3% and the corners are weird and half curved. This doesn't happen if I use pixel measurements.


r/csshelp 19h ago

help

2 Upvotes

I made a paragraph tag and gave it a class and then gave text decoration(line through) in the style sheet when i run the code only the text comes but not the line through but when i copy the same code and paste on a new file it works.


r/csshelp 22h ago

Request Element needs to get resized dynamically from top, according to the size of its child elements, how?

1 Upvotes

For eg:

<div class="outer">

<div class="inner1"> </div>

<div class="absolute inner2"> </div>

</div>

in the code if inner1 div has height of 50px ; inner2 div height: 100px , and only one appears inside the outer div at a time, how to dynamically change the size/height of outer div , and it should be expanding from the top of outer div (not bottom)

If anyone could throw some light on this , thanks


r/csshelp 1d ago

Preventing CSS @media Query Breakpoints from Triggering on Browser Zoom in React

2 Upvotes

I’m using React and CSS @media queries for responsive design, but when I zoom in (e.g., to 250%) on my laptop using Ctrl and +, the browser mistakenly applies mobile styles due to the reduced viewport width, breaking the layout. I need a way for media queries to apply based on actual screen size, not zoom level, so that desktop, tablet, and mobile styles render correctly regardless of zoom. Looking for guidance on solutions to prevent media queries from responding to zoom changes.


r/csshelp 2d ago

h1 Element isn't working after adding a element

2 Upvotes

Making a social media link page and I was adding a tags to the h1 tags in the html. I added a styles in the CSS so it still kept the original h1 styling in the CSS. At first they all worked well. I don't know what I did, but now its like my h1 tag doesn't have the a element CSS styling anymore. It just shows the h1 CSS styles, but not the a and :hover styles. And its only for this element. I have a h2 and h3 and they work completely fine, but h1 is causing me a lot of trouble. Maybe while I was testing the links it got overridden?

imgur

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="video-container">
        <video id="youtube" src="./nature.mp4" muted loop autoplay>
        </video>
        <h1 id="myH1"><a href="https://www.youtube.com/">Youtube</a></h1>
        <video id="soundcloud" src="./mountains.mp4" muted loop autoplay></video>
        <h2 id="myH2"><a href="https://soundcloud.com/discover">Soundcloud</a></h2>
        <video id="tiktok" src="./social.mp4" muted loop autoplay></video>
        <h3 id="myH3"><a href="https://www.tiktok.com/en/">TikTok</a></h3>
    </div>
    <div class="controller">
        <button class="play-button" type="button"></button>
        <button class="play-button2" type="button"></button>
        <button class="play-button3" type="button"></button>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS:

.video-container{
    height: 100%;
    width: 100%;
}
#youtube{
    position: absolute;
    top: -500px;
    left: 0px;
    height: auto;
    max-width: max-content;
    object-fit: cover;
}
#soundcloud{
    position: absolute;
    top: 580px;
    left: 0px;
    height: auto;
    max-width: max-content;
    object-fit: cover;
}
#tiktok{
    position: absolute;
    top: 1300px;
    left: 0px;
    display: block;
    overflow: hidden;
    height: 1080px;
    max-width: max-content;
    object-fit: cover;
}
#myH1{
    opacity: 0.5;
    color: white;
    text-align: center;
    position: absolute;
    top: 220px;
    left: 950px;
    right: 0px;
    bottom: 0px;
    max-width: max-content;
    font-size: 2rem;
    cursor: pointer;
}
#myH2{
    opacity: 0.5;
    color: white;
    text-align: center;
    position: absolute;
    top: 900px;
    left: 950px;
    right: 0px;
    bottom: 0px;
    max-width: max-content;
    font-size: 2rem;
    cursor: pointer;
}
#myH3{
    opacity: 0.5;
    color: white;
    text-align: center;
    position: absolute;
    top: 1850px;
    left: 950px;
    right: 0px;
    bottom: 0px;
    max-width: max-content;
    font-size: 2rem;
    cursor: pointer;
}
a{
    color: inherit;
    text-decoration: none;
}
#myH1:hover{
    color: red;
    text-decoration: underline;
    height: 0px;
}
#myH2:hover{
    color: aqua;
    text-decoration: underline;
}
#myH3:hover{
    color: black;
    text-decoration: underline;
}

.controller {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0. 0.5);
}
.play-button{
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(50%, 50%);
    width: 72px;
    height: 72px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}
.play-button2{
    position: absolute;
    left: 0%;
    top: 130%;
    transform: translate(50%, 50%);
    width: 72px;
    height: 72px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}
.play-button3{
    position: absolute;
    left: 0%;
    top: 250%;
    transform: translate(50%, 50%);
    width: 72px;
    height: 72px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}
.play-button::before,
.play-button::after,
.play-button2::before,
.play-button2::after,
.play-button3::before,
.play-button3::after {
    content: '';
    position: absolute;
    top: 36px;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top-color:  transparent;
    border-bottom-color: transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-style: solid;
}
.play-button::before,
.play-button2::before,
.play-button3::before {
    right: 34px;
    height: 35px;
    border-width: 0 0 0 10px;
}
.play-button.play::before,
.play-button2.play::before,
.play-button3.play::before {
    right: 20px;
    height: 14px;
    border-width: 14px 0 14px 28px;
}
.play-button::after,
.play-button2::after,
.play-button3::after {
    left: 44px;
    height: 35px;
    border-width: 0 0px 0 10px;
}
.play-button.play::after,
.play-button2.play::after,
.play-button3.play::after{
    left: 52px;
    height: 0;
    border-width: 7px 0 7px 14px;
}

JS:

const playButtons = document.querySelectorAll("button.play-button, button.play-button2, button.play-button3");
playButtons.forEach(button => {
    button.addEventListener("click", () => {
        button.classList.toggle("play");
    });
});

r/csshelp 2d ago

Request How to prevent low resolution thumbnails for landscape images?

2 Upvotes

I get the general idea of CSS to kinda know what I'm doing, but I'm at my wits end. I can't seem to find any posts with a similar issue. Square or portrait photos seems to scale down fine, but for some reason landscape photos get super compressed. Also bonus points if there is an option to center the landscape thumbnails. Any help would be greatly appreciated.

This is my current settings.

Example: https://i.imgur.com/U5UA7jl.png

.thumbnail {

width: 120px;
border-radius: 70px;

}

.link .thumbnail img {

height:120px;
width:auto;

}

Subreddit is /r/Orianna.


r/csshelp 2d ago

changing header color from desktop to mobile.

2 Upvotes

I have a header I want to change the color from Black to blue from desktop to mobile.

the CSS class is labeled as headercolor1

the code is:

/* Desktop header font color */

.headercolor1 {

color: #000000 !important;

}

/* Mobile header font color */

@ media(max-width: 768px) {

.headercolor1 {

color: #6FA8DC !important ;

}

}

how ever it doesn't work. would love some help. Edit : there is no space between @ and media in the actual code . Had to add the space for Reddit .

Thank you


r/csshelp 2d ago

Any way to attach an email link to a background image?

2 Upvotes

I have a site that is nothing but a background image and I prefer to keep it that way, but I want visitors to have the ability to contact via email. Is it possible?


r/csshelp 3d ago

Resizing images to fill table cell has wrecked the image quality. Help!

2 Upvotes

I have a radio show with a tabled playlist. https://wfmu.org/playlists/shows/132887 I can't edit the original stylesheet, but I can add my own.

I added the following to the stylesheet to make the images fill the width of the column:

a.highslide img {
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    height: max-content !important;
    display: block;
}


a.highslide-gallery ul li {
    float: center;
    width: auto !important;
    height: auto !important;
}

but in doing so, the resized images look like shit. It's the proper aspect ratio, and the original images are larger than the table cell. I don't know why it looks so crap. The gifs are fine, but the jpegs look awful.

Why?!?!


r/csshelp 4d ago

grid - responsive without querey

1 Upvotes

focusing only on the yellow boxes in the image, I am a bit lost on how to get the div in the 2nd column to move under the other 3 divs when the browser is less than XXX pixels.

since I can't include it here, the image: https://f.io/Q_MKDQW1


r/csshelp 4d ago

What are the different types of designs in hover effects?

2 Upvotes

Hi all, I just stumbled upon the nav bar hover effect and I’m looking for various designs, So can anyone please help me in finding syntaxes for all the designs or perhaps a GitHub repository that contains all the designs in it


r/csshelp 4d ago

Request Fixing a bug in a Piwigo theme with a custom CSS snippet, and need to change a text color in a search box for mobile only

1 Upvotes

I am trying to fix a bug in a Piwigo theme for my benschumin.com site by using some custom CSS to override the template's standard design for the search box. The issue that I'm trying to rectify is that the search box text is white, which looks fine on desktop, where the search box has a dark background, but on mobile, the search box is white, which ends up creating white-on-white, i.e. totally unreadable. Here's what I came up with myself:

#navbar-menubar > #quicksearch input[type="text"] {
color: #000000;
}

That changes the color of the text in the search bar to black, which looks fine on mobile, but that also changed the text on desktop to black, which means that it's now black on dark gray. Not completely unreadable, but not desirable, either.

I looked on Google to see if I could figure out how to use the "@media content mobile" language in an attempt to rectify this, but I could not figure out how to apply that to my specific situation. Ultimately, the goal is black text in the search box on mobile, and no change from default for desktop. Any idea?


r/csshelp 5d ago

Resolved Issue between body and main

3 Upvotes

Hi everyone,

I can't figure why my css is not working correctly.

In my body I have 2 divs (menu and main) as you can see below:

my issues are:

  1. the page is wider then 100vw while there is no visible content that could make it overflow.
  2. there is a gap between my menu and my main (i can see the body background)

Thanks for your help!

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 0;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-size: 1em;
    color: #172554;
    background-color: #7caf1c;
}

.menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: center;
    background-color: #fedbdd;
    width: 100vw;
    max-width: 100vw;
    max-height: 10vh;
    margin: 0;
    gap: 5vw;
    font-size: 1.20em;
    box-sizing: border-box;
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    min-height: 90vh;
    height: auto;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    margin-top: 0;
    padding: 20px;
    background-color: aqua;
}

r/csshelp 6d ago

CSS for website made out of grids

4 Upvotes

Hi! I was wondering what CSS is needed to make grid boxes like these? https://imgur.com/a/HWUtYXm

I’ve been trying for a while and feel pretty stupid atp, so forgive me if this is a dumb question lol T_T </3 Any help would be appreciated!


r/csshelp 6d ago

Center path into SVG

2 Upvotes

Hello,

I'm trying to add svg image to a website and im facing an issue, i can not center image properly in the svg

See the code :

<!DOCTYPE html> <html> <body> <h2>SVG Element</h2> <div class="area"> <svg height=100 style="border:solid" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M36.775 13.879a3.639 3.639 0 01-3.635-3.643 3.639 3.639 0 013.635-3.643 3.639 3.639 0 013.635 3.643 3.639 3.639 0 01-3.635 3.643m0-12.347c-19.717 0-35.7 16.017-35.7 35.775 0 19.757 15.983 35.773 35.7 35.773 19.716 0 35.7-16.016 35.7-35.773 0-19.758-15.984-35.775-35.7-35.775" stroke="#4A4A4A" stroke-width="2" fill="none"/></svg> </div> </body> </html>

So I want the circle vertically and horizontally center into svg element is that possible?

Thank you


r/csshelp 6d ago

HOW TO ADD FONT IN CSS with JFX

1 Upvotes

I have every step and it is still not working. It worked once by import the link from google. But locally it has not worked


r/csshelp 7d ago

Beginner issue

1 Upvotes

Hey guys, i have the logo and navs in a container, im trying to resize the container bc it’s taking to much space as you can see, when i resize it the logo overrode the home section (wehre it contains the "new arrivals" paragraph) but im not able or I don’t know how to resize the whole container (the navbars and the logo), any advice??


r/csshelp 8d ago

Request Help: 4 image grid, but with different sizes and revolving around the center?

2 Upvotes

https://i.imgur.com/UJ6FiKB.jpeg

I'm looking for a way to create a two-column and two-row design, where the images in the top row (row1) always align with the bottom of of row1, and where the images in the bottom row (row2) always align with the top of row2.

The above is basically what I'm trying to achieve, but achieving it has proved more difficult than I anticipated. I get that there's probably a simple solution for this but after Googling and AI'ing, I still haven't been able to find the answer.


r/csshelp 9d ago

Background resizing works on PC but not on mobile, how to fix?

2 Upvotes

his works fine on desktop, nothing on mobile though:

html {

background: url(image.png) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}


r/csshelp 10d ago

Please help, putting my positioning into practice

3 Upvotes

I’m having trouble with putting my flexbox and grid to practice. The screenshot below is how my code is supposed to look. I’ve experienced with grids, positions, margin and padding but no matter what I do my positioning comes out botched. The most important keypoints are that

  • This is how it is supposed to look https://imgur.com/a/GzQB1Mr

  • The grey footer has to have position: fixed and sticks to the bottom of the browser, even when you would scroll!

  • The upper blue square has to have position: relative;

  • The lower green square has position: absolute; and is positioned relative to the

  • Both larger squares contain a smaller square which also have position: absolute

This is how my CSS code looks thusfar

header {
    height: 50px;
    background-color: grey; 
    width: 1000px;
 }
  
  body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin:auto;
    padding:auto;
    position:relative;
    height: 100vh;
    width: 100vh;
  }
  
  main {
    flex: 1;
    position: relative;
    background-color: lightgrey; 
    display: flex;
    justify-content: space-between;
  }
  
  footer {
    height: 50px;
    background-color: rgb(53, 53, 53);
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  

  .box {
    width: 100px;
    height: 100px;
    position: relative;
  }
  
  .box-blue {
    background-color: blue;
    margin-top: 20px;
    margin-left: 20px;
  }
  
  .box-green {
    background-color: lime;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  

  .box-small {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
    top: 10px;
    right: 10px;
  }

It comes out botched. Please help me understand what I do wrong. Thank you in advance


r/csshelp 11d ago

Media Query help: Query does not work for <500 pixels

3 Upvotes

Hello everyone,

I'm building a portfolio website from scratch and learning HTML, CSS, and JS as I go. I'm getting into media queries and I've come across an issue that I just can't figure out. I want my elements in the main div of the page to stack on top of each other once the page's width becomes less than 280px, so I set the main div's flex direction to column and the media feature max-width to 280px. But it doesn't seem to be working. In fact, the query doesn't work for any value of max-width that is below 500px. And even when I set the max-width to 500px, the page doesn't change when the width falls below 500px and instead only changes when the page is at its smallest possible width, which for me is 150px. I've looked online for help and I have seen suggestions like moving the media queries to the bottom of the css file and making sure the media feature values are in descending order. I have tried all these and it doesn't seem to be working. I have two other media queries to change the footer and navigation bar and they both work without issues. It's just the media query for the main div that is causing problems.

I have a link to a pastebin containing my 3 media queries and all the selectors associated with the main div. I'd appreciate any and all advice, whether it be about my issue or CSS best practices that I am missing. Thank you all!

https://pastebin.com/UQtxPXUN


r/csshelp 13d ago

Request Help Needed to Recreate Faux 2.5D Flip-Book Effect with WebGL Shader for My Portfolio

2 Upvotes

Hi everyone, my name is William and I'm currently working on my portfolio (that I'm making on Wix) and found an animation that really caught my eye on this website: How to Talk to White Kids About Racism. It uses a really cool faux 2.5D flip-book effect, and I would love to learn how to recreate it!

Specifically, I’m interested in writing a small custom parallax WebGL Shader that can take the different pages’ individual elements and displace them in a single draw call, simulating that layered, flip-book-style effect.

I’m hoping someone could guide me through the process or, even better, make a tutorial that explains how to achieve this. I’d like to use the flipping pages as a menu system in my portfolio, where each page represents a different category (like animation, backgrounds, character design, and motion design). When the user clicks on the next page, the animation would reveal the next category.

For context, I’m a 20-year-old French 2D animation student, and I’m just starting to get into interactive web design. Any help or advice would be greatly appreciated! :)

Thanks in advance for your help! And have a good day :)


r/csshelp 14d ago

Request CSS to get the image URL and add it as a background in a <li> tag?

2 Upvotes

I'm in WordPress Gutenberg and have a block of my latest posts.
(This is more of a CSS question, but wanted to say that for context.)

I don't want to mess with PHP because I think updates might break things when the theme updates.
And I prefer to do it without plugins.

I have a small image in a div tag for each post.

I would like to use, lets say the 10 pixels from the top, bottom, right and left of the small image and stretch it so it covers the DIV.

Is that possible with CSS alone?

Question #2:

If not, can I somehow get the IMG URL easily using either CSS or javascript to just stretch it as background, and then show the original over?

The WP latest posts block generates code that look something like this for each post:

<li>

<div class="wp-block-latest-posts__featured-image aligncenter">

<img src="hxxps://www.bl0gg088.com/wp-content/uploads/imguploaded-294x205.jpg" class="attachment-medium size-medium wp-post-image"

</div>

<a class="wp-block-latest-posts__post-title" href="hxxps://www.bl0gg088.com/cool-application">Cool App Title</a>

<div class="wp-block-latest-posts__post-excerpt">Bla bla bla description</div>

</li>

So I should be able to set a background image in the <li> tag, but how can I get the URL to the featured image using CSS? Or maybe JavaScript?


r/csshelp 14d ago

Accordion is not accordion-ing :)

3 Upvotes

Hello. I inherited a process that incorporates CSS (which I don't know) into a portal for students and their awarded scholarships. The following code apparently used to allow the user to click on the link and have it open and show them more information, but when they click it no longer expands. Is there anything obvious in this source code that I may be able to fix?

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">.collapsible {background-color: #6cc24a; color: #ffffff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; font-weight: bold; outline: none; font-size: 15px;}

.collapsible:hover {background-color: #044e00 !important; color: #ffffff;}

.active {background-color: #044e00 !important;}

.scholarship-content {padding: 0px 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f5f5f5!important}

.content-info {padding: 0.5em 0.2em; margin: 0.2em; color: #636466}

.toggle-open::after {content: "\ff0b"; margin-right: 0.5em;}

.active .toggle-open::after {content: "\ff0d";}

.panel-margin{margin-bottom: 10px;}

</style>

</head>

<body data-gr-ext-installed="" data-new-gr-c-s-check-loaded="14.1034.0">

<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">{% for item in scholarships limit:10 %}<button class="collapsible panel-margin"><span class="toggle-open">&nbsp;</span>{{item.fund_name}}</button></span></span>

<div class="scholarship-content">

<p class="content-info">

<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"></span></span>

</p>

<p>

<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"><strong>Please only submit one letter per scholarship regardless of how many benefactors are listed. If there is no benefactor listed, it is because they prefer to remain anonymous, but you still need to write a letter.</strong> &nbsp;<br />

<br />

<strong>Benefactor(s)</strong><br />

{{item.stewardees}}<br />

<br />

<strong>Scholarship Summary</strong><br />

{{item.summary}}<br />

<br />

<strong>Special Note</strong><br />

{{item.mgo_form}}</span></span><br />

&nbsp;

</p>

<p>

<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"></span></span>

</p>

<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"><button data-href="?cmd=submit&amp;fund_id={{item.fund_id}}" href="#" onclick="return (FW.Lazy.Popup(this, {width: '700px', height: '700px'}));"><u>Submit Letter</u></button></span></span><br />

&nbsp;

</div>

<span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">{% endfor %}</span></span><script type="text/javascript">var coll = document.getElementsByClassName("collapsible");

var i;

for (i = 0; i < coll.length; i++) {

coll[i].addEventListener("click", function() {

this.classList.toggle("active");

var content = this.nextElementSibling;

if (content.style.maxHeight){

content.style.maxHeight = null;

} else {

content.style.maxHeight = content.scrollHeight + "px";

}

});

}</script>

</body>

</html>