2020-06-28, 10:13 AM
Sorry staff,
I search all forum but I did not find myself any category for posting this post.
Please move in appropriate category if requires.
I made one template for membership plan.
But it nor remain in one line if I zoom browser page.
Please help to fix below code so even on zooming to any % , all plan remain in one line. with equally space between all plan and also on sides of each plan.
100% zoom of page: All plan in one line but on right side of plan 3 having more space as compare to space on left side of plan 1.
[attachment=43014]
110% zoom of the page: Plan 3 goes down to plan 1 and 2
[attachment=43015]
[attachment=43016]
Please help..
Thank you
I search all forum but I did not find myself any category for posting this post.
Please move in appropriate category if requires.
I made one template for membership plan.
But it nor remain in one line if I zoom browser page.
Please help to fix below code so even on zooming to any % , all plan remain in one line. with equally space between all plan and also on sides of each plan.
<html>
<head>
<title>Upgrade</title>
{$headerinclude}
</head>
<body>
{$header}
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<tr>
<td class="trow1">
<style type="text/css">
.upgrade-wrap{margin:0 auto;width:100%;}
.span3{width:300px}
.pro
{float:left;background:transparent url repeat scroll 0% 0%;border-color:#1D6391;-moz-border-right-colors:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;margin:20px 24px;box-shadow:0px 2px 5px 0px rgba(0,0,0,0.2);border-width:1px 1px 10px;border-style:solid;border-image:none;-moz-border-top-colors:none;transition:all 0.5s ease}
.pro:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);transition:all 0.5s ease}
.pricing-table-header-blue{padding:5px 0 5px 0;background:#2980b9;border-bottom:10px solid #1d6391}
.pricing-table-header-green{padding:5px 0 5px 0;background:#16a085;border-bottom:10px solid #14937a}
.pricing-table-header-orange{padding:5px 0 5px 0;background:#f39c12;border-bottom:10px solid #cd8109}
.pricing-table-header-red{padding:5px 0 5px 0;background:#c0392b;border-bottom:10px solid #a12f23}
.pricing-table-header-green h2,
.pricing-table-header-orange h2,.pricing-table-header-red h2,
.pricing-table-header-blue h2{font-weight:700;color:#FFF}
.pricing-table-header-red h3,
.pricing-table-header-blue h3{font-weight:500;color:#FFF}
.pricing-table-features{padding:15px 10px 15px 10px;border-bottom:1px dashed #888;text-align:center;line-height:20px;font-size:14px;color:#171616;background:white}
</style>
</br>
<div class="upgrade-wrap">
<div original-title="" class="span3 pro">
<div class="pricing-table-header-blue">
<center><h2><strong>Plan 1</strong></h2></center></div><div class="pricing-table-features">
<p><strong>Feature 1 </strong> Yes</p>
<p><strong>Feature 2 </strong> Yes</p>
<p><strong>Feature 3 </strong> No</p>
<p><strong>Feature 4</strong> Yes</p>
<p><strong>Feature 5</strong> Yes</p>
<p><strong>Feature 6</strong>Yes</p>
<p><strong>Feature 7</strong> No</p>
<p><strong>Feature 8</strong> N</p>
<p><strong>Feature 9</strong> Allowed</p>
<p><strong>Feature 10</strong> Yes</p>
<p><strong>Feature 11</strong> No</p>
<p><strong>Feature 12</strong> Yes</p>
<p><strong>Feature 13</strong> Yes</p>
<p><strong>Feature 14</strong> No</p>
<p><strong>Feature 15</strong> Yes</p>
</div></div>
<div original-title="" class="span3 pro">
<div class="pricing-table-header-orange">
<center><h2><strong>Plan 2</strong></h2></center></div>
<div class="pricing-table-features">
<p><strong>Feature 1 </strong> Yes</p>
<p><strong>Feature 2 </strong> Yes</p>
<p><strong>Feature 3 </strong> No</p>
<p><strong>Feature 4</strong> Yes</p>
<p><strong>Feature 5</strong> Yes</p>
<p><strong>Feature 6</strong>Yes</p>
<p><strong>Feature 7</strong> No</p>
<p><strong>Feature 8</strong> N</p>
<p><strong>Feature 9</strong> Allowed</p>
<p><strong>Feature 10</strong> Yes</p>
<p><strong>Feature 11</strong> No</p>
<p><strong>Feature 12</strong> Yes</p>
<p><strong>Feature 13</strong> Yes</p>
<p><strong>Feature 14</strong> No</p>
<p><strong>Feature 15</strong> Yes</p>
</div></div>
<div original-title="" class="span3 pro">
<div class="pricing-table-header-green">
<center><h2><strong>Plan 3</strong></h2></center></div>
<div class="pricing-table-features">
<p><strong>Feature 1 </strong> Yes</p>
<p><strong>Feature 2 </strong> Yes</p>
<p><strong>Feature 3 </strong> No</p>
<p><strong>Feature 4</strong> Yes</p>
<p><strong>Feature 5</strong> Yes</p>
<p><strong>Feature 6</strong>Yes</p>
<p><strong>Feature 7</strong> No</p>
<p><strong>Feature 8</strong> N</p>
<p><strong>Feature 9</strong> Allowed</p>
<p><strong>Feature 10</strong> Yes</p>
<p><strong>Feature 11</strong> No</p>
<p><strong>Feature 12</strong> Yes</p>
<p><strong>Feature 13</strong> Yes</p>
<p><strong>Feature 14</strong> No</p>
<p><strong>Feature 15</strong> Yes</p>
</div></div>
</div>
</tr>
</td>
100% zoom of page: All plan in one line but on right side of plan 3 having more space as compare to space on left side of plan 1.
[attachment=43014]
110% zoom of the page: Plan 3 goes down to plan 1 and 2
[attachment=43015]
[attachment=43016]
Please help..
Thank you