lmarazzo VIP
Total posts: 98
23 Сен 2016 17:28

https://onlinemusicguild.com/index.php/en/apply.html

Here, if you scroll down, there are 3 different products in 3 columns. It looks great in a big monitor but when you open it from a mobile it keeps the configuration of the three columns and as result it brokes the images and put the text in a very thin space, looks awful. Is there a possibility of keep the columns for the pc but set it in rows for the mobile?

Последние изменения: 07 Окт 2016


pepperstreet VIP
Total posts: 3,837
27 Сен 2016 01:47

Hello, as far as I can see, you are using the template JSN DONA (bootstrap v2) and JSN PageBuilder (bootstrap v3) inside the plan description, right? The latter bootstrap grid can't behave responsive, because it is wrapped by the Emerald Plans table markup. The plans list-template has to be changed or overidden.


I think I can provide a solution... stay tuned...


lmarazzo VIP
Total posts: 98
27 Сен 2016 16:11

thanks


lmarazzo VIP
Total posts: 98
29 Сен 2016 17:06

Im trying to use this on the emtemplate corrsponding to the group.

...

Doesnt work. What can I do? Bests

LM


pepperstreet VIP
Total posts: 3,837
30 Сен 2016 22:35

lmarazzo Im trying to use this on the emtemplate corrsponding to the group. ...

Sorry, can't see your last comment. Seems to be stripped-off by the editor. Remember to use "Code-Block" to wrap your markup. Would you mind to re-post again?


Sorry, I had no free-time to check my bootstrap template replacement (override).
Hopefully I am able to attach it here or place it in downlads area this weekend.


Sergey
Total posts: 13,748
04 Окт 2016 03:37

Go to components/com_emerald/views/emlist/tmpl any copy default_list_*.php to any other name with save prefix. For instance default_list_my.php.

Now you can edit it and create bootstrap grid that you like.

Open plan groups, edit default group and select that template there.


lmarazzo VIP
Total posts: 98
04 Окт 2016 05:15

well... i mean... whats the point of having a subscription when I have to do the work... I mean... I can modify little things in the code to hide price and other stuff... but I do not like the fact that this is supposed to be a finished product and it does not even responds to iphone and samsung... most checkouts and conversions are done on phones... I strongly recomend you make that bootstrap since it is a benefit for your product.

thanks


pepperstreet VIP
Total posts: 3,837
05 Окт 2016 04:43

pepperstreet I think I can provide a solution... stay tuned...

Bootstrap v2 plans list

Column spans are calculated out of plans amount. So, it should work with up to 12 plans... theoretically ;) For instance: 12 total columns devided by 2 plans will result in SPAN6 columns with 50% width, 12 devided by 4 plans become SPAN3 columns with 33,3% etc.

Equal Column heights

Since plans might have different properties, alerts and buttons... you might get different column heights. I have included an experimental CSS flex-box solution to match different heights. (See media-query part)
Personally, I am no fan of inline CSS, so you might remove those lines or copy them to your own custom CSS file. If your plans have the same properties and description text-length, you won't need that equal-height fix anyway. It's just to make the template and frontend more universal.

Screenshot / Example

em9_list_bootstrap2_flexbox

Code Example

Follow Sergey's advice for the file location and naming conventions.

Headsup: Pasted PHP/HTML markup has an formatting issue, so I had to remove the code. I have to attach the template as a .ZIP file!

Bootstrap 2 template example

TODO: Attachment

Hope this helps.

Would like to get some feedback. If everything works, I could upload the file in the downloads area, or it would make it into the default templates. Variants for other popular CSS/template frameworks would make sense, too ;)


lmarazzo VIP
Total posts: 98
05 Окт 2016 15:51

awesome! it works!


lmarazzo VIP
Total posts: 98
05 Окт 2016 17:08

How can i increase the padding in the responsive layout for the plans title and buttons not to be confused? thanks

LM


pepperstreet VIP
Total posts: 3,837
05 Окт 2016 23:58

lmarazzo How can i increase the padding in the responsive layout for the plans title and buttons not to be confused?

I knew you would ask that question :D ;)

I assume you are talking about the stacked order on narrow screens, right?
Sure this needs some space between the plans, but I didn't want to add more CSS styling.
Just added useful classes and the extra equal-height stuff...

However, you can easily style the plan container and the "gutter" for smaller screens like this...:

@media only screen and (max-width : 767px) {

.plan-wrapper {
    margin-bottom: 40px;
}

}

Increase px to your liking
Or use a % value like 10%
You may also add a visual border like the HR on your "learn" page. border-bottom: 1px solid black;
Maybe add a light background color to the entire plan?


BTW, I have noticed the space above and below your JSN pagebuilder content. There seem to be a lot of empty elements and their padding/margins. Small, but it seems to sum up. Please, check plan description for unnecessary Paragraph tags. And also the PageBuilder content itself. This should clean up your plans and reduce the "gutter" on top and below.


lmarazzo VIP
Total posts: 98
07 Окт 2016 18:14

By the way. This is a great code you gave me but there is a problem with the payment button. Look at the / on the href...

I took it out and now it works... You should keep this template in your product. its great!

thanks!

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> </div> <pre><code> <?php elseif(!$item->is_donation): ?> <div class="plan-button"> <a href="/<?php echo JRoute::_('index.php?option=com_emerald&view=empayment&sid='.$item->id); ?>" class="btn btn-warning"> <?php echo JText::_('EBTNBUYNOW'); ?></a> </div> <?php else: ?> <div class="plan-button"> <a href="/<?php echo JRoute::_('index.php?option=com_emerald&view=empayment&sid='.$item->id); ?>" class="btn btn-primary"> <?php echo JText::_('EBTNDONATE'); ?></a> </div> </code></pre> </div>'

pepperstreet VIP
Total posts: 3,837
07 Окт 2016 20:11

lmarazzo there is a problem with the payment button. Look at the / on the href... I took it out and now it works...

Oops, sorry. Seems to be an issue with copy/paste or the editor formatting.
I am going to remove the code example and make an attachment instead!

You should keep this template in your product. its great!

Yep, that is the final idea.
Besides Emerald 10 will have another option to load alternative (pre-fixed) template files.

Работает на Cobalt