Macraze Macraze - 6 months ago 15
CSS Question

How to create responsive blocks by using just CSS and HTML

Check: http://apkapp.in/software/view/43908225?download=ChatAdda.apk

I want to create a responsive block as shown below:

PC View:

PC view

Mobile View:

Mobile View

For doing this, I am using the following CSS and HTML:



<style>
@media only screen and (min-width:1220px){ #mobile,.mobile{display:none} }
@media only screen and (max-width:1220px){ #pc,.pc{display:none} #mobile,.mobile{display:block} }
@media handheld{ #pc,.pc{display:none} #mobile,.mobile{display:block} }
</style>

<div class="pc text">
<table><tr><td><table><tr><td width="100px"><span class="thumb"><img src="http://img.wapkafile.com/software/thumb/43908225/2696215/935beea5c2c820f5a5e54a65cc7fcc52/240.jpg" /></span></td><td width="*"><h2>ChatAdda</h2>
<ul><li><strong>Size : 13.11 MB</strong></li>
<li><strong>Downloads : 12</strong></li>
<li><strong>Category :<a href="http://apkapp.in/software/list/1430431"> Communication</a></strong></li>
<li><strong>Price : Free</strong></li>
</ul></td></tr></table></td>
<td><script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"></script></td></tr></table>
</div>

<div class="mobile text">
<table><tr><td width="100px"><span class="thumb"><img src="http://img.wapkafile.com/software/thumb/43908225/2696215/935beea5c2c820f5a5e54a65cc7fcc52/240.jpg" /></span></td><td width="*"><h2>ChatAdda</h2>
<ul><li><strong>Size : 13.11 MB</strong></li>
<li><strong>Downloads : 12</strong></li>
<li><strong>Category :<a href="http://apkapp.in/software/list/1430431"> Communication</a></strong></li>
<li><strong>Price : Free</strong></li>
</ul></td></tr></table>
</div>
<div class="mobile text"><script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"></script></div>





But the issue is that I am using
@media
CSS to show the blocks in mobile and PC views by using
display:none
to the other view which makes me to use the ad code (
<script data-cfasync="false" type="text/javascript" src="http://www.adnetworkperformance.com/a/display.php?r=449076"></script>
) for the second block to use two times. How do I display the same using the ad code only once and also without using tables?

Answer

Instead of creating two div's with the same content for mobile and web views, and hiding / showing one of them with media queries, you should include the content once in html, and change how they are displayed using media queries.

Like;

<body>
    <div class="block">
        ... content goes here
    </div>

    <div class="block">
        ... content goes here
    </div>
</body>

<style>
    @media only screen and (min-width:1220px) { 
        .block { display: inline-block; vertical-align: middle; } 
    } 

    @media only screen and (max-width:1220px) { 
        .block { display: block; }
    }
</style>
Comments