/r/csshelp

Photograph via snooOG

Read the FAQ before posting a question.


Discord channel

Testing123456789101112131415

This subreddit is for help with CSS and questions only. If you only want to share your creations, please direct them to reddithax.

Guides

If you know of a guide that you feel should be listed here, message the moderators with a link.

Posting Guidelines

  1. Please make sure to provide a link to the page/sub where your code is not working as intended.
  2. Paid work requests are fine. However, be aware that any accounts deemed as spam, or fraudulent will be removed and permanently banned without exception.
  3. Remember to respect the users and the community as a whole! Discretion is key, and mods will be here to maintain the quality of the sub.

Related Subreddits

Related Resources

SUBMIT A CSS QUERY

  1.  

  1. First thingy
  2. Something else here
  3. More stuff here
  4. Another list item
  5. More stuff here
  6. Another list item

/r/csshelp

18,860 Subscribers

1

Aligning heading and paragraph text to right of image

I'm having some issues aligning text in the webpage I am making. In the biography section I want the heading text to be to the right of the image and the paragraph text to be under it and any of the paragraph text that goes below the image to wrap around the bottom of it. Same for the upcoming events section except it won't need to wrap around the bottom of the image. No matter what I have tried either the paragraph text isn't under the heading text, or the image moves above both of them and the text is just below the image. Any help would be appreciated! https://zvolmer.github.io/wdd130b/Personal%20Site/index.html

0 Comments
2024/12/04
05:52 UTC

1

My background image in My web site change position when scrolling on mobile help pls

https://matiasnavarrete117.github.io/webwiskas.github.io/index.html#

How do I fix that position changes when scrolling to the end and to the top again

1 Comment
2024/12/04
03:05 UTC

1

My first responsive website.

I am a bit confused when I do,

@media only screen and (min-device-width: 480px){} mobile
@media only screen and (min-device-width: 760px){} tablet

I have a responsive desktop version so far. Do I need to refine each element in the css file i targeted for each version? it is a lot to do. I was curious the best way to go about it.

Right now I am doing the mobile version and just resizing every element as needed

2 Comments
2024/12/03
22:07 UTC

2

Help aligning header components

Hi, having some issues with my site https://frcanotes.com, looking for some help.

Fairly noob website designer so please bear that in mind!

For the header section, I want:

  • The whole header section to be a purple box
  • The website title to be centred horizontally within said box
  • The breadcrumb navigation to lie under the title, aligned to the left
  • There be enough space for the breadcrumbs to extend rightward
  • A horizontal line <hr> under the purple box before the main content

Currently this is coded within <header> as:

 <div class="top_bar">
  <div class="logo_title">
    <p> FRCA Notes</p>
   </div>

   <div class="header_left">
    <ul class="breadcrumb">
      <li><a href="./index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
    </div>
  </div>
  <hr>

The associated CSS is:

.top_bar {
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    margin-top: 0px;
    color: #2C1951;
    background-color: #ede7f8;
}

.logo_title {
    padding: 5px;
    text-align: center;
    margin:auto;
    color: #2C1951;
    font-size: 30px;
    font-family: Verdana;
}

.header_left {
    padding:2px;
    text-align: left;
    margin:auto;
}

It's coming out extremely wonky and not at all right. Any help would be much appreciated, ta.

1 Comment
2024/12/03
21:04 UTC

2

Hide Text Using CSS

Hi Everyone.

im trying to hide some text using css code. There are 2 other parts of text on the form that i have managed to hide using the code that was give on the forum of the associated plugin,

so the text i want to hide is "Forgot Password"
on this site: https://handaprivateclients.com

i have tried this css code below, but to no avail..

.eMember_fancy_login_8 #forgot_pass {

display: none;

}

Many Thanks to anyone that can help...

4 Comments
2024/12/02
15:48 UTC

3

Need help with Old Reddit Design for /r/PTCGP

Hello,

I'm the head moderator over on /r/PTCGP - The main Pokemon TCG Pocket subreddit for the game. We're nearing 200K members, and a few thousand of them still utilize Old Reddit.

I was curious if anyone can help, or point me in the right direction of somebody who could help us create a better looking design for it. I have about zero knowledge in CSS work.

If possible, something like what /r/Hearthstone has would be great.

I don't know what we could offer besides some thanks, amd/or an honorary spot on the Mod. Team, but we can discuss more if needed. I'm new to making this kind of request, so apologies in advance.

