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

Html – footer overlapping the main content

I’m studying HTML and CSS so I’m creating a mini portfolio project, however I’m facing a small problem in which my footer is overlapping my main

Index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <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=Krona+One&family=Montserrat:ital,wght@0,600;1,400&display=swap" rel="stylesheet">
</head>

<body>
    <header>
    </header>

    <main class="main">
        <section class="main__texto">
            <h1 class="main__texto__titulo">Eleve seu negócio digital a outro nível <strong class="DestaqueTitulo">com um Front-end de qualidade!</strong></h1>
            <h4 class = "main__texto__paragrafo">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos
                negócios e designers a colocarem em prática boas ideias. Vamos conversar?</h4>
            <div class="main__link">

                <h3 class="main__link__texto">Acesse minhas redes:</h3>

                <a 
                    class="main__link__botao" href="https://github.com" target="_blank">
                    <img src="./assets/github.png" alt="Logo do github">
                    Github
                </a>

                <a 
                    class="main__link__botao" href="https://www.linkedin.com" target="_blank">
                    <img src="./assets/linkedin.png" alt="Logo do linkendin">
                    Linkedin
                </a>

                <a 
                    class="main__link__botao" href="https://www.twitch.tv" target="_blank">
                    <img src="./assets/twitch.png" alt="Logo da twitch">
                    Twitch
                </a>
            </div>
            
        </section>
        <img class="main__imagem" src="./assets/Imagem.png">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Luan Ribeiro</p>
    </footer>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
}


body {
    box-sizing: border-box;
    background-color: #000;
    color: #F6F6F6;
    height: 100vh;
    display  : flex;
    flex-direction: column;

}

.DestaqueTitulo {
    color: #22D4FD;
}

.main {
    flex: 1;
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 100vh;
}

.main__texto {
    width: 615px;
    height: 482px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.main__texto__titulo {
    color: #F6F6F6;
    font-family: 'Krona One', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 56px;
}

.main__texto__paragrafo {
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
}

.main__imagem {
    width: 488px;
    height: 550px;
    flex-shrink: 0;
}

.main__link {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap : 32px
}

.main__link__texto {
    color: #F6F6F6;
    text-align: center;
    font-family: "Krona One", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; 
}

.main__link__botao {
    display: flex;
    justify-content: center;
    gap : 16px;
    width: 378px;
    text-align: center;
    gap: 16px;
    border-radius: 8px;
    border: 2px solid #22D4FD;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    padding: 21px 0;
    text-decoration: none;
    color: #F6F6F6;
    line-height: 36px;
}

.main__link__botao:hover {
    border-radius: 8px;
    border: 2px solid #22D4FD;
    background: #272727;
}


.rodape{
    padding: 24px;
    color: #000000;
    background-color: #22D4FD;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin-top: auto;
}

Here is an image of how the page is being viewed when the zoom is at 100%

the page with 100% zoom

Well, the first thing I tried was to fix the padding and the width of the main contents, but it didn’t work, after some research I added height , display and the flex-direction to the body but it didn’t work, then after seeing that the page works perfectly with 75% zoom I researched how to do this but without success eithe

Tags:

2

Answers


  1. 0

    The reasons for the issue you faced are the following:

    • You set the height of the body to 100vh
    • You set the height of .main__texto to 482px

    Bounding the elements to the defined height.

    I’ve commented out the two bugs that are causing the overlapping

    
* {
    margin: 0;
    padding: 0;
}


body {
    box-sizing: border-box;
    background-color: #000;
    color: #F6F6F6;
/*     height: 100vh; */
    display: flex;
    flex-direction: column;

}

.DestaqueTitulo {
    color: #22D4FD;
}

.main {
    flex: 1;
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 100vh;
}

.main__texto {
    width: 615px;
/*  height: 482px; */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.main__texto__titulo {
    color: #F6F6F6;
    font-family: 'Krona One', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 56px;
}

.main__texto__paragrafo {
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
}

.main__imagem {
    width: 488px;
    height: 550px;
    flex-shrink: 0;
}

.main__link {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px
}

.main__link__texto {
    color: #F6F6F6;
    text-align: center;
    font-family: "Krona One", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; 
}

.main__link__botao {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    gap: 16px;
    border-radius: 8px;
    border: 2px solid #22D4FD;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    padding: 21px 0;
    text-decoration: none;
    color: #F6F6F6;
    line-height: 36px;
}

.main__link__botao:hover {
    border-radius: 8px;
    border: 2px solid #22D4FD;
    background: #272727;
}


.rodape{
    padding: 24px;
    color: #000000;
    background-color: #22D4FD;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin-top: auto;
}
    Login or Signup to reply.
  2. 0

    what was mentioned in last answer was awesome, but let’s know the reasons behind them as well.

    It is not a good idea that body tag to have display flex instead using div to have class container or wrapper is better practice.

    why is not good idea to add display flex to body tag?

    Potential Side Effects:

    1. The body element contains the entire content of a web page, including the header, main content, and footer. Applying display: flex directly to the body can have unintended consequences on the layout of these sections.
      Other styles and layout properties applied to different elements within the body might conflict with the flex container setup, leading to unexpected results.
      Intended Use of body:

    2. The body element is traditionally used to define global settings for the entire document, such as background color, text color, and font properties. Modifying its display property may deviate from its intended purpose.
      Accessibility Considerations:

    3. Users with assistive technologies may rely on the default document structure. Altering the layout behavior of the body may affect the accessibility and usability of the web page for certain users.
      Potential Browser Compatibility Issues:

    4. While modern browsers are generally more forgiving with flexbox usage, older browsers may not interpret display: flex applied directly to the body as expected. It’s always good practice to test across different browsers.

    better use

    body {
  box-sizing: border-box;
  background-color: #000;
  color: #f6f6f6;
  min-height: 100vh;
}

    why it is not good idea to have fixed height in main___texto ?

    1. Lack of Responsiveness:

    A fixed height does not adapt to different screen sizes and devices. On smaller screens, the content might overflow, leading to a less-than-optimal user experience.

    1. Content Overflow:

    If the content inside .main__texto exceeds the fixed height, it will overflow, potentially causing content to be cut off or hidden. This can result in incomplete or inaccessible information for users.

    1. Limited Content Flexibility:

    Fixed heights restrict the flexibility of the content within the container. If the content needs to grow or shrink based on dynamic factors, a fixed height can hinder the design’s responsiveness.

    1. Text Legibility:

    Fixed heights might cause issues with text legibility, especially if the content is longer than expected. Text might get truncated or overlap, affecting the readability of the text.

    1. Incompatibility with Dynamic Content:

    If the content is dynamic or subject to change, a fixed height may not accommodate different scenarios. For example, if the text is translated into a language with longer words, it may not fit within the fixed height.

    and for dubugging purposes, it is better to use border:1px solid red for example to see better what is going on

    like here

    .main__texto {
    width: 615px;
/*  height: 482px; */
    display: flex;
    flex-direction: column;
    gap: 40px;
    border: 1px solid red; <--- for debugging proposes 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search