/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,466 Subscribers

1

overflow-x doesn't work on mobile

even i set body's width with px it doesnt change that i can scroll through x axis. i found this on stackoverflow: https://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers but it didnt solve my problem. Even the html shows that my width is custom one that i set, scrollability on x irritates me. open to any advice and help.

0 Comments
2024/05/20
18:24 UTC

1

Need help with CSS + container background gradient overlay

0 Comments
2024/05/20
17:34 UTC

1

Has behavior of clip-path changed?

0 Comments
2024/05/20
15:40 UTC

2

I need csshelp, I'm working on my website where the mobile header is too wide for mobile

On web everything looks fine to me, but on mobile when testing it on my phone, the mobile header is too big and scrolls horizontally ... i've set the mobile header to width: 100% and it still doesn't change, half of the page is cut off on mobile...see image.

Thanks for your help!

https://i.ibb.co/K62QfPC/Screenshot-2024-05-19-211108.png

13 Comments
2024/05/20
01:12 UTC

1

How can I make the buttons to be below the text?

<!DOCTYPE html>

<html>

    <head>

        <title>ALEXGUIAS</title>

        <style type="text/css">

            body {font-family: Verdana, Geneva, Tahoma, sans-serif;
                background-color: #54545C;
                color:rgb(180, 220, 255)
                }

            header {
                border-color: rgb(255, 196, 0);
                border-radius: 10px;
                box-shadow: 0px 0px 5px 5px rgb(255, 196, 0);
                color: rgb(255, 196, 0);
                text-align: center;
                padding: 20px 0;
                font-style: italic;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                font-weight: 700;
                    }

            nav li {display: inline;
                    padding: 25px;
                    }

            a.class1 {
                    color: rgb(255, 196, 0);
                    }

            a.class1:link {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }

            a.class1:visited {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }

            a.class1:hover {
                    text-decoration: underline;
                    color: rgb(255, 196, 0);
                    }

            a.class1:active {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }

            h1 {
                    text-align: center;
                    padding-top: 30px;
                    }

            p {
                text-align: center;
                    }

            hr {
                width: 50%;
                color: rgb(180, 220, 255);
                border-top: 0.5px;
                    }

            p span {
                display: block;
                    }   

            .opciones {
                    display: flex;
                    justify-content: center;
                    flex-direction: row;
                    margin-top: 40px;
                    gap: 60px;
                    }

            fieldset {
                    border-color: #E70548;
                    height: 180px;
                    width: 300px;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    }
            
            h3 {
                padding-right: 10px;
                font-weight: bold;
            }

            button {
                background-color: #E70548;
                color: white;
                padding: 10px 50px;
                cursor: pointer;
                border: none;
                  }

</style>

</head>

<body>

    <header>

        <nav>

            <ul>

                <li><a href="PaginaPrincipal2.html" target="blank" class="class1"><img src="LOGO.png" height="15%" width="15%"></img></a></li>

                <li><a href="Noticias.html" target="blank" class="class1">NOTICIAS</a></li>

                <li><a href="Analisis.html" target="blank" class="class1">ANÁLISIS</a></li>

                <li><a href="Articulos.html" target="blank" class="class1">ARTÍCULOS</a></li>

                <li><a href="Guias.html" target="blank" class="class1">GUÍAS</a></li>

                <li><a href="Lanzamientos.html" target="blank" class="class1">PRÓXIMAMENTE</a></li>

                <li><a href="Apoyanos.html" target="blank" class="class1">APÓYANOS</a></li>

                <li><a href="Usuario.html" target="blank" class="class1">ENTRAR/CREAR CUENTA</a></li>
                
            </ul>

        </nav>

    </header>

<h1>Apoya a ALEXGUÍAS</h1>

<hr>

<p>
    
    <span>Apoya a ALEXGUÍAS para navegar por la página sin anuncios ni rastreo publicitario. </span>
   <span>Tienes opciones de pago mensual o anual. Por favor, escoje una de las dos opciones.</span>

</p>

<div class="opciones">

<fieldset>

<h3>Mensual</h3>

<p>2.5€/Mes</p>

<a href="https://www.paypal.com/es/home" target="_blank"><button type="submit">Suscribirme</button></a>

</fieldset>

<fieldset>

<h3>Anual</h3>

<p>24€/Mes</p>

<a href="https://www.paypal.com/es/home" target="_blank"><button type="submit">Suscribirme</button></a>

</fieldset>

</div>
    
</body>

</html>
1 Comment
2024/05/18
17:28 UTC

1

