Many people asked me to help them about it so now I got time to share these codes :)
First you need a browser detection code and u can use this code
This will help u to separate PC n MOBILE items [ex: <div id='mobile'>Mobile items</div> <div id='pc'>PC Items</div>
Then you need two more css to set items left/right for pc version
here raz_left for left items and raz_right for right items
I hope now you can make pc version for your site but if you face any problem then comment here for solve.
How I Use?
<div class="pc">CODE FOR SHOW IN PC</div>
<div class="mobile">CODE FOR SHOW IN MOBILE</div>
<div class="raz_righ">CODE FOR RIGHT</div>
<div class="raz_left">CODE FOR LEFT</div>
Like That?
Logged class or non logged class code
All Code Use in wml/xhtml
First you need a browser detection code and u can use this code
<script type="text/javascript">var w=window.innerWidth; if (w>=900){document.write ('<style>#pc {display:block} #mobile {display:none}</style>');} else {document.write('<style>#mobile {display:block} #pc {display:none}</style>');}</script>
This will help u to separate PC n MOBILE items [ex: <div id='mobile'>Mobile items</div> <div id='pc'>PC Items</div>
Then you need two more css to set items left/right for pc version
/** RESPONSIVE STYLE **/
@media only screen and (min-width:500px)
{body {min-width: 990px; max-width: 1024px; margin: 5px auto 10px auto; padding:0px;} #pc {display:block} #mobile {diplay:none}
#raz_left{width: 65%;float:left; display:block; margin-left:0px; margin-right:8px; margin-top: 10px; overflow: hidden;}
#raz_right{float:left; display:block; width: 34%;margin-top: 10px; overflow: hidden; }}
@media only screen and (max-width:500px)
{body {min-width: 98%; max-width: 100%; margin: 0 auto; border: 1px solid #f5f5f5;padding:opx}
#mobile{display: yes;}
#pc {display: none; }}
@media only screen and (min-width:500px)
{body {min-width: 990px; max-width: 1024px; margin: 5px auto 10px auto; padding:0px;} #pc {display:block} #mobile {diplay:none}
#raz_left{width: 65%;float:left; display:block; margin-left:0px; margin-right:8px; margin-top: 10px; overflow: hidden;}
#raz_right{float:left; display:block; width: 34%;margin-top: 10px; overflow: hidden; }}
@media only screen and (max-width:500px)
{body {min-width: 98%; max-width: 100%; margin: 0 auto; border: 1px solid #f5f5f5;padding:opx}
#mobile{display: yes;}
#pc {display: none; }}
here raz_left for left items and raz_right for right items
I hope now you can make pc version for your site but if you face any problem then comment here for solve.
How I Use?
<div class="pc">CODE FOR SHOW IN PC</div>
<div class="mobile">CODE FOR SHOW IN MOBILE</div>
<div class="raz_righ">CODE FOR RIGHT</div>
<div class="raz_left">CODE FOR LEFT</div>
Like That?
Logged class or non logged class code
<style> .guest {display: none}</style>
<style> .member {display: blok}</style>
<style> .member {display: blok}</style>
All Code Use in wml/xhtml

No comments:
Post a Comment