Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 6, 2018 at 5:55 pm #994014
    tlchase

    Hi Kriesi,

    I’ve been trying to center align the footer on mobile view for all of my columns however unable to. I found the following articles and tried the various css adjustments but without success. Please advise how I can center align all of the footer columns.
    Image below of how it currently displays

    CSS I’ve tried:
    @media only screen and (max-width: 767px) {
    #footer .flex_column {
    text-align: right;
    }
    }

    and
    @media only screen and (max-width: 767px) {
    #footer .flex_column {
    text-align: center;
    }
    #footer .flex_column {
    float: none;
    display: inline;
    }

    @media only screen and (max-width: 600px) {

    .footer_top .footer_col1 {
    text-align: center !important;
    }
    .footer_top .footer_col3 {
    text-align: center !important;
    }
    }

    Please advise.

    Thank you!

    August 7, 2018 at 6:30 am #994229
    Rikard

    Hey tlchase,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    August 7, 2018 at 3:16 pm #994454
    tlchase

    Thanks…please see below

    August 8, 2018 at 9:16 am #994752
    Rikard

    Hi,

    Thanks for that, it looks like you have added some custom CSS to those elements already? Why do you need a max width for the widgets for instance?

    #top .avia_partner_widget {
    max-width: 354px;
}

    Could you try to put that in a media query only applying above mobile screens maybe?

    Best regards,
    Rikard

    August 8, 2018 at 4:27 pm #995044
    tlchase

    Thanks, I put the below CSS that seems to have done the trick (more or less)…what is the differencebetween the max width in “vw” and “%” versus “px”??

    example:
    “width: 100vw !important;
    max-width: 100%!important;”
    and
    ” max-width: 354px;”

    Thanks!

    /*******************
    Full width footer
    *******************/
    #footer .container {
    width: 100vw !important;
    max-width: 100%!important;
    }

    #socket .container {
    width: 100vw !important;
    max-width: 100%!important;
    }

    @media only screen and (max-width: 767px) {
    #footer .container {
    width: 90vw !important;
    max-width: 90%!important;
    }
    }

    @media only screen and (max-width: 767px) {
    #socket .container {
    width: 100vw !important;
    max-width: 90%!important;
    }
    }

    @media only screen and (max-width: 767px) {
    #footer .widget_text {
    text-align: left;
    }
    }

    August 8, 2018 at 5:08 pm #995078
    Jordan Shannon

    Hi,

    Pixels (px): Absolute pixels. So for example, 20px will be literally 20 pixels on any screen. If a monitor is of 1980×1200, and you set an element’s height to 200px, the element will take 200 pixels out of that.

    Percentage (%): Relative to the parent value.

    Viewport height/width (vw/vh): Size relative to the viewport (browser window, basically).

    Best regards,
    Jordan Shannon

    August 8, 2018 at 5:51 pm #995090
    tlchase

    Thanks!

    August 8, 2018 at 6:37 pm #995107
    Jordan Shannon

    Hi,

    No problem at all my friend. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Footer on mobile responsive view align center all columns’ is closed to new replies.