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

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1339346
    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

    #1339515
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    @media (max-width: 768px) {
        .my-before-footer-content-right {
            flex-basis: 100%;
        }
    }
    #1340042
    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

    #1340183
    David
    Staff
    Customer Support

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

    #1341170
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.