/r/q?req.query.q -- Subreddit Search

18,877 Subscribers

If it was a grid , how to create vertical animations?

1 Comment

2024/12/20
17:10 UTC

How do I fix my websites rescalability?

0 Comments

2024/12/20
09:47 UTC

How would I BEM-rename my DOM structure - or is another notation better?

I've been using CSS for a long time, but I believe my biggest challenge is creating structured code. I've been a 'fan' of the BEM-notation for a few years now, but never been able to implement it well. I just finished a functional page. Now I want to refactor my CSS, because I did it proof-of-concept style and it's a big mess.

I've got two screenshots below which gives you a clear idea of the page.
DOM Structure with legenda: https://imgur.com/a/W7ImoHw
Actual page: https://imgur.com/a/47aew5p

I'm struggling with BEM because: BEM assumes a per-component structure (B), with a few smaller elements (B) inside. I've got one component, perhaps two: ProjectPlanningPage or divided into ProjectPlanningUpperTable and ProjectPlanningBottomTable, which have multiple elements. I want to have my elements name also not to be too generic, to prevent conflicting across different pages. Perhaps that's why I often want to create a BEM-structure from one entire element and nest everything inside that single class. Although I understand the idea of BEM, I'm having a hard time implementing it.

To provide some context: It's a dynamic page for scrum masters to plan their employees on specific projects by assigning days-to-work in a specific week. The upper table is the general summary, of which the 'days requested' row is editable and 'Planned' is an aggregation of the same column in the bottom table. This bottom table is simply the planning table, where the scrum master can say how many days each employee will work in a certain week on the currently opened project (in screenshot 'Project X').

0 Comments

2024/12/19
08:33 UTC

Why does my CSS animation look different on different browsers?

I’ve noticed my CSS animation works perfectly on Chrome but looks slower or inconsistent on Firefox and Safari. I’ve already checked for compatibility issues, but I can’t seem to figure out the root cause.

Are there specific tools or techniques I should try to debug this?

0 Comments

2024/12/18
07:52 UTC

Completely unfamiliar with CSS: How do I design a textbox that will return different results when you enter different words into it?

Hey there, this probably sounds incredibly stupid. I'm absolutely new to CSS, but I'm trying to write an SCP (many of which utilizes CSS) and I need this particular set-up somehow.

Basically, I need a text box. And typing different stuff in it results in different stuff being shown, like typing in "content-1" brings up "[[div class="content-1"]]" and "content-2" brings up "[[div class="content-2"]]" and replaces "[[div class="content-1"]]" and stuff like that.

Is that feasible? Has anyone done that?

Thanks.

EDIT: I know this is feasible with HTML but I cannot use HTML.

1 Comment

2024/12/15
14:28 UTC

CSS Table

https://codepen.io/fixod31478-lofiey-com/pen/yyBVwJx

The buttons should be spread across the last 3 columns, but they bunch together in the leftmost. Please could I have some help? I'm not too familiar with css tables, but I'd like my website to be fully responsive (so no <table>).

2 Comments

2024/12/15
12:13 UTC

Does CSS have to be in root folder?

Hey guys, backend guy here, first time having to write full frontend myself and I encountered an interesting problem.

Initially, I put my style.css file within a folder called visuals and then tried to include it via <link rel="stylesheet" href="visuals/style.css">

Obviously, if it worked, wouldn't be here. So I tried with /visuals and ./visuals and no luck.

Then just for fun I dragged the file out of the subfolder back into root and included simply style.css and whatdayaknow, worked. Then just as sanity check I moved it back into visuals and after confirming that visuals/style.css is not working, I did the following:

<head>
<style>
<?php include ("visuals/style.css"); ?>
</style>
</head>

And hah! Works again.

I mean, not a real problem as it can be solved multiple ways but... Why?

8 Comments

2024/12/14
23:05 UTC

Scaling multiple text boxes to occypy the maximum amount of screen real estate

