css problem with mobile device

Discussion in 'CSS' started by paffdevel, Dec 23, 2015.

0
  1. #1
    Hello,
    I have not done my second site for original mobile version and its implanted a soruce for desktop and mobile device. Everything is okay only have one problem. My site is structured in the following way - the left is a menu from ceiling to floor, to the right is my main content and below the main content only footer. When in the mobile device went to ZOOM SITE content main conten it passes over the menu it and footer passes under the menu. I guess it is css but how do you think I can "lock" footer and main content and zoom can not be moved?
     
    paffdevel, Dec 23, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Without seeing code or the site, nobody is going to be able to give you an answer.

    Though "locking" the header and footer so there's less usable space for content is... well... a really stupid to try and do; mind you people do it, but that's basically telling users on small devices to go **** themselves.
     
    deathshadow, Dec 23, 2015 IP
  3. paffdevel

    paffdevel Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Sorry,
    the is my code

    CSS

    body {
    color: #797979;
    background: #f2f2f2;
    font-family: 'Ruda', sans-serif;
    padding: 0px !important;
    margin: 0px !important;
    font-size:13px;
    }

    #main-content {
    margin-left: 210px;
    }
    .sidebar-closed #main-content {
    margin-left: 0px;
    }

    .wrapper {
    display: inline-block;
    margin-top: 60px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 0px;
    width: 100%;
    }

    .content-panel {
    background: #ffffff;
    box-shadow: 0px 3px 2px #aab2bd;
    padding-top: 15px;
    padding-bottom: 5px;
    }

    .site-footer {
    background: #68dff0;
    color: #fff;
    padding: 10px 0;
    }
    .header, .footer {
    min-height: 60px;
    padding: 0 15px;
    }
    .col-md-12 {
    width: 100%;
    }
    .row {
    margin-right: -15px;
    margin-left: -15px;
    }

    TEXT
    <section id="main-content">
    <section class="wrapper">

    <div class="row">

    <div class="col-md-12">
    <div class="content-panel">


    FOOTER
    <footer class="site-footer">
    <div class="text-center">
     
    paffdevel, Dec 25, 2015 IP