Question 69446 in CSS Question posted in
Some basic documentation can be found here.

Footer not showing at the bottom on mobile (Flexbox) – Css

I am using flexbox for the first time to create a page. I have 2 containers with rows of 2 on top of each other that become columns when in mobile.

At the end I have a footer. The footer doesn’t show in the right place in responsive view. It seems it compacts with the previous columns and goes on top.

Image of what I am trying to create, with margins to be clear:

Image of what I am trying to create, with margins to be clear

What I currently have is the following:

.container1{
display:flex;
flex-direction: row;
height:100%;
background-image: url(imagens/fotobanner.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin:0;
}

.container2 {
display:flex;
flex-direction: row;
background-color: #f9f8f6;
height: 100%;
width: 100%;
margin:0;
}

footer{
width:100%;
background-color: rgb(5, 0, 98);
align-items: center;
display: flex;
flex: 100%;
margin:0;
height: 10%;
}

@media (max-width:820px){
.container1, .container2 {
flex-direction: column;
}
footer{
flex-direction:column
}
}

(the contents are just set to flex 50%)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it by also setting the main content to:

    main {
    display: flex;
    flex-direction: column;
}

    And attributing the heights I wanted to the columns (some I wanted reduced).


  2. 0

    One reason why the footer is not showing at the bottom on mobile devices could be that the Flexbox layout is not properly set up for smaller screen sizes.

    footer{
 justify-content: flex-end;
}

    try this(Sometimes this is correct.)

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

Back To Top
Search