websites not working in mobile.

Question

1.50/5 (2 votes)

See more:

HEllo

I have a website which must be responsive for mobile phones. I've created it using my desktop. it's working perfectly for desktop but when I check it on my real mobile phone its not working .the whole body goes to rightside.it should be in centre.Please guide me .

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Icici Prudential</title>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>


    <style type="text/css">
        body {
            width: 100%;
            background-color: #ffffff;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            font-family: Georgia, Times, serif;
			}

        table {
            border-collapse: collapse;

        }

        td#logo {
            border-radius: 40px;

        }

        img {
            border: none;
            display: block;
        }

        a.blue-btn {
            display: inline-block;
            margin-bottom: 34px;
            border: 3px solid #3baaff;
            padding: 11px 38px;
            font-size: 12px;
            font-family: arial;
            font-weight: bold;
            color: #3baaff;
            text-decoration: none;
            text-align: center;
        }

            a.blue-btn:hover {
                background-color: #3baaff;
                color: #fff;
            }

        a.white-btn {
            display: inline-block;
            margin-bottom: 30px;
            border: 3px solid #fff;
            background: transparent;
            padding: 11px 38px;
            font-size: 12px;
            font-family: arial;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            text-align: center;
        }

            a.white-btn:hover {
                background-color: #fff;
                color: #3baaff;
            }

        .border-complete {
            border-top: 1px solid #dadada;
            border-left: 1px solid #dadada;
            border-right: 1px solid #dadada;
        }

        .border-lr {
            border-left: 1px solid #dadada;
            border-right: 1px solid #dadada;
        }

        #banner-txt {
            color: #fff;
            padding: 15px 32px 0px 32px;
            font-family: arial;
            font-size: 13px;
            text-align: center;
        }

        h2#our-products {
            font-family: 'Pacifico';
            margin: 23px auto 5px auto;
            font-size: 27px;
            color: #3baaff;
        }

        h2#simple-steps {
            font-family: 'Montserrat', sans-serif;
            margin: 23px auto 5px auto;
            font-size: 20px;
            color: #000080;
        }

        h3.our-products {
            font-family: arial;
            font-size: 15px;
            color: #7c7b7b;
        }

        h4#simple-steps {
            font-family: 'Montserrat', sans-serif;
            margin: 23px auto 5px auto;
            font-size: 28px;
            color: #000080;
        }

        p.our-products {
            text-align: center;
            font-family: arial;
            color: #7c7b7b;
            font-size: 12px;
            padding: 10px 10px 24px 10px;
        }

        h2.special {
            margin: 0;
            color: #fff;
            color: #fff;
            font-family: 'Pacifico';
            padding: 15px 32px 0px 32px;
        }

        p.special {
            color: #fff;
            font-size: 12px;
            color: #fff;
            text-align: center;
            font-family: arial;
            padding: 0px 32px 10px 32px;
        }

        h2#coupons {
            color: #3baaff;
            text-align: center;
            font-family: 'Pacifico';
            margin-top: 30px;
        }

        p#coupons {
            color: #7c7b7b;
            text-align: center;
            font-size: 12px;
            text-align: center;
            font-family: arial;
            padding: 0 32px;
        }

        #socials {
            padding-top: 12px;
        }

        p#footer-txt {
            text-align: center;
            color: #303032;
            font-family: arial;
            font-size: 12px;
            padding: 0 32px;
        }

        p.monsterrat {
            font-family: 'Montserrat', sans-serif;
            font-size: 22px;
        }

        p.monsterratbig {
            font-family: 'Montserrat', sans-serif;
            font-size: 26px;
        }

        <!-- heading changes done-- > .heading {
            font-size: 22px !important;
            padding: 40px 0 0 !important;
            line-height: 22px !important;
        }



        @media only screen and (max-width: 640px) {
            body[yahoo] .deviceWidth {
                width: 440px !important;
                padding: 0;
            }

            body[yahoo] .center {
                text-align: center !important;
            }

            p.monsterrat {
                font-family: 'Montserrat', sans-serif;
                font-size: 20px;
            }

            p.monsterratbig {
                font-family: 'Montserrat', sans-serif;
                font-size: 24px;
            }

            h2#simple-steps {
                font-family: 'Montserrat', sans-serif;
                margin: 23px auto 5px auto;
                font-size: 20px;
                color: #000080;
            }

            h4#simple-steps {
                font-family: 'Montserrat', sans-serif;
                margin: 23px auto 5px auto;
                font-size: 28px;
                color: #000080;
            }
        }

        @media only screen and (max-width: 479px) {
            body[yahoo] .deviceWidth {
                width: 280px !important;
                padding: 0;
            }

            body[yahoo] .center {
                text-align: center !important;
            }

            p.monsterrat {
                font-family: 'Montserrat', sans-serif;
                font-size: 18px;
            }

            p.monsterratbig {
                font-family: 'Montserrat', sans-serif;
                font-size: 22px;
            }

            h2#simple-steps {
                font-family: 'Montserrat', sans-serif;
                margin: 23px auto 5px auto;
                font-size: 20px;
                color: #000080;
            }

            h4#simple-steps {
                font-family: 'Montserrat', sans-serif;
                margin: 23px auto 5px auto;
                font-size: 28px;
                color: #000080;
            }
        }

        .maindiv, deviceWidth {
            border: 1px solid black;
            display: inline-block;
			transform: translate(40%, 5%);
			-moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            -khtml-border-radius: 15px;
            border-radius: 15px;
			margin-bottom: 10px;
            margin-top:-50px;
		    text-align: -webkit-center; !important;        
	        }
    </style>


