Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS @media query for 3 colum footer

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #244377
    Amol
    Participant

    Hello everyone,

    I am a new bee with css, Pls advice me what is wrong with my media query for 3 column footer
    Following is the code is used to style the footer
    /* Footer styling
    —————————————————————————————————- */
    .footer-widgets-1.widget-area {
    float: left;
    width: 33%;
    padding: 40px;

    }

    .footer-widgets-2.widget-area {
    float: left;
    width: 33%;
    padding: 40px;
    }
    .footer-widgets-3.widget-area {
    float: left;
    padding: 40px;
    width: 33%;
    }
    @media only screen and (max-width: 1023px){
    .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, footer-widgets-1 widget-area, footer-widgets-2 widget-area, footer-widgets-3 widget-area {
    width: 100%;
    }
    }
    @media only screen and (max-width: 800px) {
    .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, footer-widgets-1 widget-area, footer-widgets-2 widget-area, footer-widgets-3 widget-area {
    width: 100%;
    }
    }
    @media only screen and (max-width: 480px) {
    .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, footer-widgets-1 widget-area, footer-widgets-2 widget-area, footer-widgets-3 widget-area {
    width: 100%;
    }
    }url to staging site http://anubha.wpengine.com/contract-and-lease-abstraction-services/

    #244381
    Beverleyh
    Participant

    Going on what you’ve posted, the syntax for your classes is wrong in all of your media queries. You’ve missed the dots.

    e.g. Looks like;

    footer-widgets-2 widget-area,

    Should be;

    .footer-widgets-2.widget-area,

    (3 times in each media query) untested – on mobile.

    #244394
    Amol
    Participant

    thanks so much it worked.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.