2 Comments
2024/11/30
22:11 UTC

1

obsidian.md

this is a great obsidian css but it has a problem when you scroll down the folder colors change can any one fix it so the colors do not change when you scroll down | https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/File%20explorer%20styling%20-%20Rainbow%20folder%20background.md

0 Comments
2024/11/29
11:27 UTC

1

Add to cart buttons uneven due to item name length

::SOLVED::

Hello! I'm looking for a solution for this design issue. Is there a way to the "select options" button to always be at the same level instead of the way it is. Its not even because the description is longer on the one product. T

he link below is to an image that I included in another post about this issue. Someone responded that it can be fixed with css, but didn't offer any additional details.

I'm using wordpress, elementor and woocommerce

Can someone help me get this fixed up?

https://preview.redd.it/add-to-cart-buttons-uneven-due-to-item-name-length-v0-luu4bqdibe2e1.png?width=1068&format=png&auto=webp&s=873a51f653cea5ed092a8ca54c3e6f364b37b5c8

The address is https://bowsbyhaley.com/product-category/lots-of-curlz-dog-bows/

2 Comments
2024/11/25
05:12 UTC

2

What happened to r/themes?

I'm looking to grab a CSS theme that was out there, and it looks like r/themes closed. What happened? Any other resources I can use?

2 Comments
2024/11/24
17:23 UTC

2

How to fix issues here caused by zooming

Hi friends, ive made my site with 150% zoom on my browser, because thats what i use by default. And as soon as i saw someting was wrong i tryed to zoom back to 100% and it looks bad :D

I mainly use rem and vh / vw to position everything.
In particular im confused by whats happening with a list here, its a div (flex column) with a bunch of <a> . When im zoomed the list just gets cut off at the top.

My page Zoomed Out Alot: pasteboard (dot) co/dt3bivmrgrxg.png
My page Zoomed Normaly (aka. 150%): pasteboard (dot) co/PoTE30vFgNqD.png

The code for the list: pastebin (dot) com/4EM8zHg2

Also ... i just noticed that the border shrinks when zooming out, is this because i use rem for it. Is rem a bad measurment to use by default?

0 Comments
2024/11/23
10:57 UTC

1

Why does the logo and text on the background image change size and position when I zoom in and zoom out?

Hello, all!

I am currently trying to do a project on TOP (Sing-up Form). I realized when I zoom in and zoom out on my page, the logo and the text on the background image change their size and positions. Can you some tell me what causes this and how can I fix it?

I provide my codepen below:

https://codepen.io/albert9191/pen/OJKKvyO

video: https://streamable.com/7kxswu

4 Comments
2024/11/22
20:56 UTC

1

Trying to get a button to align right

Please help get the Request a Quote button to alight to the right.

Thanks in advance!

{

"sections": {

"cart-items": {

"type": "main-cart-items",

"settings": {

"color_scheme": "scheme-1",

"padding_top": 36,

"padding_bottom": 36

}

},

"cart-footer": {

"type": "main-cart-footer",

"blocks": {

"subtotal": {

"type": "subtotal",

"settings": {}

},

"buttons": {

"type": "buttons",

"disabled": true,

"settings": {}

},

"quick_quote_quote_button_KPEbi6": {

"type": "shopify://apps/quick-quote/blocks/quote-button/ba8168dc-3466-4dff-b544-74f8dd051310",

"settings": {

"title": "Request a Quote",

"btn_classes": "button",

"btn_width": "100",

"button_color": "#989393",

"text_color": "#ffffff",

"margin_top": 0,

"margin_bottom": 0

}

}

},

"block_order": [

"subtotal",

"buttons",

"quick_quote_quote_button_KPEbi6"

],

"settings": {

"color_scheme": "scheme-1",

"padding_top": 20,

"padding_bottom": 40

}

}

},

"order": [

"cart-items",

"cart-footer"

]

}

0 Comments
2024/11/20
17:06 UTC

2

Change height of a drop-down list

Is it possible to change the height of a drop-down list with CSS? I want to display from "Option 1" to "Option 5" and use the scroll to see the rest but I keep seeing most of items on the list

Here is my code: https://jsfiddle.net/#&togetherjs=fNfUMfOv81

1 Comment
2024/11/19
23:28 UTC

2

A little help needed