creating a layout of 4 images with 2 images above the other 2 images

I need help creating a CSS layout that takes my 4 images in my html:

    <div class="grid-container">
        <div class="grid-item"><img src="church1.jpg" alt="Image 1"></div>
        <div class="grid-item"><img src="church5.jpg" alt="Image 2"></div>
        <div class="grid-item"><img src="church3.jpg" alt="Image 3"></div>
        <div class="grid-item"><img src="church4.jpg" alt="Image 4"></div>
      </div>   

I want these 4 images to essentially create a square (2 images on the top, and 2 images on the bottom) with rounded corners. Every time I try to do this, the image in the top right is not the same size as the other 3 images.

This is what I have:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    grid-gap: 10px; /* Gap between grid items */
    padding-bottom: 20px;
  }
  
  .grid-item {
    width: 100%; /* Ensure each item takes full width of the column */
  }
  
  .grid-item img {
    max-width: 100%; /* Ensure images don't exceed their container width */
    height: auto; /* Maintain aspect ratio */
  }

however it is not working correctly, thanks!

1 Comment
2024/05/18
03:57 UTC

1

Were can I learn css properly

I've been learning css for a while but I suck really damn bad if it costs I don't mind I need to learn it. It sets me back in my back end any resources courses what ever ill do them

3 Comments
2024/05/17
18:03 UTC

2

can anyone here help me with custom CSS on Squarespace?

Specifically, I want the Squarespace events module to link the events to an EXTERNAL webpage, and not a Squarespace event.

I can provide more details if anyone thinks they can help me with this. I saw the same issue here, but it seems like OP couldn't figure it out.

0 Comments
2024/05/16
15:30 UTC

5

Can I embed an if statement inside of a class and href?

To be honest, I am so unfamiliar with any sort of programming or css that I don't even really know how to even form my issue into a proper question.

I have the following code below that is a drop down menu for customers who are logged into their account.

   {%- if customer -%}
                <div class="popover__inner popover__inner--no-padding">
                  <div class="popover__linklist">
                    <a class="popover__link-item" href="{{ routes.account_url }}">{{ 'customer.general.orders' | t }}</a>
                    <a class="popover__link-item" href="{{ routes.account_addresses_url }}">{{ 'customer.general.addresses' | t }}</a>                      
                    <a class="popover__link-item" href="{{ routes.account_logout_url }}" data-no-instant>{{ 'customer.general.logout' | t }}</a>
                  </div>
                </div>

I found a code online, attached below, that allows me to allow only specific registered users access. I want to be able to add this link to the drop down menu when the user clicks on their account tab.

{%  if customer.metafields.custom.wholesale_order_form != blank %}
{{ customer.metafields.custom.wholesale_order_form | metafield_tag }} 
{%  endif  %}

If I simply add this code above say the log out code line, such as below, it'll successfully add the link to the drop down menu, but none of the formatting will apply to this text/link.

 {%- if customer -%}
                    <div class="popover__inner popover__inner--no-padding">
                      <div class="popover__linklist">
                        <a class="popover__link-item" href="{{ routes.account_url }}">{{ 'customer.general.orders' | t }}</a>
                        <a class="popover__link-item" href="{{ routes.account_addresses_url }}">{{ 'customer.general.addresses' | t }}</a>
                        
                        
{%  if customer.metafields.custom.wholesale_order_form != blank %}
{{ customer.metafields.custom.wholesale_order_form | metafield_tag }}
{%  endif  %}

                        
                        <a class="popover__link-item" href="{{ routes.account_logout_url }}" data-no-instant>{{ 'customer.general.logout' | t }}</a>
                      </div>
                    </div>
2 Comments
2024/05/13
21:37 UTC

1

Change post background color by post flair

Just wondering if it is possible to change a post background color by post flair? I'm doing that in new Reddit and would like old to do the same. Thanks!

0 Comments
2024/05/13
02:10 UTC

2

how do I make my .frog class stand out over other classes? csshelp

I'm trying to make a frogger type game and I decided to add styles to the logs/cars but when the frog passes over the styled part of the cars it "eats" the frog (overrides the background-color: green) and the log lines trap the frog

here are snippets of the html and css codes:

html:

