lmarazzo VIP
Total posts: 94
12 Jun 2019 15:25

Sergei! I've been trying to get this page to become responsive and I got an idea but I can't make it work perfectly... can you help me out? https://onlinemusicguild.com/all-the-plans.html

* Emerald by MintJoomla
* a component for Joomla! 1.7 CMS ( http://www.joomla.org )
* Author Website:  http://www.mintjoomla.com/ 
* @copyright Copyright (C) 2012 MintJoomla ( http://www.mintjoomla.com ). All rights reserved.
* @license GNU/GPL  http://www.gnu.org/copyleft/gpl.html 
defined('_JEXEC') or die();
$user = JFactory::getUser();
$plans = $this->plans;
$width = round(2 / count($plans), 4);
Generic Styling, for Desktops/Laptops
table {
width: 100%;
border-collapse: collapse;
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
th {
background: #ccc;
color: white;
font-weight: bold;
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {position: relative;}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
<?php foreach($plans AS $item):?>
<th align="left">
<?php echo $item->name;?>
<?php endforeach; ?>
<?php foreach($plans AS $item):?>
<td align="left">
<?php if($item->require_one_of): ?>
<div class="alert alert-danger"><?php echo str_replace('[PLANS]', implode(', ', $item->require_one_of), JText::plural('SUBSCRIPTION_ONE_OF', count($item->require_one_of))); ?></div>
<?php elseif($item->require_all_of): ?>
<div class="alert alert-danger"><?php echo str_replace('[PLANS]', implode(', ', $item->require_all_of), JText::plural('SUBSCRIPTION_ALL_OF', count($item->require_all_of))); ?></div>
<?php elseif($item->price <= 0 && !$item->params->get('properties.terms')): ?>
<a class="btn btn-success" href="/<?php echo JRoute::_('index.php?option=com_emerald&task=empayment.send&sid='.$item->id); ?>"><?php echo JText::_('EBTNGETNOW'); ?></a>
<?php elseif(!$item->is_donation): ?>
<a href="/<?php echo JRoute::_('index.php?option=com_emerald&view=empayment&sid='.$item->id); ?>" class="btn btn-primary">
<?php echo JText::_('EBTNBUYNOW'); ?></a>
<?php else: ?>
<a href="/<?php echo JRoute::_('index.php?option=com_emerald&view=empayment&sid='.$item->id); ?>" class="btn btn-primary">
<?php echo JText::_('EBTNDONATE'); ?></a>
<?php endif; ?>
<?php endforeach; ?>
<script type="text/javascript">
$.each($('.alert-plan'), function(){
if(!$.trim($(this).text()))    {

Last Modified: 07 Feb 2020

hakana VIP
Total posts: 408
12 Jun 2019 16:37

Depending on your bootstrap version, you can wrap the table with a div with a table-responsive class. This is how I did it on my website.

You can check it here:

Total posts: 13,679
13 Jun 2019 05:50

Tables are not very responcive. I am not sure how to do that apart from creating new template based on DIVs. I think Hakana knows what he is talking about, I would follow him.

Giorgi625 VIP
Total posts: 557
13 Jun 2019 13:44

Click here to link...

I think in older BS versions this will be same way.

pepperstreet VIP
Total posts: 3,831
20 Jun 2019 01:22

How should it look like? How should it behave?

Replay Topic
Click here to upload and insert file from you hard drive: (png, gif, jpg, jpeg, zip, txt, rar)
Powered by Cobalt