I want someone to modify the code so that the Apple logo stays fixed and does not move.

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Apple Logo</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000000; text-align: center; }
    .apple-logo {
        width: 300px;
        height: 360px;
        position: relative;
        -webkit-mask: url('img/Apple_logo_white.svg') center/contain no-repeat;
        mask: url('img/Apple_logo_white.svg') center/contain no-repeat;
        background-color: #ffffff;
        overflow: hidden;
    }

    .color-overlay {
        position: absolute;
        top: -25%;
        left: -25%;
        width: 150%;
        height: 150%;
        background: conic-gradient(#fff, #ffb3d9, #ffd1dc, #ffccf2, #d9b3ff, #b3d9ff, #fff);
        animation: rotateColors 5s infinite linear;
    }

    @keyframes rotateColors {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .welcome-text {
        font-size: 48px;
        font-weight: bold;
        background: linear-gradient(90deg, #ff7eb3, #ff758f, #a29bfe, #74b9ff);
        -webkit-background-clip: text;
        color: transparent;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        animation: typing 4s steps(21, end), blink 0.75s step-end infinite;
    }

    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

    @keyframes blink {
        50% {
            border-color: transparent;
        }
    }

</style>
</head> <body> <div class="apple-logo"> <div class="color-overlay"></div> </div> <div class="welcome-text">Welcome to Apple Store</div> </body> </html>
2 Comments
2024/11/19
11:50 UTC

6

Where can I hire someone to help me design the subreddit I mod?

I'm trying to do a redesign for a subreddit I mod but I'm really bad at it. Does anyone know where to go to hire a CSS expert for this?

2 Comments
2024/11/17
16:40 UTC

2

Weird links on iPhones

Hello,

I have some links inside paragraphs on my website and they look and work fine on PC. However, the font size is smaller on iPhone and when I tap the link, it jumps back to the normal font size, sometimes requiring two taps to follow the link. Here is the CSS for the links:

a {
    color: var(--color-link);
    display: inline-block;
    font-weight: bold;
    text-decoration: underline;
}

a:active {
    filter: brightness(var(--active-brightness));
}

a:hover {
    filter: brightness(var(--hover-brightness));
}

Here's an example in HTML:

<a href="https://example.com">link text with styling</a>

I have tried to search online and tested various suggestions, but none of them seem to work for me. Have any of you experienced this? Any ideas are very welcome :-)

3 Comments
2024/11/17
12:34 UTC

2

How to make a 100% width table with all columns fitting their content, except one column which hides its overflow

I'm sure I managed to do this once before, but I can't figure it out now. I want to make a table (yes, an actual <table> table) that fills (without overflowing) its parent in width, with all column cells tightly fitting their non-wrapping content, except for the second column which should fill any remaining width but hide any overflow of its content.

e.g.:

Col1Col2Col3Col4
ABCThis column should take up...ABCDEFMore_info
1234any remaining space availab...blahblahetcYadayadayada
-while hiding any overflow o...onetwothreeXYZ

I'm sure there's some magical combination of min-width, width, max-width that lets you do something like this. Does anyone know what I'm talking about?


Edit: the solution is:

Table: width:100%;
Flexible TD: overflow:hidden; max-width:0px;
All other TDs: width:0px;

8 Comments
2024/11/14
15:06 UTC

1

Whats a good way to learn css as a self learner

I already have some basics of css and html btw

2 Comments
2024/11/14
00:14 UTC

3

Css Hover effect code

I will help you to learn css simple techniques

https://youtube.com/shorts/QQ2-3PtXOsg?si=TkS1VfsgylfyZ9go

0 Comments
2024/11/13
16:51 UTC

1

Interdependent variable visual, interactive function: like graph, gauges or similar

Greetings & Questions:

What would a graph or function be with the following be called?

  1. I need at least 5 to 10 different guages or graph lines where they are all linked.

  2. If I change, say, 1 of them, the others will change in opposite or stay close to the same chance as the 1 variably changed item.WHat kind of function would this be called?

  3. a system of interdependent gauges or variables that react dynamically to changes in each other, possibly like a correlated multi-variable function or a linked dataset with conditional dependencies. 

Does anyone know if there exists free code online somewhere, like on codepen, that would allow me to download and modify the above functionality?

0 Comments
2024/11/12
21:58 UTC

2

Position element next to group of centered elements without the group moving from the center

I am trying to center with Flexbox a group of elements (all elements except the "Reset" button) in a div. Then I want to add the Reset button right next to this centered group of elements in the same line, but without the group to adjust their position with Flexbox, they have to stay centered. So basically the group is centered but the reset button is right next to those elements. I am looking for an efficient and most importantly simple solution.

Code:

https://jsfiddle.net/3xmf6cz8/

1 Comment
2024/11/05
01:51 UTC

2

Need help with responsive

Hello! I am a beginner and I have been assigned to do this as a project I already have the code (HTML and CSS only) but making it responsive is out of my skillset. I am in no rush either. Please dm me if you have experience in this matter and don’t charge for helping.

https://codepen.io/stringybean/pen/eYqjxjx

8 Comments
2024/11/04
18:08 UTC

1

Is there a way to remove this dash from the user flairs? (image in text body)

https://i.imgur.com/fuCSex7.png

Asking for r/Panathinaikos

0 Comments
2024/11/03
15:28 UTC

2

Learn frontend development by using Tailwind CSS to build a landing page - Part 1 - The Navbar

0 Comments
2024/11/03
04:56 UTC

2

Why is my subreddit's banner cut-off? r/TatsuroYamashita

Why does my subreddit's banner cut off? https://old.reddit.com/r/TatsuroYamashita/

The stylesheet:
header { background-image : url(%%TYJPEG2%%); }

0 Comments
2024/11/02
18:34 UTC

2

help with userstyle

I am trying to get a userstyle working, very simple (I think so but I am not even begginer with css), the userstyle is here https://greasyfork.org/en/scripts/497520-duckduckgo-ai-chat-responsive-customizations the issue i have is , the left side panel does hide, but the rest of the page doesnot get wide, I have tried changing properties for .U6SIOwl59r4JrXnL_Bic, .PSL9z2mGqO2kEMN_ZOJl,..kOMSj8TE0LBty6yatos7,.evMEChInEtheZC5gfFqi but since i actually dont really know how they work, its just like random modifications that dont do anything (except probably moveit left or right or dissapear the content)

this is the part that works: javascript: (function () { var section = document.querySelector('.cuhMRlbsijSWeq8UtkYx'); var div = document.querySelector('.zOYb8r74bS2EZVcmDp2w'); if (section) { section.classList.toggle('hidden'); section.style.transition = 'transform 0.3s ease'; section.style.transform = section.classList.contains('hidden') ? 'translateX(-100%)' : 'translateX(0)'; } })();

the other part must be something (i believe) changing some of the .U6SIOwl59r4JrXnL_Bic, .PSL9z2mGqO2kEMN_ZOJl,..kOMSj8TE0LBty6yatos7,.evMEChInEtheZC5gfFqi attributes, but cant find what so far.

0 Comments
2024/11/02
00:55 UTC

2

Page layout help

I am using WordPress to make a site. Right now the header, content block, and footer are one right after another on the page, i.e. a ton of space after the footer. How do I get these to responsively fill the whole page? I've tried to use position absolute on the footer but then it covers the content when the screen is too small.

1 Comment
2024/11/01
19:29 UTC

5

How can I adjust my CSS layout so that it's consistent on all devices?

r/csshelp r/html_css r/css

I've been working on this website for almost 5 months now, it's finally finished. However, there's one final nitpick that I just haven't been able to figure out. The way I have the layout set up currently, it fits perfectly on laptop and mobile screens, and overlaps or overflows in a controlled tasteful way on in-app mobile browser windows or screens with strange aspect ratios. However, on larger monitors, the main control panel is too small in the top left corner. Zooming to 125% makes it fit perfect. I've tried multiple different approaches but they all come with more issues than the current layout. I also removed the meta viewport tag because it caused the website to start zoomed in on mobile. Does anyone know a solution? Here's a Pastebin link for the CSS with the base64 data removed and here's a link to the HT3 for reference.

4 Comments
2024/11/01
02:27 UTC

2

IOS vs Android menus

Not sure if this is the right sub, please direct me in the right direction if not.

I help maintain an older WordPress site, and have noticed the responsive pulldown menus look pretty good on IOS, but absolute garbage on Android.

Where do I start looking for where to tweak? Is it fixable in the CSS?

Should I just say screw it and install a plugin that might magically solve this?

4 Comments
2024/11/01
01:28 UTC

3

Issue with border-radius element

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.

4 Comments
2024/10/29
17:50 UTC

Back To Top