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.

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

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

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?

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?

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

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"

]

}

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

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

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

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?

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

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

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;

I already have some basics of css and html btw

I will help you to learn css simple techniques

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

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?

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/

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

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

Asking for r/Panathinaikos

https://youtu.be/vKEsIXqEY0w

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

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

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.

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.

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.

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?

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.

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.

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

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.

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");
    });
});

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.