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
<?php
/**
* 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);
?>
<style>
/*
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.
*/
@media
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;
}
}
}
</style>
<table>
<thead>
<?php foreach($plans AS $item):?>
<th align="left">
<h4>
<?php echo $item->name;?>
</h4>
</th>
<?php endforeach; ?>
</thead>
<tr>
<?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; ?>
</td>
<?php endforeach; ?>
</tr>
</table>
<script type="text/javascript">
(function($){
$.each($('.alert-plan'), function(){
if(!$.trim($(this).text())) {
$(this).hide();
}
});
}(jQuery))
</script>
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