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?

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