<div class="grid">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div class="endingBlock"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div class="logLeft l1"></div>
                    <div class="logLeft l2"></div>
                    <div class="logLeft l3"></div>
                    <div class="logLeft l4"></div>
                    <div class="logLeft l5"></div>
                    <div class="logLeft l1"></div>
                    <div class="logLeft l2"></div>
                    <div class="logLeft l3"></div>
                    <div class="logLeft l4"></div>
                    <div class="logRight l5"></div>
                    <div class="logRight l1"></div>
                    <div class="logRight l2"></div>
                    <div class="logRight l3"></div>
                    <div class="logRight l4"></div>
                    <div class="logRight l5"></div>
                    <div class="logRight l1"></div>
                    <div class="logRight l2"></div>
                    <div class="logRight l3"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div class="carLeft c1"></div>
                    <div class="carLeft c2"></div>
                    <div class="carLeft c3"></div>
                    <div class="carLeft c4"></div>
                    <div class="carLeft c5"></div>
                    <div class="carLeft c6"></div>
                    <div class="carLeft c1"></div>
                    <div class="carLeft c2"></div>
                    <div class="carLeft c3"></div>
                    <div class="carRight c4"></div>
                    <div class="carRight c5"></div>
                    <div class="carRight c6"></div>
                    <div class="carRight c1"></div>
                    <div class="carRight c2"></div>
                    <div class="carRight c3"></div>
                    <div class="carRight c4"></div>
                    <div class="carRight c5"></div>
                    <div class="carRight c6"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div ></div>
                    <div class="startingBlock frog"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>            
                </div>

css:

