CSS Mobile Site Code Snippet
Mobile rules the web these days, and if your website is not mobile, your missing out on a large slice of web traffic. Converting a website to mobile requires an addition to the CSS or Cascading Style Sheets (code that tells the website how to look), that distinguishes between screen sizes and makes the appropriate adjustments to the website. To learn all about CSS, check out the amazing resource site CSS Tricks.
Assembled below is mobile site code that can be altered and used to make your website phone friendly. The correlating class and id names will have to be adjusted or created for your particular website, and this will usually require someone savvy to CSS.
CSS Mobile Site Code
/* -==========================- MOBILE -==========================- */
@media only screen and (min-width:240px) and (max-width:639px) {
.menusearch {padding:13px 0;margin-top:28px;}
#header {
}
#logo {
margin-top:5px;
margin-bottom:-35px;
}
.searchbtn {
width:33px !important;
}
#secondarymenu-container {
padding-top:6px;
}
#secondarymenu, #mainmenu {
background:#fff;
padding:0 2%;
margin-top:10px;
}
#secondarymenu li, #mainmenu li {
border-top:1px solid #d7d7d7;
}
#secondarymenu li a, #mainmenu li a{
color:#363636;
text-decoration:none;
}
.fp-next, .fp-prev {
margin:0 -5px;
}
.footer-widgets .widgetf:first-child {
border:none;
}
#footer {
width:100%;
}
.widgetf {
border-top:1px solid #d3d3d3;
}
.articles .post-date {
float:none;
}
.articles dt p img {
display:none;
}
.fp-nav {
bottom:-18px;
}
.slider-container {
padding-bottom:20px;
}
#s {
width:86%;
}
Notice how the main focus on making sure the navigation menu is a different experience as well as the logo and footer aligned and adjusted to fit the mobile screen? Without these adjustments the site will be very difficult to navigate. Search and sliders and something your site may have, or may not, feel free to chop out the pieces you need and make the appropriate changes to the class names.
Leave a Reply
Want to join the discussion?Feel free to contribute!