Html Question posted in
Some basic documentation can be found here.

Html – I can't scroll on my website, even when changing body overflow to scroll?

Im learning html and decided to make a mock version of a website. When I try to scroll with my mouse it wont work. It doesn’t show the scroll bar either.

I have read that I should change my body ovreflow to scroll,and it did in fact add a scroll bar, but now I can’t add elements below what I have already put in there. So when I try to add a paragraph under my div, but it wont show. Don’t mind the text,

The code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relmercc</title>
   <link rel="icon" href="https://img.icons8.com/?size=100&id=U5Pp4XpKz9ap&format=png&color=000000">
    <style>
        .header{                                               
            background-color: #404040;
            border: none;
            border-radius: 5px;
            position: fixed;
            width: 1904px;
            height: 150px;
        }
        .header-logo-img{                        
         
            height: 150px;
        }
       
        .right_header{                           
            color: #fff; position: absolute; top: 60px; right: 100px; font-size: x-large; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        .yappin{         
            background-color: #8fe3c6;
           height: 744px;
           border: none;
           border-radius: 8px;
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .spacing2{height:7px}  
        .spacing3{height:100px; background-color: #8fe3c6; border: none;border-radius:8px;} 
        .yapintxt{               
            margin-right: 100px;
            margin-left: 100px;
            color: white;
            font-size:x-large; 
            margin-bottom:20px;
        }
        body {
 height: 1360px;
 width: 100%;
 margin: 0;
 padding: 0;
 overflow: scroll;
}
    
    
    
    </style>
</head>
<body>
    <div class = "header">
            <img class="header-logo-img" src="C:UsersStepanDownloadsRelmercc-23-07-2024.png" alt="My Image"> <div id="spacing1">
                <span class="right_header">Buy clothes</span>
            </div>
    <div class ="spacing2"></div>   
    <div class = "yappin">
            <div class = "spacing3"></div>
            <p  class = "yapintxt">Relmercc has reached the very top among the dynamic scenes that change with every beat in style, through the amalgamation of modern taste with environmental sustainability. With innovation through ethical production as the very premise upon which this brand was based, Relmercc has made a niche for itself within the cutthroat competition in modern clothing. The brand is proud of its craftsmanship, shown in every single stitch—from traditional techniques with the incorporation of state-of-the-art design. With Relmercc, every piece basically strikes a balance between style and conscience, which appeals to the conscientious consumers who seek trend-setting looks and sustainable choices.</p>

            <p  class = "yapintxt">Basically, sustainability is at the heart of Relmercc's philosophy. Most fast fashion giants are not so close to environmental accountability, but Relmercc does its best to be friendly to the environment across the supply chain. From responsible sourcing and production to more thoughtful designing in order to reduce wastes, all decisions are made considering the welfare of the planet. Through such championing of transparency and accountability, Relmercc has set new standards in the industry and inspired a generation of mindful consumers to make informed choices about their fashion purchases. For the brand, this is an incredibly clear imperative: A rising community of people finds sustainability at the heart of modern living.</p>
            
            <p  class = "yapintxt">Moreover, Relmercc stands to lead the way in the charge for inclusivity and diversity in fashion. This brand celebrates the beauty of individuality, embracing differences in its designs and catering to an extraordinarily wide spectrum of tastes and preferences. Embracing inclusivity places Relmercc at the heart of building a platform that makes fashion a way for every being to express themselves. From gender-neutral collections to size-inclusive ranges, Relmercc empowers people to confidently be themselves in clothes that fit well but embody personal values. Basically, Relmercc represents more than a clothing brand but a step forward toward an all-inclusive, more mindful high-fashion future.</p>
    </div> 
    <div class = "spacing2"></div>
Tags:

2

Answers


  1. 0

    It looks like the issue you’re experiencing could be due to a few things, like fixed positioning or incorrect height settings. Here are some suggestions to help you out. Once you adjust those values, your page should scroll normally again.change your css class name header accoring to this

          .header {
        background-color: #404040;
        border: none;
        border-radius: 5px;
        width: 100%;
        height: 150px;
      }
    Login or Signup to reply.
  2. 0

    trying something like this?

    body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.header {
    background-color: #404040;
    border: none;
    border-radius: 5px;
    position: fixed;
    width: 100%;
    height: 50px;
}
.header-logo-img {
    height: 150px;
}
.main-section {
    display: inline-block;
    width: 100%;
    margin-top: 50px;
}
.right_header {
    color: #fff;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: x-large;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.yappin {
    background-color: #8fe3c6;
    height: 744px;
    border: none;
    border-radius: 8px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.spacing2 {
    height: 7px;
}
.spacing3 {
    height: 100px;
    background-color: #8fe3c6;
    border: none;
    border-radius: 8px;
}
.yapintxt {
    margin-right: 100px;
    margin-left: 100px;
    color: white;
    font-size: x-large;
    margin-bottom: 20px;
}
    <!DOCTYPE html>
<html lang="en">
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
        </head>

        <body>
            <div class="header">
                <img class="header-logo-img" src="C:UsersStepanDownloadsRelmercc-23-07-2024.png" alt="My Image">
                <div id="spacing1">
                    <span class="right_header">Buy clothes</span>
                </div>
            </div>
            <div class="main-section">
                <div class="spacing2"></div>
                <div class="yappin">
                    <div class="spacing3"></div>
                    <p class="yapintxt">Relmercc has reached the very top among the dynamic scenes that change with every beat in style, through the amalgamation of modern taste with environmental sustainability. With innovation through ethical production as the very premise upon which this brand was based, Relmercc has made a niche for itself within the cutthroat competition in modern clothing. The brand is proud of its craftsmanship, shown in every single stitch—from traditional techniques with the incorporation of state-of-the-art design. With Relmercc, every piece basically strikes a balance between style and conscience, which appeals to the conscientious consumers who seek trend-setting looks and sustainable choices.</p>
                    <p class="yapintxt">Basically, sustainability is at the heart of Relmercc's philosophy. Most fast fashion giants are not so close to environmental accountability, but Relmercc does its best to be friendly to the environment across the supply chain. From responsible sourcing and production to more thoughtful designing in order to reduce wastes, all decisions are made considering the welfare of the planet. Through such championing of transparency and accountability, Relmercc has set new standards in the industry and inspired a generation of mindful consumers to make informed choices about their fashion purchases. For the brand, this is an incredibly clear imperative: A rising community of people finds sustainability at the heart of modern living.</p>
                    <p class="yapintxt">Moreover, Relmercc stands to lead the way in the charge for inclusivity and diversity in fashion. This brand celebrates the beauty of individuality, embracing differences in its designs and catering to an extraordinarily wide spectrum of tastes and preferences. Embracing inclusivity places Relmercc at the heart of building a platform that makes fashion a way for every being to express themselves. From gender-neutral collections to size-inclusive ranges, Relmercc empowers people to confidently be themselves in clothes that fit well but embody personal values. Basically, Relmercc represents more than a clothing brand but a step forward toward an all-inclusive, more mindful high-fashion future.</p>
                </div>
                <div class="spacing2"></div>
            </div>
        </body>
</html>

    Do not assign width or height of any main elements which should be full width or height in pixel and instead using "header" as a class use .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search