.grid {
    border: 1px #3A2145 solid;
    height: 450px;
    width: 450px;
    display: flex;
    flex-wrap: wrap;
}
.grid div {
    height: 50px;
    width: 50px;
}
.endingBlock {
    background-color: #786871;
}
.startingBlock {
    background-color: #3A2145;
}
.l1, .l2, .l3 {
    background: linear-gradient(to bottom, #0000 calc(100% - 5px), brown 0);
    background-size: 100% calc((100% - 5*5px)/6 + 5px);
    background-color: maroon;
}
.l4, .l5 {
    background-color: lightblue;
}
.c1, .c3, .c6 {
    background-color: gray;
}
.c2 {
    background-color: blueviolet;
}
.carRight.c2 {
    background: linear-gradient(to left,rgb(130, 163, 215), 15%, blueviolet);
}
.carLeft.c2 {
    background: linear-gradient(to right,rgb(130, 163, 215), 15%, blueviolet);
}
.c4, .c5 {
    background-color: orange;
}
.carLeft.c4{
    background: linear-gradient(to right,rgb(130, 163, 215), 15%, orange);
}
.carRight.c5 {
    background: linear-gradient(to left,rgb(130, 163, 215), 15%, orange);
}
* .frog {
    background-color: green !important;
}

(the frog moves with js but since that isn't giving me any issues I didn't think it was relevant to add the code)

Edit: I solved it, I added all: unset; to the style for the frog class

0 Comments
2024/05/13
01:14 UTC

1

How can I remove the whitespace between the login form and footer in my login page?

Hi everyone, I'm making a Symfony website for exam training purposes and I'm almost finished with my login page but the issue here is that there's a whitespace between the login form and the footer as you can see on the screenshot. I guess it has to do with the height of the HTML document and the body element. Normally I would make a separate CSS document for the login page and set the height of the page that the height covers the login form and the footer but when I tried that in the developer options of Google Chrome Dev it simply didn't work

In total this is what I've tried:

  • Making separate CSS document and setting height of the page (My usual approach).
  • Trying to edit the HTML code to see how I can get rid of the whitespace at between the login form and the footer.
  • Trying to edit the CSS code to see how I can get rid of the whitespace at between the login form and the footer.
  • Trying to disable HTML code with Twig to see what causes the whitespace.

But all of these things I did was unsuccessful in solving my issue so my question is how I can remove the whitespace between the login form and the footer in my login page with any method.

Link to GitHub repo: https://github.com/Diomuzan/Karaka/

Screenshot: https://imgur.com/a/G1wQcsG

Path to page: templates/Karaka_Login_html.twig

Path to CSS: public/CSS_Documents/Karaka_Style.css

Thanks for your help, effort and time in advance!

Updates:

  • Hi everyone, it's my pleasure to share that I've successfully solved the white gap issue. I've read this article: https://stackoverflow.com/questions/9378704/gap-at-the-bottom-of-page#:~:text=The%20gap%20is%20caused%20by,it%20to%20alter%20your%20gapa and it inspired me to mess around with the margin setting in CSS. When I added some bottom margin at the background image which is at the left side of the page it closed the gap so I then just applied the bottom margin. Now the white gap is gone and my problem is solved which means I can move on. The solution is summarized add some bottom margin at the underside of the element with which you want to fill the gap at the bottom. I want to lastly thank everyone for their help, effort and lastly time!
0 Comments
2024/05/11
16:14 UTC

1

why isn't the background repeating? csshelp

i wanted to create a repeating background for the the webpage, the image appears, but there is only one in the top left. i heard a second opinion say that it is because of the positioning causing the image to repeat over itself endlessly, but any change to it either does nothing, or stops the image from appearing. i have also tried background-repeat: repeat; with no success.

the html part of the code

<div class="bg-image">
  <h1> On Copyright and Intellectual Property </h1>
  <h4> By: Yousif Fouad </h4>
  <div class="content">
    <p> 
      .........
      <br>
      <br>
      .........
      <br>
      <br>
      .........
      <br>
      <br>
      .........
      <br>
      <br>
      .........
      <br>
      <br>
      .........
      <br>
    </p>
  </div>
</div>

the CSS code in question

.bg-image {
  position: relative;
}

.bg-image:before {
  content: ' ';
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.6;
  background-image: url('copyright.png');
  background-size: 100px;
}

.content {
  position: relative;
  margin-left: 15%;
  margin-right: 15%;
  border: solid;
  padding: 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.111em;
}
2 Comments
2024/05/10
10:29 UTC

2

iPhone view is majorly messed up but small desktop is fine

My server recently made some updates to their server and at the same time multiple sites of mine are now very messed up when viewing on iPhone.

if you want to check code here's the live site: https://thoughtperspectives.com

It was all working perfectly fine like 2 weeks ago and the data center is saying it's not a problem on their end.

1 Comment
2024/05/07
22:33 UTC

3

CSS is not being applied into html

Hi , I am new to designing a website , I usually stick to coding backend functions . I am trying to add css file into html via link tag , but its not picking up css file . No errors are being shown , here is code

HTML_1.css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node.js Testing</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1 class = "class1">Node.js Testing Example</h1>
    <p class = "class1">This is a simple HTML file.</p>
</body>
</html>

here is css file

this is css file here styles.css
p {
    color: red ;
}
body {
    background-color:#CCCCCC;
}
.class1 {
    color: greenyellow ;
}

here is javascript file

// commands to initiate website build ---> npm init -y
// then npm install express module into source dir
const express = require('express');
const { readFile } = require('fs');
const app = express();

app.get('/',(req,res) =>{
    readFile('HTML_1.html','utf8',(err,data)=>{
        if (err){
            console.log(err)
            res.status(500).send('Internal server error')
        }
        res.send(data)
    })
})

app.listen(3000 , () => console.log(`APP IS AVALIBLE AR http://localhost:3000`))

all files are in root folder of project
no colors are being shown that are being defined in css file

2 Comments
2024/05/06
07:59 UTC

1

Last 3 items on a new line (CSS)

I'm trying to have my last 3 menu elements going always on a new line (except for when the menu becomes like a hamburger) but I can't figure it out..

I've tried with:

#menu-item-26 ~ * { clear: both; }

li:nth-child(5n+1) { clear: left; }

Here's the webpage: http://bibilab.mircooliverisofia.com/

Ive also tried other codes but nothing, didn't work!

Can someone shed some light? I'd like to avoid having 2 menus as I'll then need a 3rd one to use on mobile when I get a hamburger menu, which means I'd have 3 menus in total (2 visible 1 hidden, and then viceversa)..there has to be a simpler way!

Thanks a lot

1 Comment
2024/05/05
10:21 UTC

3

How to decrease the space between the footer header to social links?

I have a footer with several different headers across it. (Ex: about us, contact us, follow us) and under each header is hyper links. Under the 'follow us' header I have social links but the space is way too far down. I would like the links closer to the header, but idk how to do that. Im struggling. This is my code:

.footer-col .social-links a{
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255,255,255,0.2);
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}
2 Comments
2024/05/03
03:23 UTC

2

Possible to achieve "aspect fit" or "contain" effect with divs, not images?

I want to create a square that scales to fill its container, but always fits within the container. Similar to the aspect fit or contain property of images.

See image here

If the container is a tall rectangle, then my square will be 100% the height. Or if the container is a wide rectangle, then my square will be 100% of the width. Is this possible with CSS?

1 Comment
2024/05/02
22:28 UTC

1

For some reason my upvote icons are broken!

All I did was use the CSS snippet in the custom upvote and downvote thread and for some reason it's broken-- I can't tell why though! My images are PNGs, 72x72 and are all well under 64KB as outlined by these guidelines. Yet, it's still not workin'!

Here is the code (directly copied and pasted):