Hello, I have been searching for quite a bit but haven't been able to find a greate solution to my problem. Basically I want the text inside divs to occupu the maximum amount of space inside a div and scale the font down when needed. Here's an example of how the site works now. What would be the best approach to doing this

1 Comment

2024/12/11
21:28 UTC

Prevent child container from horizontally expanding parent container.

I've spent hours trying to figure this lightbox-like CSS out. I have a DIV with an IMG that I'm scaling proportionally with max-height. I have a "caption" DIV under the image with a "previous" and "next" button and a P containing the caption text. I don't want the caption DIV to grow the parent container's width when the caption contains a lot of text. If it exeeds the size of the container cutting the text off with an ellipsis is preferred. I've been trying to do this with flexbox as that feels like the right approach, but I'm open to other options.

<div id="outer">
  <div id="pop">
    <img src="https://placehold.co/1600x1200"/>
    <div>
      <button>Left</button>
      <p>This outer "pop" container should horizontally expand to fit the image, but not beyond that. Even if this caption text area contains a lot of text it should fill it's available space and then cut the rest off with an ellipsis. Additionally, it'd be nice if the left and right butons were their "natural" size.</p>
      <button>Right</button>
    </div>
  </div>
</div>

div#outer { display: flex; justify-content: center; }
div#pop { display: flex; flex-direction: column; border: 2px solid black;  }
img { display: block; max-height: calc(100vh - 4em); }
div#pop div { display: flex; }
div#pop div p { flex-grow: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

3 Comments

2024/12/10
17:50 UTC

CSS video on button

https://youtu.be/TJgb7FkITZA?si=LCDRSy7VFkUQKJXq "Hi everyone, I just uploaded a new video on YouTube! I’d really appreciate it if you could check it out and support it with a like or a comment. Every view helps me a lot.Thank you so much! 😊" https://youtu.be/TJgb7FkITZA?si=LCDRSy7VFkUQKJXq

0 Comments

2024/12/07
01:11 UTC

Help with code cleaning

Hello to everyone! I am pretty new to coding and im building a website using HTML/CSS and very little JS. The problem is that in my code there are a lot of unnecessary code, a lot of code repetitions etc, but because there are so many lines of code I got a bit lost in fixing it.

So is there any tool, extension or software that can fix the code, maybe find the parts that are not needed and remove them or shorten the code in general?

Thanks to anyone who is willing to help.

1 Comment

2024/12/04
12:11 UTC

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

2 Comments

2024/12/04
05:52 UTC

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

3 Comments

2024/12/04
03:05 UTC

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

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.

2 Comments

2024/12/03
21:04 UTC

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

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

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

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

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

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

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

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

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

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

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?

3 Comments

2024/11/17
16:40 UTC

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

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.:

Col1	Col2	Col3	Col4
ABC	This column should take up...	ABCDEF	More_info
1234	any remaining space availab...	blahblahetc	Yadayadayada
-	while hiding any overflow o...	onetwothree	XYZ

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

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

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

Guides

Posting Guidelines

Related Subreddits

Related Resources

SUBMIT A CSS QUERY

18,877 Subscribers

If it was a grid , how to create vertical animations?

How do I fix my websites rescalability?

How would I BEM-rename my DOM structure - or is another notation better?

Why does my CSS animation look different on different browsers?

Completely unfamiliar with CSS: How do I design a textbox that will return different results when you enter different words into it?

CSS Table

Does CSS have to be in root folder?

Scaling multiple text boxes to occypy the maximum amount of screen real estate

Prevent child container from horizontally expanding parent container.

CSS video on button

Help with code cleaning

Aligning heading and paragraph text to right of image

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

My first responsive website.

Help aligning header components

Hide Text Using CSS

Need help with Old Reddit Design for /r/PTCGP

obsidian.md

Add to cart buttons uneven due to item name length

What happened to r/themes?

How to fix issues here caused by zooming

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

Trying to get a button to align right

Change height of a drop-down list

A little help needed

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

Weird links on iPhones

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

Whats a good way to learn css as a self learner

Css Hover effect code