I had a massive update from PHP5.6 to PHP7.1 and and server components. Plus Joomla to latest version. Please if something does not work report on forum.

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

<?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>

Last Modified: 20 Jun 2019


hakana VIP
Total posts: 403
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:
https://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp


Sergey
Total posts: 13,645
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: 542
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
Uploading
Click here to upload and insert file from you hard drive: (png, gif, jpg, jpeg, zip, txt, rar)
Powered by Cobalt