2014-08-27 113 views
0

我正在作出響應網站sandbox.mercomcorp.com,我想要停止水平滾動我用HTML,身體{ 寬度:100%; overflow-x:hidden; }在我的CSS,但所做的只是帶走了可見的滾動條。我想停止水平,因爲這是響應網站應該如何附加的是我的CSS。永久擺脫水平滾動

#phone {font-size:18px; } 
p.serviceheader {font-size:18px; color:#464646;} 
#servicetext {margin-top:-227px; margin-left:15px; color:#ffffff;} 
#servicelink {margin-top:-4px; margin-left:15px} 
#securitylink {margin-top:20px; margin-left:2px} 
#networkinfrastructurelink {margin-top:-20px; margin-left:-2px} 
#itlink {margin-top:-20px; margin-left:8px} 
#datalink {margin-top:46px; margin-left:8px; color:#ffffff;} 
#personnellink {margin-top:6px; margin-left:15px} 
#hometext {font-size:31px; text-align:right; line-height:1.5; font-weight:bold; margin-top:-25px;} 
#abouthome {margin-left:20px; float:left;} 
#contacthome {font-size:23px; color:#464646; font-weight:bold;} 
#prefooter {color:#464646; font-size:23px;} 
#careershome {color:#464646; font-size:18px; margin-top:-5px;} 
#jointeam {color:#464646; font-size:23px; margin-top:35px;} 
#benefits {color:#464646; font-size:23px; margin-top:7px;} 
#joinus {color:#464646; font-size:23px; margin-top:38px; } 
#employees {color:#464646; font-size:18px; margin-top:10px; line-height:20px;} 
p.corporateoffice {font-size:20px; color:#464646;} 
p.officetext {color:#464646;} 
#footer-links {font-size:12px;} 
#chamberlogo {margin-top:10px; margin-left:28px;} 
#sbalogo {margin-left:3px;margin-top:30px;} 
#bicsilogo {margin-left:53px;} 
#alliance {margin-left:15px;} 
#mbchamber {margin-left:3px;} 
#pmilogo {margin-left:55px;} 
.prefooterlink a {color:#464646;} 
#afcealogo {margin-bottom:-9px; margin-left:30px;} 
#bbb {margin-left:17px;} 
#infocommlogo {margin-left:40px;} 
h1.relatedpgs {font-size:24px; color:#990812; margin-left:-8px;} 
h1.pheader {font-size:26px;} 
.customheader {margin-top:-60px;} 
.bodycontentalign {margin-left:11px;} 
.navalign {margin-top:-15px; margin-left:11px;} 
.topphone {margin-top:-25px;margin-left:105px;} 
.socialicons {margin-top:-32px; margin-left:60px;} 
.footercontactinfo {background:url('/wp-content/uploads/2012/05/ragedge-right.gif') repeat-y scroll right top #ECECEC; 
    color: #5a5858; 
    float: left; 
    min-height:260px; 
    width: 260px; 
} 
.footerlogos {background:url('/wp-content/uploads/2012/05/ragedge-left.gif') repeat-y scroll left top #ECECEC; 
    color: #5A5858; 
    float: left; 
    min-height:260px; 
    width: 680px; 
    margin-left:-95px; 
} 
.innerpagenav {background-color:#ececec;} 
#block-69 {margin-top:-15px;} 
#block-72 {margin-top:-74px; margin-left:-1px;} 
#block-73 {margin-top:-70px; margin-left:-19px; background-color:#000000; color:#ffffff;} 
#block-372 {margin-top:-55px;} 
#block-370 {margin-top:-45px;} 
#block-25 {margin-top:25px;} 
#datacentertext {margin-top:-245px; margin-left:10px; color:white;} 
#itintegrationtext {margin-top:-245px; margin-left:10px; color:white;} 
#securitytext {margin-top:-245px; margin-left:10px; color:#ffffff;} 
#networkinfrastructuretext {margin-top:-245px; margin-left:10px; color:#ffffff;} 
#vtctext {margin-top:-245px; margin-left:5px; color:#ffffff;} 


/*regular site css*/ 

html, body { 
    width: 100%; 
    overflow-x: hidden; 
} 
.container 
{ 

    background-color:white; 
    display:inline-block; 
    height:100%; 
    width: 100%; 
    /*border: solid 1px #aaa;*/ 
    text-align: left; 
    font-size: 1em; 
    /*letter-spacing:px; */ 
    /*white-space: nowrap; */ 
    /*line-height: 12px; */ 


} 


.square 
{ 


    width:19.5%; 
    margin:auto; 
    /* border: solid 1px #ccc; */ 
    display: inline-block; 
    vertical-align:middle; 
} 

.words 
{ 
background-color:#990913; color:white; 
text-align:left; 
width:12.8em;height:15em; 
line-height:30px; 
text-align:center; 


} 


#block-72 li.widget 
{ 
    margin-bottom:2%; 
} 
.title 
{ 
    /*display:inline-block;*/ 
    font-size:18px; 
    padding-bottom:5px; 
    /*color:#444444;*/ 
} 


    #block-73 li.widget 
    { 
    margin-top:5%; 

    } 

    #block-66 
    { 
    /*background-color:purple;*/ 
    position:relative; 
    top:-1px; 
    margin-left:105px; 

    } 
    #block-67 
    { 
    padding-top:5%; 
    } 

    #block-52 
    { 
    padding-top:15px; 
    } 
    a.linktext 
{ 
    color:#464646 !important; font-size:20px; 
} 
a.linktext1 
{ 
    color:#464646 !important; font-size:20px; 
} 
a.linktext2 
{ 
    color:#464646 !important; font-size:20px; 
} 

    .centerlink 
    { 
    text-align: center!important; 
    } 
.fb-hide 
{ 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
} 
.corporateoffice 
{ 
    color:#464646; 
    font-size:20px; 
} 
.officetext 
{ 
    color:#464646; 
} 
@media screen and (device-width:800px) 
    { 
    .words 
    { 
     /*color:orange;*/ 
    } 
/* .hide 
    { 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
    }*/ 
    a.linktext1 
{ 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
} 

} 

@media screen and (min-width: 768px)and (orientation:portrait)/*ipad*/ 
{ 
    .container 
     { 
      height:100%; 
      width:100%; 
      text-align:center; 
      background-color:white; 
      display:inline-block; 

     } 
     .square 
     { 
     margin:auto; 
      width:15em!important; 
      text-align:center; 
      display:inline-block; 

     } 
    .words 
     { 

     width:100%; 
     } 
     a.linktext 
     { 
     color:#464646 !important; font-size:17px; 
     } 
     a.linktext1 
     { 
     color:#464646 !important; font-size:17px; 
     } 
     a.linktext2 
     { 
      position: absolute !important; 
     top: -9999px !important; 
     left: -9999px !important; 

    } 
    .centerlink 
    { 
    text-align: center; 
    } 
    #block-65 
    { 
    margin:-65 0 0 0 ; 
    position:absolute; 
    left:75px; 

    } 
    #block-66 
    { 
    position:absolute; 
     top:360px!important; 
     left:400px!important; 
     font-weight:bold!important; 
     font-size:23px; 
     line-height:1px; 

    } 
.officetext 
{ 
    font-size:12px; 
} 
.corporateoffice 
{ 
    font-size:14px; 
} 
.data 
{ 
    width:100%!important; 
} 
    #block-249 
    { 
     position:absolute; 
     top:360px!important; 
     left:400px!important; 
     font-weight:bold!important; 
     font-size:23px; 
     line-height:1px; 

    } 
    #block-301 
    { 
     position:absolute; 
     top:360px!important; 
     left:400px!important; 
     font-weight:bold!important; 
     font-size:23px; 
     line-height:1px; 

    } 
    #block-126 
{ 
     position:absolute; 
     top:360px!important; 
     left:400px!important; 
     font-weight:bold!important; 
     font-size:23px; 
     line-height:1px; 
} 
    #block-31 
    { 
     position:absolute; 
     top:360px!important; 
     left:400px!important; 
     font-weight:bold!important; 
     font-size:23px; 
     line-height:1px; 
    } 
    #block-10 
    { 
     position:absolute; 
     top:360px!important; 
     left:400px!important; 
     font-weight:bold!important; 
     font-size:23px; 
     line-height:1px; 
    } 
     #block-358 
    { 
     position:absolute; 
     top:360px!important; 
     left:400px!important; 
     font-weight:bold!important; 
     font-size:23px; 
     line-height:1px; 
    } 
    .hwr-form-title 
    { 
     line-height:25px; 
    } 
} 

/*@media screen and (min-width: 768px)and (orientation:landscape) 
{ 
    .hide 
     { 

     width:68%; 
     height: 185px; 

     margin: auto !important; 
     } 
}*/ 
@media screen and (min-width:1025px) /*and (orientation:landscape)*/ 
{ 
    .hide 
    { 
      position: absolute !important; 
     top: -9999px !important; 
     left: -9999px !important; 

    } 

    a.linktext1 
     { 
      position: absolute !important; 
     top: -9999px !important; 
     left: -9999px !important; 

    } 

} 
/*@media screen and and (min-width:) (max-width:1024px) and (orientation:landscape) 
{ 

    .topphone 
    { 
     font-weight:bold; 

    } 

    a.linktext1 
     { 
      position: absolute !important; 
     top: -9999px !important; 
     left: -9999px !important; 

    } 
}*/ 
@media screen and (min-width:712px) and (max-width:1024px) and (orientation:landscape)/*between*/ 
{ 
     .container 
     { 
     /* height:100%;*/ 
      width:100%; 
      text-align:center; 
      background-color:white; 
      /*display:inline-block;*/ 

     } 
     .square 
     { 

     margin:auto; 
      width:12em; 
      text-align:left; 

     } 
    .words 
    { 
     width:100%; 
     height:210px; 
     /*color:red;*/ 
    } 
    a.linktext1 
     { 
      position: absolute !important; 
     top: -9999px !important; 
     left: -9999px !important; 

    } 
} 

@media screen and (max-width: 680px) and (orientation:landscape)/*landscape small phone*/ 

    { 
     #wrapper-4,#wrapper-5,#wrapper-9,#wrapper-10,#wrapper-11,#wrapper-12,#wrapper-13,#wrapper-14,#wrapper-15,#wrapper-16,#wrapper-17/*stops from scrolling horizontal*/ 
    { 
      width:auto; 
      overflow: hidden; 
      padding :0.5em; 
    } 

    .hide /*logo*/ 
     { 

     width:68%; 
     height: 185px; 
     /*display: block;*/ 
     margin: auto !important; 
     } 
    .footerlogos 
    { 
     position: absolute !important; 
      top: -9999px !important; 
      left: -9999px !important; 
    } 
     .container 
     { 
     /* height:100%;*/ 
      width:100%; 
      text-align:center; 
      background-color:white; 
      /*display:inline-block;*/ 

     } 
     .square 
     { 

     margin:auto; 
      width:20em; 
      text-align:left; 

     } 

     .words 
      { 
      width:100%; 
      font-size:16px; 
       height:180px; 
      text-align:center; 
      } 


    #block-72 li.widget 
     { 
      margin-bottom:2%; 
     } 
    .title 
     { 
     /*display:inline-block;*/ 
     font-size:18px; 
     padding-bottom:5px; 
     /*color:#444444;*/ 
     } 


    #block-73 li.widget 
     { 
     margin-top:5%; 

     } 

    /*#block-66 
     { 

     width:100% 
     display:inline; 
     font-weight:bold; 
     position:absolute; 
     left:-25px; 
     top:25px; 
     letter-spacing:2px; 
     white-space:nowrap; 
     font:OpenSans-Semibold; 


     }*/ 
    /*.phonenav 
    { 
    font-size:20px!important; 
    line-height:200%; 
    }*/ 
    .insideimg 
    { 
    /* align:center;*/ 
    /* position:absolute;*/ 
    /*top:300px;*/ 
    height:auto; 
    width:300px; 
    float:right; 

    } 

    /*.officetext 
    { 
    position:absolute; 
    top:500%; 
    width:100%; 
    font-size:20px; 
    white-space:nowrap; 
    color:red; 
    }*/ 
    a.linktext2 
    { 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
    } 
    .centerlink 
    { 
    text-align: center; 
    } 

    /*#block-38 
    { 
    margin:0; 
    position:absolute; 
    top:1625px; 
    width:100%; 
    color:red!important; 

    }*/ 
    .corporateoffice 
    { 
    font-color:black!important; 
    font-size:17px!important; 
    font:semi-bold; 
    white-space:nowrap !important; 
    } 
    .officetext 
    { 
    font-size:16px!important; 
    } 


/* .fb 
    { 

    position:absolute; 
    left:2px; 
    text-align:right; 
    background:white; 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
    }*/ 
/*.fb-hide 
{ 
    position:absolute; 
    left:2px; 
    text-align:right; 
    background:white; 

}*/ 

.socialicons 
{ 
     display:inline-block; 
    /* background-color:grey!important;*/ 
    position:relative; 
    left:350px; 
    top:-15px!important; 
    z-index:2; 

} 
    /*.fb 
    { 
    background:white; 
    } 
*/ 

a.linktext 
{ 
    color:#464646 !important; font-size:20px; 
} 
a.linktext1 
{ 
    color:#464646 !important; font-size:20px; 
} 
    .block-type-hwr-contact #hwr-contact-27 .hwr-form-title 
    { 
     line-height:90%; 
    } 
    /*.topfooter 
    { 
     margin:0; 
    position:absolute; 
     top:80px!important; 
    background:transparent 


    } 
    .botfooter 
{  
    margin:0; 
    float:right; 
    position:absolute; 
    top:1px; 
    right:-330px; 
    background:transparent; 

}*/ 

/*.contact { 
    position:absolute; 
    top:700px!important; 
    color:green; 
    margin-top:100px!important; 

    }*/ 
    .contact 
    { 
     background:blue!important; 
     display:inline!important; 
     /*position:absolute!important;*/ 
     top:19px!important; 

    } 
    #block-358 
    { 
     position:absolute; 
     top:230px!important; 
     left:5px!important; 
     font-weight:bold!important; 
     /*background:red!important;*/ 

    } 
    #block-66 
    { 
     position:absolute; 
     top:230px!important; 
     left:5px!important; 
     font-weight:bold!important; 
     /*background:blue!important;*/ 

    } 
    #block-249 
    { 
     position:absolute; 
     top:230px!important; 
     left:5px!important; 
     font-weight:bold!important; 
     /*background:orange!important;*/ 

    } 
    #block-301 
    { 
     position:absolute; 
     top:230px!important; 
     left:5px!important; 
     font-weight:bold!important; 
    /* background:pink!important;*/ 

    } 
    #block-126 
{ 
    position:absolute; 
     top:230px!important; 
     left:5px!important; 
     font-weight:bold!important; 
     /*background:purple!important;*/ 
} 
    #block-31 
    { 
     position:absolute; 
     top:230px!important; 
     left:5px!important; 
     font-weight:bold!important; 
    /* background:green!important;*/ 
    } 
    #block-10 
    { 
     position:absolute; 
     top:230px!important; 
     left:5px!important; 
     font-weight:bold!important; 
     /*background:grey!important;*/ 
    } 
    .customheader 
    { 
     position: absolute !important; 
     top: -9999px !important; 
     left: -9999px !important; 
    } 
} 
    /* @media screen and (min-width:601px) and (max-width:679px) 
    { 
     .container 
     { 

      width:100%; 
      text-align:center; 
      background-color:white; 


     } 
     .square 
     { 
     margin:auto; 
      width:15em; 
      text-align:left; 


     } 
     .words 
     { width:100%; 

     } 
     a.linktext2 
    { 
     position: absolute !important; 
     top: -9999px !important; 
     left: -9999px !important; 
    } 
    .topphone 
     { 
      font-weight:bold; 
     } 
    }*/ 
    @media screen and (device-width:600px)/*tablet 7 inch*/ 
    { 
     .container 
     { 
     /* height:100%;*/ 
      width:100%; 
      text-align:center; 
      background-color:white; 


     } 
     .square 
     { 
     margin:auto; 
      width:12.85em; 
      text-align:left; 


     } 
     a.linktext1 
    { 
     position: absolute !important; 
     top: -9999px !important; 
     left: -9999px !important; 
    } 
    .centerlink 
    { 
    text-align: center; 
    } 
    .socialicons 
    { 
     position:absolute!important; 
     top:260px!important; 
     left:395px!important; 
    /*background:red!important;*/ 
    } 

    } 
/*@media only screen and (device-height:568px) and (device-width:320px) and (-webkit-min-device pixel-ratio:2) and (orientation :landscape) *//*iphone 5*/ 
    @media screen and (device-aspect-ratio: 40/71) 
    { 


     .container 
     { 
     /* height:100%;*/ 
      width:100%; 
      text-align:center; 
      background-color:white; 


     } 
     .square 
     { 
     margin:auto; 
      width:18em; 
      text-align:left; 


     } 

     #block-66 
     { 
      /*left:65px!important;*/ 
      font-size:10px!important; 

      /*background:blue!important;*/ 

     } 
     .words 
     { 
      height:205px; 
      font-size:18px; 
     } 
     .officetext 
     { 
      font-size:10px!important; 
     } 
     .corporateoffice 
     { 
      font-size:12px!important; 
     } 
     /* .botfooter 
     {  

      float:right; 
       position:absolute; 
      top:2px; 
      right:20px; 

     }*/ 

     } 
    @media only screen and (max-width:500px) and (orientation:landscape)/*iphone4*/ 
{ 


    .container 
     { 

      width:100%; 
      text-align:center; 
      background-color:white; 


     } 
     .square 
     { 

      margin:auto; 
      width:15em!important; 
      text-align:left; 


     } 

     .words 
     { 
     width:100%; 
     height:203px!important; 
     text-align:center; 
     font-size:16px!important; 
     } 



/*.botfooter 
{  

    float:right; 
     position:absolute; 
    top:15px; 
    right:8px!important; 

}*/ 
    .officetext 
    { 
    font-size:12px!important; 
    } 
    .coporateoffice 
    { 
    font-size:14px!important; 
    } 

    .contact1{ 
    position:absolute; 
    top:2050px!important; 
    margin-top:0px; 
    /*margin-top:100px!important;*/ 
    } 

#block-66 
{ 
    /* position:absolute;*/ 
    left:-215px!important; 
    top:254px!important; 
} 

    .socialicons 
    { 
    position:absolute; 
    left:300px!important; 
    top:215px!important; 
    } 
    #block-358 
    { 
     position:absolute; 
     top:245px!important; 
     left:-210px!important; 
     font-weight:bold!important; 

    } 
    #block-249 
    { 
     position:absolute; 
     top:245px!important; 
    left:-210px!important; 
     font-weight:bold!important; 

    } 
    #block-301 
    { 
     position:absolute; 
     top:245px!important; 
     left:-210px!important; 
     font-weight:bold!important; 

    } 
    #block-126 
{ 
    position:absolute; 
     top:245px!important; 
     left:-210px!important; 
    font-weight:bold!important; 
} 
    #block-31 
    { 
     position:absolute; 
     top:245px!important; 
     left:-210px!important; 
     font-weight:bold!important; 
    } 
    #block-10 
    { 
     position:absolute; 
     top:245px!important; 
     left:-210px!important; 
    font-weight:bold!important; 
    } 
    .contact 
    { 

     display:inline!important; 
     /*position:absolute!important;*/ 
     top:19px!important; 

    } 

} 
@media screen and (min-width:481px) and (orientation:portrait) 
{ 
    container 
    { 
     width:100%; 
     text-align:left; 
     height:auto; 
    background-color:white; 
    } 
    .square{ 
    margin:auto; 
    width:18em; 
    text-align:left; 
    display:inline-block; 
    background-color:white; 

    } 
    a.linktext2 
    { 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
    } 
    .words 
    { 
     width:100%; 

    } 
} 
@media screen and (min-width: 320px) and (max-width: 480px)/*small devices*/ 


{ 

    .hide/*logo*/ 
    { 
    margin-top:10%; 
    margin-bottom:2px; 
    display:block; 
    } 
a.linktext2 
    { 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
    } 
    .container 
    { 
     width:100%; 
     text-align:left; 
     height:auto; 
    background-color:white; 
    } 
    .square{ 
    margin:auto; 
    width:100%; 
    text-align:left; 
    display:inline-block; 
    background-color:white; 

    } 


.words 
{ 
    color:white; 
    font-size:18px; 
    text-align:center; 
    background-color:#990913; 
    width:100%; 
    height:150px; 

} 
.title 
{ 
    width:100%; 
    } 

    #block-73 li.widget 
    { 
    margin-top:30%; 

    } 

#block-66 
{ 
    position: relative; 
    top: 45px!important; 
    padding-left:60%; 
    font-weight:bold !important; 
    z-index:3; 
    line-height:4px; 
} 
#block-358 
    { 
     position: relative; 
    top: 45px!important; 
    padding-left:60%; 
    font-weight:bold !important; 
    z-index:3; 
    line-height:4px; 

    } 
    #block-249 
    { 
     position: relative; 
    top: 45px!important; 
    padding-left:60%; 
    font-weight:bold !important; 
    z-index:3; 
    line-height:4px; 

    } 
    #block-301 
    { 
     position: relative; 
    top: 45px!important; 
    padding-left:60%; 
    font-weight:bold !important; 
    z-index:3; 
    line-height:4px; 

    } 
    #block-126 
{ 
    position: relative; 
    top: 45px!important; 
    padding-left:60%; 
    font-weight:bold !important; 
    z-index:3; 
    line-height:4px; 
} 
    #block-31 
    { 
     position: relative; 
    top: 45px!important; 
    padding-left:60%; 
    font-weight:bold !important; 
    z-index:3; 
    line-height:4px; 
    } 
    #block-10 
    {position: relative; 
    top: 45px!important; 
    padding-left:60%; 
    font-weight:bold !important; 
    z-index:3; 
    line-height:4px; 
    } 
    /*.phonenum 
    { 
    background-color:white; 

    position:absolute; 
    top:5px; 
    z-index:-1; 

    }*/ 
    .insideimg 
    { 
    /* align:center;*/ 
    /* position:absolute;*/ 
    /*top:300px;*/ 
    height:120px; 
    width:140px; 
    float:right; 
    } 
    .centerlink { 
    text-align: center; 
    } 
    .footer 
    { 
    color:black!important; 
    font-size:20px; 
    } 

    .fb 
    { 
    background:white; 
    } 
    .fb-hide 
    { 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
    } 
    .insideimg 
    { 
    /* align:center;*/ 
    /* position:absolute;*/ 
    /*top:300px;*/ 
    height:auto; 

    float:right; 

    } 
} 
@media screen and (max-width: 319px) 
{ 
     .container 
    { 
     width:100%; 
     text-align:left; 
     height:auto; 
    background-color:white; 
    } 
    .square{ 
    margin:auto; 
    width:20em; 
    text-align:left; 
    display:inline-block; 
    background-color:white; 

    } 
    .words 
    { 
     width:100%; 
    } 
a.linktext2 
    { 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
    } 
} 
+0

溢出-X:隱藏;隱藏水平滾動條是的,是不是你要求的? – 2014-08-27 14:10:54

+0

不,我不希望用戶在他們來到我的網站時能夠在他們的移動設備上左右移動。如果您要在移動設備上訪問我的網站sandbox.mercomcorp.com,您可以從一側移動到另一側,而不像您前往http://www.groom-pro.com/不能從一側移動到另一側@ SantiagoRebella – 2014-08-27 14:15:29

回答

0

你需要把你的HTML頭元視口代碼,類似:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

+0

我補充說,也由於某種原因,它不工作 – 2014-08-27 14:34:41

+0

@CandiceMoses我看你的網站和調整大小和工作正常我,我沒有看到任何滾動既不滾動的可能性 – 2014-08-27 14:39:53

+0

我可以問你使用什麼設備,也許它只是我的設備 – 2014-08-27 14:42:35