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

[Mathias]

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

[Tom]

Hi there,

Give this a shot:

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

[Mathias]

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

[David]

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;
    }
}

[Mathias]

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

[David]

Glad to hear that

[Author]

Posts