Click here to Skip to main content
15,894,017 members
Search within:


mobile responsive dsign in html,
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
HTML
i am sharing this code with you .

XML
<!DOCTYPE html >
<!--<html xmlns="http://www.w3.org/1999/xhtml">-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UtiPtf Mailer</title>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

    <style type="text/css">
            table {
            border-collapse: collapse;
        }
            center. { text-align:center; }

             @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: 8px;
                font-weight:bold;
                            }

            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;
            }
        }

         @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: 8px;
                font-weight:bold;
            }

            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;
            }
        }

            .maindiv, deviceWidth {
            border: 1px solid black;
            display: inline-block;
            transform: translate(40%, 5%);
            margin-bottom: 10px;
/*          alignment-adjust:!important;*/
            }
<!--new css for this page-->
    p18 {
    font-size:14px;
    color:#8000FF;
    font-weight:bold;
    font-style:normal;
}
    p3 {
    font-size:20px;
    color:#191970;
    font-weight:bold;
    font-style:normal;
}

    p11 {
    font-size:14px;
    color:#191970;
    font-weight:bold;
    font-style:normal;
}

p17{
    font-size:17px;
    color:#202020 ;
/*    font-weight:bold;*/
    font-style:normal;
    }

    p16{
    font-size:18px;
    color:#333399 ;
/*    font-weight:bold;*/
    font-style:normal;
/*  font-family:Arial, Helvetica, sans-serif;*/
    }

    p7 {
    font-size:17px;
    color:blue;
    font-weight:bold;
    font-style:normal;
}
    p8 {
    font-size:17px;
    color:#000080;
    font-weight:bold;
    font-style:normal;
}
    p9 {
    font-size:13px;
    color:#000080;
    font-weight:bold;
    font-style:normal;
}
    p10 {
    font-size:13px;
    color:#0066FF;
/*    font-weight:bold;*/
    font-style:normal;
}

    p14 {
    font-size:13px;
    color:#404040 ;
/*    font-weight:bold;*/
    font-style:normal;
}

    p15 {
    font-size:11px;
    color:#404040 ;
/*    font-weight:bold;*/
    font-style:normal;
}
        p1 {
/*    font-family:Arial, Helvetica, sans-serif;*/
    font-size:54px;
    color:#ff6600;
    font-weight:bold;
    font-style:normal;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #000066;
    /*    color:green;*/
/*    text-shadow: 0 0 4px #000099;*/
}

    p6 {
/*  font-family:Arial, Helvetica, sans-serif;*/
    font-size:54px;
    color:#0066FF;
    font-weight:bold;
    font-style:normal;
    border-width: 10px;
/*  text-shadow: 0 0 4px #000080;*/
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #000066;
        }

        p4 {
    font-size:14px;
    color:white;
/*    font-weight:bold;*/
    font-style:normal;
/*  font-family:Arial, Helvetica, sans-serif;*/
}
            p5 {
    font-size:13px;
    color: #FFF;
    font-weight:bold;
    font-style:normal;
}
    .outer {
    color: navy;
    background-color: #F93;
    border: 2px solid darkblue;
    padding: 5px;
 }
 li{
    color:blue;
    font-size: 25px;
     }

 li span {
  color: white;
  font-size: 15px;
  position: relative;
  left: -12px;
}

br.small {
  content: " ";
   }
/* li:before {
    content: "• ";
    color: blue;
}*/
 /***FIRST STYLE THE BUTTON***/
input#investNowbutton{
cursor:pointer;
background:#CCFFFF;
border: 1px solid black;
display: inline-block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 10px;
color:#191970;
font-size:44px;
box-shadow:1px 7px #09F;
height:70px;
width:250px;
}

input#clickbutton{
cursor:pointer;
background:#09F;
border: 1px solid black;
display: inline-block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color:white;
font-size:13px;
box-shadow:0px 1px 1px 3px #000099;
}

.circle {
      width: 22px;
    height: 22px;
    background: #FF8C00;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #191970;
      -webkit-border-image:blue;
      font-size:0.95em;
      border:solid 2px #191970;
      text-align: center;
}
/* for lets begin*/
.border{
  display: inline-block;
  font-size:18px;
  /*display: inline;*/
  padding: 5px;
color:#000099;
font-weight:bold;
     }
<!--new css for this page-->
    </style>


</head>

<body bgcolor="#FFFFFF" yahoo="fix" style="font-family: Arial, Helvetica, sans-serif;">
    <div class="maindiv">
    <!-- start main table -->
        <table width="100%" border="1" cellpadding="0" cellspacing="0" align="center" >
<!-- Start Header-->
            <table width="600" border="0" cellpadding="0" cellspacing="0"  align="center" class="deviceWidth" >
                <tr>
                    <td width="100%"><img src="http://makemysystems.com/UTI_DemoVideo_1/img/border-bottom.jpg" class="deviceWidth"/> </td>
                </tr>

                <tr>
                    <td width="100%" >

                         <!-- Logo -->
                            <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth" bgcolor="#fff" >
                                <tr>
                                    <td id="logo" style="">
                                        <a href="#"><img src="http://thisiscontenter.in/harshal/123.jpg" alt="" border="0" /></a>
                                    </td>
                                </tr>
                            </table><!-- End Logo -->
                    </td>
                </tr>
                </table>

            <!-- End Header -->



