Responsive behaviour

  • Resolved mister klucha

    (@mister-klucha)


    11 years, 10 months ago

    Hi
    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

    https://www.ads-software.com/extend/plugins/mtphr-shortcodes/

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

    (@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(
    and

    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;
	font-weight:bold;
	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-weight:bold;
	font-size: 20px;
	float: right;
	color: #EE2535;
}

    All this give me https://ama.kegtux.org/?page_id=59.

    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.