/*Arrows*/ 
.thing .arrow {
    height: 25px;
    width: 25px;
}
.arrow.up {
    background: url(%%POD2upINACTIVE-72x72%%); 
}

.arrow.upmod { 
    background: url(%%POD2upACTIVE-72x72%%); 
}

.arrow.down {
    background: url(%%POD2downINACTIVE-72x72%%); 
}

.arrow.downmod { 
    background: url(%%POD2downACTIVE-72x72%%); 
}


/*This allows arrows wider than 15px just change it to the width of your arrows*/
.midcol  { min-width:25px !important; }

Here's an image of what the output is on the subreddit.

I'm losin' my mind here haha Any help would be wonderful, thank you!

0 Comments
2024/05/02
20:14 UTC

3

How can I add space between these fieldsets

<!DOCTYPE html>
<html>
    <head>
        <title>ALEXGUIAS</title>
        <style type="text/css">
            body {font-family: Verdana, Geneva, Tahoma, sans-serif;
                background-color: #54545C;
                color:rgb(180, 220, 255)
                }
            header {
                border-color: rgb(255, 196, 0);
                border-radius: 10px;
                box-shadow: 0px 0px 5px 5px rgb(255, 196, 0);
                color: rgb(255, 196, 0);
                text-align: center;
                padding: 20px 0;
                font-style: italic;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                font-weight: 700;
                    }
            body h1 {color: #E70548;
                    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                    font-size: xx-large;
                    letter-spacing: 1.5px;
                    }
            nav ul {list-style-type: none;
                    }
            nav li {display: inline;
                    padding: 25px;
                    }
            a.class1 {
                    color: rgb(255, 196, 0);
                    }
            a.class1:link {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }
            a.class1:visited {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }
            a.class1:hover {
                    text-decoration: underline;
                    color: rgb(255, 196, 0);
                    }
            a.class1:active {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }
                    br {
                    line-height: 150%;
                    }
            fieldset {
                    border-color: #E70548;
                    height: 180px;
                    width: 300px;
                    border-radius: 10px;
                    }
            .flexcontainer1 {
                    display: inline-flex;
                    flex-wrap: wrap;
                    margin-top: 80px;
                    }
            .flexcontainer2 {
                    display: inline-flex;
                    flex-wrap: wrap;
                    margin-top: 80px;
                    }
        </style>
    </head>
    <body>
    <header>
        <nav>
            <ul>
                <li><a href="MainPage.html" target="blank" class="class1"><img src="LOGO.png" height="15%" width="15%"></img></a></li>
                <li><a href="Noticias.html" target="blank" class="class1">NOTICIAS</a></li>
                <li><a href="Analisis.html" target="blank" class="class1">ANÁLISIS</a></li>
                <li><a href="Articulos.html" target="blank" class="class1">ARTÍCULOS</a></li>
                <li><a href="Guias.html" target="blank" class="class1">GUÍAS</a></li>
                <li><a href="Videos.html" target="blank" class="class1">VÍDEOS</a></li>
                <li><a href="Guias.html" target="blank" class="class1">APÓYANOS</a></li>
                <li><a href="Usuario.html" target="blank" class="class1">ENTRAR/CREAR CUENTA</a></li>
            </ul>
    </header>
        </nav>
    <center>
    <div class="flexcontainer1">
    <fieldset>
        <legend>Noticias</legend>
        XDDDDDDDDDDDDDD
    </fieldset>
    <fieldset>
        <legend>Análisis</legend>
        XDDDDDDDDDDDDDD
    </fieldset>
    <fieldset>
        <legend>Artículos</legend>
        XDDDDDDDDDDDDDD
    </fieldset>
    </div>
    <br>
    <div class="flexcontainer2">
    <fieldset>
        <legend>Guías</legend>
        XDDDDDDDDDDDDDD
    </fieldset>
    <fieldset>
        <legend>Vídeos</legend>
        XDDDDDDDDDDDDDD
    </fieldset>
    </div>
    </center>
</body>
</html>
 Ignore the 'XD' it was just a text test, I have yet to think what Imma put in there.
2 Comments
2024/05/02
18:55 UTC

2

Infinite marquee images overlapping and I can't figure out why or how to fix it...

Hi all! I need some CSShelp for an snippet of code.. I have an infinite marquee code embedded into a web page I am designing/developing for a client that doesn't seem to be working properly.. after a certain point the images overlap and look all jumbled together. (after the "Skincare Junkie/Lunascent" Logo, about 10-15 seconds in)