<!--special offer-->
<!--one bg color-->
            <div style="background-color:#CCFFFF">
<table width="600" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:2%;">
<div style="text-align:center;">
<tr>
<td><p1> Your Opportunity</p1></td>
</tr>
<tr>
<td><p1>to grow with the</p1></td>
</tr>
<tr>
<td><p6>India growth story</p6></td>
</tr>
</div>
</table>
<!-- End of Special Offer -->

            <!--special offer-->
<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:3%">
<tr>
<td align="left">
<hr style="border-color:#330099; margin-right:22%;" >
<p16 class="">NFO Opens &nbsp; : 24th &nbsp; August &nbsp; 2015.<br> NFO Closes &nbsp; : 26th &nbsp; August &nbsp; 2015 </p16>
<hr style="border-color:#330099; margin-right:22%;" >
</td>
</tr>
<tr>
<td>
<p10 class="center"> ───── presenting the ───── </p10><br>
<p3 class="">UTI &nbsp; NIFTY &nbsp; ETF <input class=" circle" type="text" value="&amp;" align="right" style="color:white" align="bottom"  /> <br> UTI &nbsp; SENSEX &nbsp; ETF  </p3>
 <td  rowspan="3"><a href="#"><img src="bar.jpg" alt="" border="0" height="200" width="230"/></a></td>
</td>
</tr>
<tr>
<td>
<p17>Open-ended exchange traded funds<br> based on CNX Nifty and S&P BSE <br> Sensex respectively. </p17></td>
</tr>
</table>

<!-- End of Special Offer -->
</div>
<!--end one part bg color-->

            <!--second part for bg color-->
            <!--special offer-->
            <div style="background-color:#ff9933;" >
<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="">
<tr>
<div style="">
<td align="left" style="padding-top:40px;" >
<p5 class="">UTI Mutual Fund brings you two new products.UTI NIFTY Exchange Traded Fund (UTI <BR> NIFTY ETF) and UTI SENSEX Exchange Traded Fund (UTI SENSEX ETF) are two diverse<br> portfolio that you can trade like stocks. </p5>
</td>
</div>
</tr>
</table>
<!-- End of Special Offer -->

                       <!--special offer-->
<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth"bgcolor="" style="margin-top:1%">
<tr>
<td align="left">
<p7>Key Features:<p7>
</td>
</tr>
<tr>
<td align="left">
<P5><li><span> Buy and sell at real time prices</span></li>
<br class="small"><li><span> may be considered for a variety of trding strategies akin to a stock</span> </li>
<br class="small"><li><span> Aims for one of the most cost-effective diversified portfolios</span></li><br>
After the NFO closes,contact your broker to purchase the schemes.</P5>
</td>
</tr>
</table>
<!-- End of Special Offer -->


             <!--special offer-->
<!--<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:1%">
<tr>
<td align="center">
 <p3 class="center">────────── Lets begin ──────────</p3>
</td>
</tr>
</table>-->
<!-- End of Special Offer -->

             <!--special offer-->
<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td align="center">
 <p11 class="center"><svg height="50" width="80">
  <g fill="none" stroke="#000099" stroke-width="5">
    <path stroke-linecap="round" d="M5 40 l215 0" />
   </g>
  </svg><li class="border">  Lets</li><li class="border"> begin </li><svg height="50" width="80">
  <g fill="none" stroke="#000099" stroke-width="5">
    <path stroke-linecap="round" d="M5 40 l215 0"/>
   </g>
  </svg></p11>
</td>
</tr>
</table>
<!-- End of Special Offer -->

             <!--special offer-->
<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:3%">
<tr>
<td align="center">
<input id="investNowbutton" type="submit" value="Invest Now" />
</td>
</tr>
</table>
<!-- End of Special Offer -->

             <!--special offer-->
<table width="600" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor=""   style="margin-top:4%">
  <tr>
    <td colspan="3"><P5>To know more about UTI NIFTY ETF</P5>
</td>
    <td><input id="clickbutton" type="submit" value="CLICK HERE" /></td>
        <td><P5>UTI SENSEX ETF</P5></td>
        <td><input id="clickbutton" type="submit" value="CLICK HERE" />
  </tr>
  </table>

  <div style="background-color:#333399;margin-top:3%">
<td align=""> <a href="#"><img style="vertical-align:middle;" src="MOBILE.jpg" alt="" border="0" /></a><p4>TOLL - FREE 1800&nbsp;22&nbsp;1230</p4></td>
<td align=""> <a href="#"><img style="vertical-align:middle;" src="smsnew.jpg" style="height:62px;" alt="" border="0" /></a> <p4>'UTI ETF' to 5676756</p4></td>
<td align=""> <a href="#"><img style="vertical-align:middle;" src="email.jpg" alt="" border="0" /></a><p4>invest@uti.co.in</p4></td>
</div>
 </div>
             <!-- end special offer-->
             <!-- ended   second part for bg color-->