</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
    <div class="maindiv">
        <table width="100%" border="1" cellpadding="0" cellspacing="0" align="center">

            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                    <td width="100%">
                        <!-- Logo -->
                        <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" bgcolor="#fff">
                            <tr>

                                <td id="logo" align="center">
                                    <a href="#"><img src="http://thisiscontenter.in/harshal/IciciImages/Header.jpg" alt="" border="0" /></a>
                                </td>
                            </tr>
                        </table><!-- End Logo -->
                    </td>
                </tr>

            </table>

            <!--Cursor touch Part-->

            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#fff" style="margin-removed1%">
                <tr>
                    <td align="center" width="66">
                        <img src="http://thisiscontenter.in/harshal/IciciImages/Cursor.jpg">
                    </td>
                    <td align="left">
                        <h2 class="heading" style="font-size: 30px; font-weight:bold; font-family: 'Helvetica Neue', 'Arial', 'sans-serif' !important; color:#004e89; margin: 0; text-align:left;text-transform:uppercase;"> SIP-RENEWALS,</h2>

                        <h4 class="heading" style="font-size: 40px; font-weight:bold; font-family: 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #004e89; margin: 0; text-align:left;text-transform:uppercase;"> NOW SIMPLIFIED!
                    </h4></td>
                </tr>
            </table>
            <!-- End of Cursor touch Part -->
            <!--Headline-->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                    <td width="100%">

                        <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" bgcolor="#fff" style="margin-removed 0%;">
                            <tr>
                                <td id="logo" align="center" style="">
                                    <a href="#"><img src="http://thisiscontenter.in/harshal/IciciImages/main body.jpg" alt="" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

            </table>
            <!-- End of Headline Part -->
            <!--statement 1-->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td align="left">
                        <h2 id="simple-steps">SOUNDS INTERESTING? HERE'S HOW IT WORKS:</h2>
                    </td>
                </tr>
                <tr>
                    <td class="center"></td>
                </tr>
            </table> <!--End of our ststement 1-->
            <!--Mobile Part-->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                    <td width="100%">

                        <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" bgcolor="#fff" style="margin-removed 0%;">
                            <tr>
                                <td id="logo" align="center" style="">
                                    <a href="#"><img src="http://thisiscontenter.in/harshal/IciciImages/mobile.jpg" alt="" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

            </table>
            <!-- End of Mobile Part -->
            <!--Google Button-->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                    <td width="100%">

                        <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" bgcolor="#fff" style="margin-removed 26%;">
                            <tr>
                                <td id="logo" align="center" style="">
                                    <a href="#"><img src="http://thisiscontenter.in/harshal/IciciImages/app store button.jpg" alt="" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

            </table>
            <!-- End of Google Button Part -->
            <!--Advertisments Button-->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                    <td width="100%">

                        <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" bgcolor="#fff" style="margin-removed 0%;">
                            <tr>
                                <td id="logo" align="center" style="">
                                    <a href="#"><img src="http://thisiscontenter.in/harshal/IciciImages/advertisments.jpg" alt="" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

            </table>
            <!-- End of Advertisments Part -->
            <!-- Footer -->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="    margin-removed 0%;">

                <tr>
                    <td style="text-align:center;">

                        <br><span class="monsterrat">Mutual Fund investments are subject to market risks, read all scheme related documents carefully.<br></br></span>
                    </br></td>
                </tr>
            </table><!-- End of Footer-->

        </table>
    </div>
</body>
</html>

Posted 20-Oct-15 0:51am

R Harshal

Updated 20-Oct-15 1:16am

phil.o

v5

Add a Solution

Comments

Krunal Rohit 20-Oct-15 6:54am

Reformat the code using Improve Question widget.

-KR

Nathan Minier 20-Oct-15 7:37am

Try adding a viewport meta tag in the head:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)