I have a few marquees throughout the site on other pages that I have not had this problem with. I have been through the code what feels like a hundred times and cannot for the life of me figure out what is wrong.. I have a feeling it is something maybe with the mirrored content bc that is what is overlapping but I can't figure out what would cause it to do that/how to fix it..

Here is the page link: https://cassandramcclure.com/the-clean-beauty-collective-shop

And here is the code:

<div class="marquee\_overlay"><style> .marquee\_overlay { --gap: 3rem; display: flex; overflow: hidden; user-select: none; gap: var(--gap); position: relative; min-width: 100%; } .marquee\_overlay:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to right, white 0%, transparent 5%, transparent 95%, white 100%); z-index: 2; } .marquee\_overlay\_group { flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; min-width: 100%; gap: 3rem; position: relative; /\* Change animation speed \*/ animation: scroll 95s linear infinite; /\* Uncomment line below to reverse direction \*/ /\*animation-direction: reverse;\*/ } .marquee\_overlay\_group img { max-width: 130px; } u/media (max-width: 749px) { .marquee\_overlay\_group img { max-width: 50px; } } .d .sie-our-brands\_1 .si-embed { width: 100% !important; } u/media (prefers-reduced-motion: reduce) { .marquee\_overlay\_group { animation-play-state: paused; } } u/keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } </style> <div class="marquee\_overlay\_group"><img src="https://static.showit.co/file/f2ayPY57TZWj8XaL69FNbw/230517/juice\_white.svg" alt="Juice Beauty Logo"><img src="https://static.showit.co/file/Tzf13Ln4RQ6Rc0SHiajkqA/230517/neeshi\_white.svg" alt="neeshi Logo"><img src="https://static.showit.co/file/YdA-G2SpSjOwrJ2Tk-VOeg/230517/glotanicals\_white.svg" alt="glotanicals Logo"><img src="https://static.showit.co/file/XPM24wYfSCaZu-fTviU6hQ/230517/voes\_and\_co\_white.svg" alt="voes and co Logo"><img src="https://static.showit.co/file/PpuLeTCuTuCAS1bSj\_3DeA/230517/codex\_labs\_white.svg" alt="Codex Labs logo"><img src="https://static.showit.co/file/rrvkAqStTCSwZxzNusEt0w/230517/la\_sol\_white.svg" alt="LA sol Logo"><img src="https://static.showit.co/file/n7zlnja0QpKc87r08RLv3Q/230517/skincare\_junkie\_white.svg" alt="skincare junkie Logo"><img src="https://static.showit.co/file/rf1N2NK-T\_ucvz9ZdZSZkg/230517/lunaesecnt\_white.svg" alt="Lunaesent Beauty Logo"><img src="https://static.showit.co/file/9xX9Qj1ESb2PEcfS5ACRlA/230517/the\_goodfor\_white.svg" alt="Goodfor company Logo"><img src="https://static.showit.co/file/PuNKqZ2dT8edVG4-Kda4eg/230517/beauty\_bits\_white.svg" alt="Beauty Bits Logo"><img src="https://static.showit.co/file/qgqP2GkIQZ-bqJUMC7-UQA/230517/nd\_white.svg" alt="naturally drenched Logo"><img src="https://static.showit.co/file/AGMWagaMRfe1g4s4mxeX4Q/230517/day\_west\_white.svg" alt="day + west Logo"></div> <!-- Mirrors the content above --> <div class="marquee\_overlay\_group" aria-hidden="true"><img src="https://static.showit.co/file/f2ayPY57TZWj8XaL69FNbw/230517/juice\_white.svg" alt="Juice Beauty Logo"><img src="https://static.showit.co/file/Tzf13Ln4RQ6Rc0SHiajkqA/230517/neeshi\_white.svg" alt="neeshi Logo"><img src="https://static.showit.co/file/YdA-G2SpSjOwrJ2Tk-VOeg/230517/glotanicals\_white.svg" alt="glotanicals Logo"><img src="https://static.showit.co/file/XPM24wYfSCaZu-fTviU6hQ/230517/voes\_and\_co\_white.svg" alt="voes and co Logo"><img src="https://static.showit.co/file/PpuLeTCuTuCAS1bSj\_3DeA/230517/codex\_labs\_white.svg" alt="Codex Labs logo"><img src="https://static.showit.co/file/rrvkAqStTCSwZxzNusEt0w/230517/la\_sol\_white.svg" alt="LA sol Logo"><img src="https://static.showit.co/file/n7zlnja0QpKc87r08RLv3Q/230517/skincare\_junkie\_white.svg" alt="skincare junkie Logo"><img src="https://static.showit.co/file/rf1N2NK-T\_ucvz9ZdZSZkg/230517/lunaesecnt\_white.svg" alt="Lunaesent Beauty Logo"><img src="https://static.showit.co/file/9xX9Qj1ESb2PEcfS5ACRlA/230517/the\_goodfor\_white.svg" alt="Goodfor company Logo"><img src="https://static.showit.co/file/PuNKqZ2dT8edVG4-Kda4eg/230517/beauty\_bits\_white.svg" alt="Beauty Bits Logo"><img src="https://static.showit.co/file/qgqP2GkIQZ-bqJUMC7-UQA/230517/nd\_white.svg" alt="naturally drenched Logo"><img src="https://static.showit.co/file/AGMWagaMRfe1g4s4mxeX4Q/230517/day\_west\_white.svg" alt="day + west Logo"></div></div>

