overflow CSS not working on wordpress

  • Unknown's avatar
    altifarmadmin · Member ·

    I have written a html CSS code that runs perfectly fine when i run it in a html file.
    I then take the same code and paste it in a block, everything from flex to the color combinations is applied the only thing that doesn’t get applied is the overflow-y: auto
    when i inspect the element is see that the CSS is being applied but some how it is overridden but some WordPress code perhaps

    the following is my html code: 

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600&display=swap" rel="stylesheet"> -->
    </head>
    <body>
        <div class="empty-space"></div>
        <h3 class="title">Limited only by imagination</h3>
        <div class="main-down-div">
            <div class="main-div">
                <div class="scroll-div">
                    <div class="content-container">
                        <div class="content">
                            <h4 class="sub-title">Taste The Freshness Of Herbs</h4>
                            <div class="content-images">
                                <img src="Lemon-Balm.png">
                                <img src="Lemon-Balm.png">
                                <img src="Lemon-Balm.png">
                                <img src="Lemon-Balm.png">
                            </div>
                        </div>
                    </div>
                    <div class="content-container">
                        <div class="content">
                            <h4 class="sub-title">Grow Your Own Edibles</h4>
                            <div class="content-images">
                                <img src="Spinach.png">
                                <img src="Strawberries.png">
                                <img src="Sunflower.png">
                                <img src="Thyme.png">
                            </div>
                        </div>
                    </div>
                    <div class="content-container">
                        <div class="content">
                            <h4 class="sub-title">Eat Healthy Microgreens</h4>
                            <div class="content-images">
                                <img src="Spinach.png">
                                <img src="Strawberries.png">
                                <img src="Sunflower.png">
                                <img src="Thyme.png">
                            </div>
                        </div>
                    </div>
                    <div class="content-container">
                        <div class="content">
                            <h4 class="sub-title">Liven Up Your Space</h4>
                            <div class="content-images">
                                <img src="Spinach.png">
                                <img src="Strawberries.png">
                                <img src="Sunflower.png">
                                <img src="Thyme.png">
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </body>
</html>

    CSS:

    body{
    font-family: 'Work Sans', sans-serif;
    background-color: rgb(237, 237, 237);
}
.main-div{
    background-color: rgb(237, 237, 237);
    position: relative;
}
.title{
    text-align: center;
}
.sub-title{
    text-align: center;
    font-size: 1.6vw;
    font-weight: 500;
    color: #404040;
}
.content-container{
    width: 80%;
    margin: auto;
}
.content{
    margin: 0 0 10%;
}
.content-images{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.content-images img{
    width: 15%;
}
.scroll-div::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */    
}
.main-div::after{
    content: '';
    height: 125px;
    top: 0;
    right: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(237, 237, 237, 0) 100%);
}
.main-down-div{
    position: relative;
}
.main-down-div::after{
    content: '';
    height: 100px;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(to top, rgba(237, 237, 237, 1) 0%, rgba(237, 237, 237, 0) 100%);
}
.scroll-div{
    overflow-y: scroll;
    height: 70%;
    position: relative;
    padding-top: 3%;
}

.empty-space{
    height: 100px;
}
@media only screen and (max-width: 600px) {
    .scroll-div{
        padding-top: 10%;
        padding-bottom: 20%;
    }
    .content-images img{
        width: 50%;
    }
    .title{
        font-size: 8vw;
    }
    .sub-title{
        text-align: center;
        font-size: 6vw;
    }
    .scroll-div{
        height: 75%;
    }
    .empty-space{
        height: 0px;
    }
}

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @altifarmadmin, with CSS, the more specific styles will override the styles you’re adding. I’d recommend pasting in the unstyled HTML (you’ll need to fix the sources for your images), then using Inspect Element to figure out how best to add your CSS. We have some tips on that here:
    https://wordpress.com/support/custom-design/how-to-find-your-themes-css/

    Also, I noticed your HTML has a head and everything, as though it’s going to be a page outside WordPress. I don’t know if that’s your intent. If it is what you had in mind, vs just putting it in a div, you might want to take another route.

    Lastly, going forward you’ll want to use the correct forums and resources for your WordPress installation, since it isn’t hosted here with us. We have some tips on finding help here:
    https://wordpress.com/support/help-support-options/#word-press-org-support

    Hoping this helps!

  • The topic ‘overflow CSS not working on wordpress’ is closed to new replies.