Use media queries to make objects mobile responsive

  • Resolved fantasy_5

    (@fantasy_5)


    9 years, 1 month ago

    Hi!

    I have added a floating footer bar to my website and it works great. However, it falls out side of the view port when viewed in mobile browsers… so it is cut off. Here is the code

    .navbar{margin-bottom:0px !important;}

    /*WPBeginner Footer Bar*/
    .fixedBar{background: #e26fe1; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:footer; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold;}

    .boxfloat{text-align:center; width:920px; margin:0 auto}

    #tips, #tips li{margin:0; padding:0; list-style:none}

    #tips{width:920px; font-size:20px; line-height:120%;}

    #tips li{padding: 15px 0; display:none}

    #tips li a{color: #fff;}

    #tips li a:hover{text-decoration: none;}

    I have been going bonkers trying to figure it out, but can’t seem to wrap my brain around it. Also, I would like my site to be mobile responsive across all browsers rather than having to double tap in order to expand the screen.

Viewing 31 replies (of 31 total)
  • Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    I just wanted to say you rock. I ended up finding and removing the toggle menu code altogether. It was a hassle and prevented my top nav from performing properly on mobile devices.

    I then created a brand new, responsive, and much better top navigation menu. It looks great on mobile devices and the hot pink mouse over color looks great. I appreciate you. Many thanks & kind regards.

Viewing 31 replies (of 31 total)
  • The topic ‘Use media queries to make objects mobile responsive’ is closed to new replies.