How to configure mobile friendly page

chitrag · January 24, 2016

I have been using following custom.css file for my website and I have put viewport meta tag in my pages but still some errors in my pages and that does not fit in mobile and other application.

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;
}

I shall much appreciate if some body can help if I need to make changes in my css file

dsonesuk · January 24, 2016

You need to be using percentages more instead of fixed widths, then look into using media queries to adjust layout depending on device sizes.

chitrag · January 25, 2016

For example ?

885 px change to 100% ?

dsonesuk · January 25, 2016

What you do is use media queries to set outer container element to a size suitable for specific device width. The inner container widths, including images will use percentages. When the device becomes really small, a 3 column layout for desktop will not be suitable for smaller tablet or mobile phone, so these will need to adjusted to 2 then finally 1, OR some of these columns can be hidden.

Look into bootstrap to get a idea on how it adjusts to different devices.

chitrag · January 29, 2016

I used bootstrap css and js file in my page. But still it says my contents are larger than screen.

dsonesuk · January 29, 2016

1) Your site will NEVER be a responsive site when your site STILL uses tables for layout.

2) You may have bootstrap css,js links, but your site does not use these to produce a responsive site, you need to do more than just link to these files, i suggest to look at bootstrap tutorials.

Edited January 29, 2016 by dsonesuk

Sign In

How to configure mobile friendly page

Recommended Posts

chitrag

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

chitrag

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

chitrag

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity