Support » Plugin: Metaphor Shortcodes » Responsive behaviour

  • Resolved mister klucha


    I needed a pricing box, found metaphor shortcode. I tried it and the design seems to suit what i want. Good.

    I use princing tables and pricing list
    But problem, it’s not responsive at all on smartphone, (i tried severals, android, ios, windows phone).

    I’m wondering how to get it responsive ?
    example : if i set 2 rows – rather than put them near each other horizontaly, how to set each row veticaly”

    On another and, a (perhaps “not required”) title for for price tab in list syle is possible to set ? i’m trying to add it but i need to customized code and i’m a so poor coder so i don’t even know what to tweack !
    Best regards

Viewing 16 replies (of 16 total)
  • Thread Starter mister klucha


    About adding a title feature in list mode :
    After somes hours tweaking the code this week-end (yeah some hours !!), i’ve got what i want :

    I added to “shortcodes.php” in “function mtphr_pricing_table” :

    'total' => '',
    'total_tag' => __('Total', 'mtphr-shortcodes'),

    after :
    extract( shortcode_atts( array(

    if( $style != 'condensed' ) {
    		if( $title != '' ) {
    			$title = apply_filters( 'mtphr_pricing_table_title', $title );
    			$title_tag = apply_filters( 'mtphr_pricing_table_title_tag', $title_tag );
    			$html .= '<'.$title_tag.' class="mtphr-pricing-table-title-list">'.$title.'</'.$title_tag.'>';
    		if( $total != '' ) {
    				$total_tag = apply_filters( 'mtphr_pricing_table_total_tag', $total_tag );
    				$html .= '<div class="mtphr-pricing-table-total-tag-list">'.$total_tag.'<span class="mtphr-pricing-table-total-list">'.$total.'</span></div>';

    after :
    $html .= '<div class="mtphr-shortcodes-grid'.$span.$class.'">';

    CSS i added is :

    .mtphr-pricing-table-title-list {
    	font-size: 16px;
    	line-height: 10px;
    	text-align: left;
    	padding-top: 5px;
    	padding-bottom: 5px;
    .mtphr-pricing-table-total-tag-list {
    	text-transform: uppercase;
    .mtphr-pricing-table-total-list {
    	font-size: 20px;
    	float: right;
    	color: #EE2535;

    All this give me

    Certainly not a pure and wonderful code, but this nightmare code i wrote works !

Viewing 16 replies (of 16 total)
  • The topic ‘Responsive behaviour’ is closed to new replies.