How to make my HTML suitable for Mobile View

Question

How to make my HTML suitable for Mobile View (responsive UI)

I've coppied 3 packages ( Price labels ) source code from http://cssdeck.com/labs/pricingtables, and when I embed CSS and HTML code to my website the page view works fine using my PC (Desktop) but when I use my Phone(Android) not all of packages appear, Can you please help?

My website

It is called as Responsive UI for cross device alignments. Please refer bootstrap library and Jquery mobile UI. — Nagama Inamdar, Aug 31 '15 at 07:41

score 3 · Answer 1 · answered Aug 31 '15 at 07:29

3

Add this to your <head> tag

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">

answered Aug 31 '15 at 07:29

Red

37
6

i've added the code on tag but same result see http://mobiletest.me/iphone_5_emulator/?u=http://richmindedbranding.com/project-starter – Keith Zetterstrom Aug 31 '15 at 07:38
Edit the `margin` in the css to `margin: 0%;` – Red Aug 31 '15 at 07:40
added nothing changed :/ – Keith Zetterstrom Aug 31 '15 at 07:52

Geraldo Isaaks · Answer 2 · 2015-08-31T09:13:34.660

Add this to your head tag:

It you are using Twitter Bootstrap, add this class to you main/wrapper div:

<div id="Wrapper" class="container">

Otherwise look up some info on css media queries and add them to your style sheet.

EDIT: Since you are using WP locate your functions.php and add the files;

function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', false, NULL, 'all' );


wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

As for media queries, have a look at this post;

http://stackoverflow.com/questions/12045893/which-are-the-most-important-media-queries-to-use-in-creating-mobile-responsive

hope that helps

Can you do it for me plz? i mean heres the source code for the page: richmindedbranding.com/project-starter/index.htm view source code plz — Keith Zetterstrom, Aug 31 '15 at 08:50
Hi @KeithZetterstrom i have updated my answer... your '
' should become '
' — Geraldo Isaaks, Aug 31 '15 at 09:16

Nagama Inamdar · Accepted Answer · 2015-08-31T08:16:33.813

Try out the following code snippet. Since it makes use of basic elements of bootstrap functionality.You can check the UI responsiveness on across different mobile devices.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <body>
        <!--Added class row -->
        <div class="page-container row">
            <!---Added col-lg-4 class -->
           <!-- Total 12 columns are divided into 3 parts as col-lg-4 -->
            <div class="pricing-table col-lg-4">
                <div class="pricing-table-header">
                    <h2>Personal Site</h2>
                    <h3>$15/month</h3>
                </div>
                <div class="pricing-table-space"></div>
                <div class="pricing-table-features">
                    <p><strong>50</strong> Email Addresses</p>
                    <p><strong>35GB</strong> of Storage</p>
                    <p><strong>40</strong> Databases</p>
                    <p><strong>10</strong> Domains</p>
                    <p><strong>24/7 Unlimited</strong> Support</p>
                </div>
                <div class="pricing-table-sign-up">
                  <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
                </div>
            </div>

            <div class="pricing-table pricing-table-highlighted col-lg-4">
                <div class="pricing-table-header">
                    <h2>Small Business</h2>
                    <h3>$59/month</h3>
                </div>
                <div class="pricing-table-space"></div>
                <div class="pricing-table-text">
                    <p><strong>This is a perfect choice for small businesses and startups.</strong></p>
                </div>
                <div class="pricing-table-features">
                    <p><strong>Unlimited</strong> Email Addresses</p>
                    <p><strong>65GB</strong> of Storage</p>
                    <p><strong>75</strong> Databases</p>
                    <p><strong>25</strong> Domains</p>
                    <p><strong>24/7 Unlimited</strong> Support</p>
                </div>
                <div class="pricing-table-sign-up">
                    <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
                </div>
            </div>

            <div class="pricing-table col-lg-4">
                <div class="pricing-table-header">
                    <h2>Corporate Site</h2>
                    <h3>$85/month</h3>
                </div>
                <div class="pricing-table-space"></div>
                <div class="pricing-table-features">
                    <p><strong>Unlimited</strong> Email Addresses</p>
                    <p><strong>85GB</strong> of Storage</p>
                    <p><strong>Unlimited</strong> Databases</p>
                    <p><strong>50</strong> Domains</p>
                    <p><strong>24/7 Unlimited</strong> Support</p>
                </div>
                <div class="pricing-table-sign-up">
                    <p><a href="http://bloggingbolt.blogspot.com">Sign Up Now</a></p>
                </div>
            </div>

        </div>

    </body>

</html>

Refer the use of different components of bootstrap as http://getbootstrap.com/components/

Thank you it works but when i embed this code the previous css design disappear how can i customize this code only for packages plz not for the whole website — Keith Zetterstrom, Aug 31 '15 at 08:40

How to make my HTML suitable for Mobile View

3 Answers3