Archived topic

custom above footer section [2. column should float below the 1. one in mobile]

5 replies · Started by Mathias on June 23, 2020

Viewing posts 1–6 of 6

June 23, 2020 at 1:18 pm #1339346

Hi,

I created a custom above footer section with elements.

in this section I created to columns with flexbox like this:

.my-before-footer-content {
    max-width: 1100px;
    margin:0 auto;
    padding:60px 0 60px 0;
    display: flex;
  	flex-wrap: wrap;   
}

.my-before-footer-content-left {
	width: 66.6666%;
}

.my-before-footer-content-right {
  	width: 33.3333%;
    align-self:center;
    justify-content: flex-end;
}

.my-before-footer-content-wrapper {
    background-color: #F4F8FA;
    border-bottom: #eaecee solid 1px;
    border-top: #eaecee solid 1px;
}

How can I achieve that the 2nd columns floats below the 1st columns in mobile view (the button should be below the text message, and both should be centered aligned)

Thank you very much
have a great day

June 23, 2020 at 4:31 pm #1339515

Hi there,

Give this a shot:

@media (max-width: 768px) {
    .my-before-footer-content-right {
        flex-basis: 100%;
    }
}

June 24, 2020 at 5:08 am #1340042

thanks,

yes now the 2nd column is floating below the 1st one.

How can I center the content in each column horizontally?

I tried adding this:

align-items: center;
justify-content: center;

but it did not work

thanks

June 24, 2020 at 7:39 am #1340183

Try this CSS instead:

@media (max-width: 768px) {
    .my-before-footer-content-right,
    .my-before-footer-content-left {
        flex-basis: 100%;
        text-align: center;
    }
    .my-button, .my-button:visited {
        float: none;
    }
}

June 24, 2020 at 11:16 am #1340590

Thanks David,

I had to add !important to this code, then it worked:

    .my-button, .my-button:visited {
        float: none!important;
    }

have a great day

June 25, 2020 at 3:24 am #1341170

Glad to hear that

This archived topic is closed to new replies.

Start building better websites today.