Jump to the post that solved this thread.
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Solved: 1 Week, 4 Days, 8 Hours ago Plan Table
#1
Solved: 1 Week, 4 Days, 8 Hours ago
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.

<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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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.
   

110% zoom of the page: Plan 3 goes down to plan 1 and 2
   
   

Please help..
Thank you
Reply
#2
Solved: 1 Week, 4 Days, 8 Hours ago
First, ditch table. Use flexbox.

Still, if you wanna stick with it, this looks like the issue at first glance. .span3{width:300px}
Try and make this fixed value to some flexible, like .span3{width:33%}
Reply
#3
Solved: 1 Week, 4 Days, 8 Hours ago
Thanks Effone.
flexbox working solved it.
Thanks bro.
+1 for this.
Reply
Jump to the post that solved this thread.


Forum Jump:


Users browsing this thread: 1 Guest(s)