THANK YOU SO MUCH FOR ANY HELP, IT IS SO APPRECIATED!!

0 Comments
2024/05/02
18:55 UTC

1

Help CSS newbie with flex please.

I'm having a issue with my Flexbox in CSS.
Say I have content on the right, and then content on the left. How do I get the content on the left to go under the content on the left when I make the browser window smaller? Like I want it to be size by side when the browser is full screen or big enough but on smaller media, it stacks on top of each other?

2 Comments
2024/05/01
04:12 UTC

1

Request for Help if its's available

This sub is my last hope. I run a sub r/SurvivingToxicppl It's a Support Group for Victims of certain kinds of abuse. Doesn't matter. I haven't sent out invitations yet to the current members of the group, I sent 2 out to a couple of Mods that could be interested. IN any case no members, but my videos have like 90 Views. I am a restricted sub, so anyone who wants can just peruse my content and never subscribe. Is there ANYTHING in css, scrips, etc to prevent people from the ability to watch my videos?

If I go private within RES, I can no longer upload videos. I just don't want to have to restrict MYSELF. Please help, if its possible. Like every video has 60 to 90+ v iews on them. Not a single subscriber.

0 Comments
2024/05/01
00:45 UTC

1

It is possible to hide an element taking into account another element?

Hello!

I'm trying to hide an element A only if element B is not present/doesn't exist.

For example, the following code that changes the z-index of '...79b8029' if '...7094a6d' is not present, works as intended:

.elementor-184 .elementor-element.elementor-element-79b8029:not(:has(.elementor-repeater-item-7094a6d)) {
    z-index: 0;
}

But, after applying the same technique for another different element (different container also) it doesn't hide '...5b5140c' if '...79b8029' has '...7094a6d' inside it:

.elementor-184 .elementor-element.elementor-element-79b8029:has(.elementor-repeater-item-7094a6d) .elementor-184 .elementor-element.elementor-element-5b5140c {
    display: none;
}

What could be wrong? Or maybe a different approach could be taken?

Thank you!


Note (1): Well, I managed to do exactly what I want using JS, but it's not possible with CSS only?

document.addEventListener("DOMContentLoaded", function() {
    var parentElement = document.querySelector('.elementor-184 .elementor-element.elementor-element-79b8029');
    var childElement = parentElement.querySelector('.elementor-repeater-item-7094a6d');
    var targetElement = document.querySelector('.elementor-184 .elementor-element.elementor-element-5b5140c');
    
    if (parentElement && childElement) {
        targetElement.style.display = 'none';
    }
});
1 Comment
2024/04/30
17:51 UTC

0

Href scrolling?

I'm returning to coding as a hobby after a long time without it. For my example project, I have a header and a footer. The header links to the footer (href="#footer") and vice versa. I know that I have made something similar before, in which the page would visibly scroll instead of just jumping straight to it, but I have absolutely no memory of how, or even if I used href and css at all. What is the simplest way you can think of to do this?

3 Comments
2024/04/30
11:29 UTC

1

Shrinking sidebar nav with media query not moving to center during window resize

I think it might have to do with the position attribute I set to sticky for the navbar and therefore the reason the media query is not resizing the sidebar?

https://codepen.io/Mark-Matlock/pen/gOyyxLb

This is the solution site that shrinks the sidebar correctly - https://technical-documentation-page.freecodecamp.rocks/

5 Comments
2024/04/29
23:22 UTC

1

CSS - The Complete Guide To CSS For Beginners | Free Udemy course for limited time

0 Comments
2024/04/29
20:59 UTC

1

How to turn flexbox images into hotlinks?

I've made flexbox grid of images, and now I would want to make each image a clickable link, without changing the sizing or position of the images. Any tips how to do this?

