chitrag Posted January 24, 2016 Share Posted 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 24, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
chitrag Posted January 25, 2016 Author Share Posted January 25, 2016 For example ? 885 px change to 100% ? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
chitrag Posted January 29, 2016 Author Share Posted January 29, 2016 I used bootstrap css and js file in my page. But still it says my contents are larger than screen. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2016 Share Posted January 29, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now