Zaloguj | Zarejestruj | FAQ
Anonymous

How to make mobile friendly css

+ Odpowiedz

Posty: 3 Strona 1 z 1


How to make mobile friendly css

przez nepalithito » So sty 16, 2016 9:54 am

How can I make mobile friendly with this css file.


Kod: Zaznacz cały
html {
   height: 100%;
   margin-bottom: 1px;
}

body {
   margin: 0px;
   padding: 0px;
   background-color: #CCCCCC;
   
}

body,
td.sohotext,
td.text,
p,
span {
   font-family: sans-serif, Helvetica, Verdana, Arial;
   font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}
   color: #525252;
   line-height: 140%;   
}

/* Fixes and hacks */

.clearfix:after {
   clear: both;
   display: block;
   content: ".";
   height: 0;
   visibility: hidden;
}

* html input.quick_signup {
   background-attachment: fixed;
   }

/*END - Fixes and Hacks */


/* Navigation */

#mainnav a:link, #mainnav a:visited  {

   color: #FFF;
   text-decoration: none;
   display: block;
   padding-right: 13px;
   float: left;
   padding-top: 8px;
   padding-left: 13px;
   padding-bottom: 7px;
   background-image: url(images/menu_div.jpg);
   background-repeat: no-repeat;
   background-position: right top;
}


#mainnav a:hover {
   color: #36CC2F;
   background-image: url(images/nav_active.jpg);
   background-repeat: repeat-x;
   background-position: right top;
}

.hmains {
    font-size: 100%;
}
#megamenu { 
        list-style-type:none; 
        width:100%; 
        margin: 3px auto 04px auto; 
        height:40px; 
        padding:2px 0px 3px 0px;
}
table.vmenu_subs {
    margin-bottom: 30px;
   margin-top: 15px;
}

/*#leftav a:link, #leftnav a:visited, */
   a.vmenu_sub_off:link,
   a.vmenu_sub_off:visited,
   a.vmenu_sub_on:link,
   a.vmenu_sub_on:visited  {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 95%;
   font-weight: bold;
   color: #000;
   background-image: url(images/sideNav_bullet.gif);
   background-repeat: no-repeat;
   background-position: left center;
   padding-top: 5px;
   padding-bottom: 5px;
   border-bottom: 1px solid #acacac;
   text-decoration: none;
   padding-left: 24px;
   display: block;
   width: 150px;
}

/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active  {
   color: #666;
}


a:link, a:visited {
   color: #00CC00;
   text-decoration: none;
}

a:hover {
   color: #009900;
}

#feat a:link, #feat a:visited {
   color: #fdb417;
   text-decoration: none;
}

#feat a:hover {
   color: #fed27e;
}

/*END - Navigation */

#headwrapper {
   background-image: url(images/top_bg.png);
   background-repeat: repeat;
   margin: 0px;
   padding: 0px;
   height: 109px;
   position: relative;
}
#featwrapper {
   background-color: #1e8019;
   height: 124px;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #185d14;
   overflow: hidden;
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: #2b9d22;
}
#feat {
   width: 885px;
   margin-right: auto;
   margin-left: auto;
   background-image: url(images/feat_bg.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   height: 124px;
   color: #FFFFFF;
}
#navwrapper {
   background-color: #1e8019;
   height: 32px;
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: solid;
   border-bottom-style: solid;
   border-top-color: #2b9d22;
   border-bottom-color: #185d14;
}
#nav {
   background-image: url(images/nav_bg.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   height: 32px;
   width: 885px;
   margin-right: auto;
   margin-left: auto;
   color: #FFFFFF;
}
#contentwrapper {
   background-color: #ededf1;
   margin: 0px;
   padding: 0px;
}
#maincontent {
   background-image: url(images/content_bg.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   width: 885px;
   margin-right: auto;
   margin-left: auto;
   background-color: #ededf1;
}
#mainnav {
   width: 72%;
   float: left;
   padding-left: 5px;
}
#signup {
   width: 25%;
   padding-left: 5px;
   float: left;
   height: 20px;
   padding-top: 2px;
   font-size: 85%;
   color: #cccccc;
   text-align: center;
}

#subnav {
   margin: 0px;
   float: left;
   width: 25%;
   padding-top: 15px;
   padding-right: 5px;
   padding-bottom: 5px;
   padding-left: 5px;

}
#belowmenu {
   display: block;
   float: left;
   width: 210px;
   padding-top: 15px;
   padding-left: 5px;
   
}
div.sidebox {
   display: block;
   float: left;
   width: 210px;
}

#content {
   margin: 0px;
   width: 70%;
   float: left;
   padding-top: 12px;
   padding-right: 7px;
   padding-bottom: 12px;
   padding-left: 7px;
   overflow: hidden;
}
#date {
   font-size: 90%;
   text-align: right;
   color: #858585;
}

#featleft {
   float: left;
   width: 25%;
   padding-left: 5px;
   padding-top: 5px;
}
#featright {
   float: left;
   width: 72%;
   padding-left: 10px;
   padding-top: 5px;
}

#footer {
   text-align: center;
   width: 885px;
   margin-right: auto;
   margin-left: auto;
   padding-top: 10px;
   font-size: 85%;
   padding-bottom: 10px;
   color: #939393;
}

#head {
   height: 109px;
   width: 885px;
   margin-right: auto;
   margin-left: auto;
}
#logo_box {
   height: 109px;
   float: left;
   width: 28%;
}
#tagline {
   float: left;
   width: 70%;
   color: #999999;
   text-align: right;
   padding-top: 22px;
}

#logo {
   position: absolute;
   top: 3px;
}


#trimbar {
   background-color: #000000;
   margin: 0;
   padding: 0;
   height: 7px;
   width: 100%;
   border-top: 1px solid #999999;
   border-bottom: 1px solid #333333;
}

div.newsbox {
    line-height: 115%;
}

/*hiding from IE mac \*/

* html .clearfix {
   height: 1%;
}

.clearfix {
    display: block;
}

/* end hiding from IE mac */


#footerwrapper {
   width: 100%;
   border-top-width: 2px;
   border-top-style: solid;
   border-top-color: #959595;
   background-color: #CCCCCC;
}
/* Integrated Styles */

.portfolio {
   padding-top: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid #EFEFEF;
   width: 100%;
   overflow: auto;
}

span.alert,
span.profile,
span.download,
span.search  {
   display: block;
    float: left;
   margin:  10px;
   padding: 10px 10px 10px 45px;
}

span.alert {
   color: #333333;
   background-color: #dddddd;
   border-bottom: 4px solid #b6b6b6;
   border-top: 4px solid #b6b6b6;
   background-image: url(images/span_alert.jpg);
   background-repeat: no-repeat;
   background-position: 7px 12px;
}

span.profile {
   color: #333333;
   background-color: #dddddd;
   border-bottom: 4px solid #b6b6b6;
   border-top: 4px solid #b6b6b6;
   background-image: url(images/span_profile.jpg);
   background-repeat: no-repeat;
   background-position: 7px 12px;
}

span.download {
    width: 100%;
   color: #333333;
   background-color: #dddddd;
   border-bottom: 4px solid #b6b6b6;
   border-top: 4px solid #b6b6b6;
   background-image: url(images/span_download.jpg);
   background-repeat: no-repeat;
   background-position: 7px 12px;
}

span.search {
   color: #333333;
   background-color: #dddddd;
   border-bottom: 4px solid #b6b6b6;
   border-top: 4px solid #b6b6b6;
   background-image: url(images/span_search.jpg);
   background-repeat: no-repeat;
   background-position: 7px 12px;
}

span.product {
   color: #333333;
   background-color: #fff;
   border: 1px solid #b6b6b6;
   margin:  10px;
   padding: 10px;
   font-size: 10px;
   line-height: 145%;
   display: block;
}

blockquote {
   border-top: 4px solid #D3D3D3;
   border-bottom: 4px solid #D3D3D3;
   margin:  10px;
   padding: 10px 10px 5px 45px;
   background-color: #f5f5f5;
   background-image: url(images/quote1.png);
   background-repeat: no-repeat;
   background-position: 5px 5px;
}

blockquote p {
   padding-right: 35px;
   background-image: url(images/quote2.png);
   background-repeat: no-repeat;
   background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li {
        background-image: url("images/li_bullet.gif");
        background-position: 0px 4px;
        background-repeat: no-repeat;
        overflow: hidden;/* added by dsonesuk as li cannot detect area of    floated 'a' elements*/
        padding-left: 14px;
        margin-left: 0px 4px;
        font-size: 12px;
}

ul, li {list-style-type:none !important;}
}

h4 {
   font-size: 115%;
   color: #333;
   margin-bottom: 5px;
   margin-top: 0px;
   padding: 0px;
}

#feat h4 {
   color: #fdb417;
}

h4 {
    font-size: 120%;
   color: #0066FF
}


h3 {
   font-size: 150%;
   color: #1E7D19;
}

h2 {
   font-size: 180%;
   color: #196115;
}
input.login_box {
   border: 0;
   height: 25px;
   width: 122px;
   padding-left: 30px;
   padding-top: 4px;
   background-image: url(images/login_bg.jpg);
   background-repeat: no-repeat;
   background-position: left top;
}

input.pass_box {
   border: 0;
   height: 25px;
   width: 122px;
   padding-left: 30px;
   padding-top: 4px;
   background-image: url(images/password_bg.jpg);
   background-repeat: no-repeat;
   background-position: left top;
}

input.quick_signup {
   border: 0;
   height: 19px;
   width: 168px;
   padding-left: 32px;
   padding-top: 3px;
   margin-top: 4px;
   background-image: url(images/quick_signup_bg.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   background-color: #ededed;
}

div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10

{
        padding-left: 28px;
   padding-bottom: 10px;
   background-image: url(images/answer.gif);
   background-repeat: no-repeat;
   background-position: 2px 0;
}

table#Search_Form,
table#Search_Form2  {
   
}

table#Detail_Results2,
table#Initial_Results {
    margin-top: 15px;
}
Avatar użytkownika

nepalithito

  • Posty: 95
  • Dołączył(a): Cz mar 01, 2012 10:10 am

Re: How to make mobile friendly css

przez johnmacd » Cz kwi 14, 2016 1:06 pm

Hi,

Set Input Widths to 100%
input, textarea {
max-width:100%
}


Thanks
Avatar użytkownika

johnmacd

  • Posty: 23
  • Dołączył(a): Cz cze 13, 2013 12:50 pm
--
Website Designer with 7 years experience as WordPress Developer. Affordable, Professional and Experienced. 100% Satisfaction. 24/7 Available.

Re: How to make mobile friendly css

przez Kavithaa » Pn lis 21, 2016 10:03 pm

Use media queries to fit the page within viewports. You can also try twitter bootstrap, a css framework which is mobile friendly by nature.
Avatar użytkownika

Kavithaa

  • Posty: 4
  • Dołączył(a): Śr lis 16, 2016 9:18 pm
  • Lokalizacja: India


+ Odpowiedz

Strona 1 z 1