<!-- End of Special Offer -->

<!--special offer-->
<!--<table width="750" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#fff" >
<tr>
<td> <p8>UTI SENSEX ETF</p8><BR>
<p14>This product is suitable for investors who are seeking:*<br>&bull;Long term investments
<br>&bull;Investments in securities covered by <br>S&P BSC Sensex.</p14></td>
<td><a href="#"><img src="new bar.jpg" alt="" border="0"  /></a></td>
<td> <hr style="width: 1px; height: 170px; color:#000" style="margin-top:35px;"></td>
<td> <p8>UTI NIFTY ETF</p8>
<BR><p14>This product is suitable for investors who are seeking:*<br>&bull;Long term investments
<br>&bull;Investments in securities covered by <br> CNX Nifty Index.</p14></td>
<td ><a href="#"><img src="new bar.jpg" alt="" border="0"  /></a></td>
</tr>
<tr>
<td colspan="2"><p15>* Investors should consult their finacial advisors if in <br />dought about whether the product is suitable for them.</p15></td>
<td colspan="1" ></td>
<td colspan="2"><p15>* Investors should consult their finacial advisors if in <br />dought about whether the product is suitable for them.</p15></td>
</tr>
  </table>
 <!-- End of Special Offer -->
 <table>
   <div style="background-color:#330099;">
<td align=""> <a href="#"><img src="oldmeterNew.jpg" alt="" border="0" style="margin-bottom:-40px;" /></a></td>
</div>
</table>
                <!-- Footer -->
<table width="600" border="0" cellpadding="0" cellspacing="0"  align="center" class="deviceWidth" style="margin-top: 5%;">
                <tr>
                    <td width="100%"><img src="http://makemysystems.com/UTI_DemoVideo_1/img/border-bottom.jpg" class="deviceWidth"/> </td>
                </tr>


               <tr>
                    <td style="text-align: center;" >
            <span style="font-size:14px;"><b>Mutual Fund investments are subject to market risks, read all scheme related documents carefully.</b><br></span> </td>
              </tr>
            </table><!-- End of Footer-->

<!-- single line start -->
            <table width="600" border="1px solid black" cellpadding="0" cellspacing="0"  align="center" class="deviceWidth" style="  margin-top: 0%;">
                <tr>
                    <td width="100%"><img src="" class="deviceWidth"/> </td>
                </tr>
             </table><!-- End single line-->
        </table>
<!-- End Main table -->
    </div>
</body>
</html>




i have developed the code for html which is working for desktop.but for mobile its not working.problem with alignment for mobile.will you help me please.please find the url.

http://thisiscontenter.in/harshal/latestuti/UtiptfMailer.html

if u check this url in mobile the alignment is not proper.the whole image moves to right screen of mobile.
if u check in desktop alignment is proper.

i want proper alignment for mobile also.please help me.

Thanks
Posted
Add a Solution

2 solutions

Why not make your life easier and try out Bootstrap?
Then you get the mobile responsive design from start.
Bootstrap 3 Tutorial[^]

Personally I will not try to fix your code. It is way too much work.
Maybe someone else will.

[UPDATE]
To make a design that is responsive you need to get the size of the screen, which you have done, but also consider the with of the current browser.
In my case I have a wide screen on my laptop and if I open your website and make the browser smaller the content does not follow the size of the window, but stays aligned according the size of the screen.

If you fix this issue, I think you will have a better result for mobile screens too.
Am I going to go through all your code and fix it for you?.
Nope, you don't pay enough. -:)

The reason why you get advice to use Bootstrap is because all this is already considered and you can focus on the content instead of the layout details.
Bootstrap is not that difficult to learn and you can copy most of your existing HTML into a
HTML
<div class="container">
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
        <!-- copy your code here -->
        </div>
        <div class="col-sm-2"></div>
    </div>
</div>

providing you have imported the Bootstrap scripts and styles.
 
Share this answer
 
Posted
Updated 4-Nov-15 19:30pm
v2
Comments
R Harshal 4-Nov-15 6:29am    
Hi george sir,
for easy understanding i gave the whole code on CodeProject.com.i just want the alignment should be in centre for mobile.so if you help me in the code i will be very thankful to you.i search the bootstrap on google but its going from my head.please help me out .
google Bootstrap
 
Share this answer
 
Posted
Comments
R Harshal 4-Nov-15 5:41am    
yes right .but how is it possible.i am totally confused.would anyone can guide me in my given code.
Krunal Rohit 5-Nov-15 2:01am    
What's so confusing in this ? .

-KR
Add a Solution

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

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
How Do I Set The Responsive For Mobile
Help with my responsive home page
Responsive Layout for mobile phone and tablet pcs
How to make this HTML form responsive for small devices
CSS not applied in html user control on htc mobile at RESPONSIVE WEB DESIGN
Am facing problem on mobile view overflow
Hello how do I make jtable responsive? Is there any article about it?
The following fetch() method works on desktop but not on android mobile status = 0
Facing issues in my responsive website
How to generate HTML table from curl response?

Advertise
Privacy
Cookies
Terms of Use
Last Updated 5 Nov 2015
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web02 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900