How to create responsive blocks by using just CSS and HTML


Tags: html,css

Problem :

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?



Solution :

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>

    CSS Howto..

    How to: Illustrator graphic to web animation [closed]

    How can I create two columns of text next to each other using CSS?

    How to get same effect as jQuery's slideToggle using CSS 3 transitions?

    Show a box with text when hovering an image

    How to display a side panel on the left and Google maps api canvas on the right, filling remainder of page?

    Why does an absolutely positioned child expand container height and how to prevent this?

    CSS style not showing on print preview

    How can I build a dynamic menu using CSS and JavaScript?

    How to change placeholder color for number input? (Firefox)

    How to transform Menu icon to Arrow icon? [closed]

    How to Display this CSS List using Class

    How to read this hover syntax in css?

    How to style table as responsive using Jquery mobile?

    How to make div stay visible when hovering on it

    Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?

    How to add a table inside a div with its CSS working

    How to extract icon from picture and display it in page? (by javascript or jquery or css)

    How to replace direct image calling with sprites, in JavaScript?

    How to make background image position stay same on all resolutions?

    How to edit jquery slider

    How to change color of selection in Select2 4.0.1?

    Why is my text not showing in my DIV?

    How Can I remove the injected CSS Resource in GWT?

    How to use “all” property in CSS

    How to disable css warning “Unknown property” in Eclipse Mars?

    How to edit the CSS of a selector in Polymer 1.0

    How do I centre align two BTN button within a jumbotron in HTML

    How can I join background images?

    How do I add custom fonts? [duplicate]

    How to make hover use border-radius first-child