This is my code currently:

<section>
 <img src="images/001.jpg">
 <img src="images/002.jpg">
 <img src="images/003.jpg">
 <img src="images/004.jpg">
 <img src="images/005.jpg">
 <img src="images/006.jpg">
</section>

CSS:

section {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 80rem;
}

section img {
    overflow: hidden;
    flex: 1 1 400px;
}
3 Comments
2024/04/29
13:41 UTC

3

Help aligning checkboxes

Hi all....Can anyone check out the following form, starting on step 3, where the checkboxes are misaligned, and tell me how to align everything? I'm fine if they are left aligned in some way. I cannot for the life of me figure this out.

https://acrewindowreplacement.com/doors-pa-design/

9 Comments
2024/04/28
13:18 UTC

2

Can't figure out the right way to make my grid responsive

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../SCSS Learning/Styles/scss/style.css">
    </head>
    <body>
        <div id="grid">
            <div class="left img">
                <div class="guard">
                    <h2 class="guard__t2">This project is</h2>
                    <h2 class="guard__t3">purple</h2>
                    <p class="guard__p1">You should click it to see what its all about. I’ll give you one hint. It’s some that starts with C and rhymes with Heart</p>
                    <div class="guard__link">
                        <h2>This project is</h2>
                        <a href="#"></a>
                    </div>
                </div>   
            </div>
            <div class="center">
                <div class="guard">
                    <h2 class="guard__t2">This project is</h2>
                    <h2 class="guard__t3">purple</h2>
                    <p class="guard__p1">You should click it to see what its all about. I’ll give you one hint. It’s some that starts with C and rhymes with Heart</p>
                    <div class="guard__link">
                        <h2>This project is</h2>
                        <a href="#"></a>
                    </div>
                </div>  
            </div>
            <div class="right">
                <div class="guard">
                    <h2 class="guard__t2">This project is</h2>
                    <h2 class="guard__t3">purple</h2>
                    <p class="guard__p1">You should click it to see what its all about. I’ll give you one hint. It’s some that starts with C and rhymes with Heart</p>
                    <div class="guard__link">
                        <h2>This project is</h2>
                        <a href="#"></a>
                    </div>
                </div>  
            </div>
            <div class="last">
                <div class="guard">
                    <h2 class="guard__t2">This project is</h2>
                    <h2 class="guard__t3">purple</h2>
                    <p class="guard__p1">You should click it to see what its all about. I’ll give you one hint. It’s some that starts with C and rhymes with Heart</p>
                    <div class="guard__link">
                        <h2>This project is</h2>
                        <a href="#"></a>
                    </div>
                </div>  
            </div>
        </div>
    </body>
</html>


#grid {
  height: 50vh;
  transition: 500ms;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr  1fr  1fr;
  // grid-template-columns: repeat(auto-fit, minmax(50em, 1fr));
  gap: 2em;
  padding: 2em;
}

:where(.left, .center, .right, .last) {
  border-radius: 1em;
  padding: 2em;
  background: #202020;
  // transition: 300ms;
  transition: 1s;
}

:where(.left, .center, .right, .last):hover {
  background-blend-mode: hue;
  // background: crimson;
}

#grid:has(.left:hover) {
  grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr;
}

#grid:has(.center:hover) {
  grid-template-columns: 0.5fr 1fr 0.5fr 0.5fr;
}

#grid:has(.right:hover) {
  grid-template-columns: 0.5fr 0.5fr 1fr 0.5fr;
}

#grid:has(.last:hover) {
  grid-template-columns: 0.5fr 0.5fr 0.5fr 1fr;
}

.left {
  background-image: url(../../../Assets/Pictures/Blue\ Chair\ -\ 1080x1350.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: hue;
  background-color: #0E7BBF;
}

.guard {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: #FFFFFF;
  min-height: 100%;

  &__t2 {
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -0.175rem;
      text-transform: uppercase;
  }

  &__t3 {
      font-size: 4rem;
      font-weight: 800;
      letter-spacing: -0.175rem;
      text-transform: uppercase;
      margin-bottom: 0.5em;
  }

  &__p1 {
      font-size: 1.3rem;
      line-height: 1.8rem;
      // max-width: 25em;
      margin-bottom: 1.5em;
  }

  &__link {
      margin-top: auto;
      display: inline-block;
      
      >h2 {
          font-size: 1.3rem;
          font-weight: 900;
          letter-spacing: -0.05rem;
          text-transform: uppercase;
      }
  }

}
3 Comments
2024/04/28
08:04 UTC

Back To Top