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?

Hi coders!

Please bare with me as I'm only at an extreme beginner level of html and css and I want to learn so much, maybe tooo much that I haven't learned yet. Currently I'm hyperfixating on a design I've made through figma but I don't have the knowledge nur tools yet to translate it in VSC. The last training I've had was positioning and border radius, and even in that aspect I'm still lacking

• Reference picture of what it should look like https://imgur.com/a/sleek-MNRcK1n

• The current code https://codepen.io/malizeryn/pen/LYwmojZ

As you can see, there's a lot of inconsistencies between the two designs. For the life of me, I cannot get the header to be in the middle of the page. Then, the final and hardest part is getting a picture right under the header in which the text is written. I've tried several codes, but it would always come out looking botched so I took the picture away. Not the whole background has to be filled up by the picture (which is marked assets/one.jpg) as below this part, there's gonna be a whole lot more pictures. I just need the right tools first before I continue. Thank you so much in advance!

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!

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.

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

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?

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?!?!

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

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?

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

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

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!

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

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 :

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

Thank you

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

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.

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;

}

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

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

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

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?

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

 

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

 

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

I'm working on a subreddit and I wanna know how to put a gradient user flair with 2 colors

I am too tech illiterate to utilize CSS. Can this post in February 2014 be resolved more swimmingly, without CSS?

when you click submit link, there is text already in the title box, and a message already in the text box that disappears as you add text.

r/FullLengthFilms and r/MiniSwap prefill title. r/24HourSupport prefills text box.