Stretch Price on vertical mobile view

[Dariya]

Hello! Can you help us please. How can we do a stretch Price on vertical mobile view on Home page? We use this CSS .pmpro_content ul{ margin:0 !important; list-style:none !important; } .pmpro_pricing_table>li{ width:33%; float:left; border:1px solid #EFEFEF; text-align: center; padding:30px; height:520px; position: relative; } .pmpro_pricing_table>li{ } .pmpro_pricing_table>li:hover{border-color:#FF6600;} .pmpro_pricing_table>li.current{border-color:#FF6600;} .pmpro_pricing_table>li>ul{padding-left:0 !important;} .pmpro_pricing_table>li>ul li{ padding:6px 0;position:relative; } .pmpro_pricing_table>li .pmpro_price{ font-size:12px; text-transform:uppercase; } .pmpro_pricing_table>li a{ padding:6px 20px; border-radius:2px; background:#ff6600; color:#FFF; width:120px; position: absolute; bottom:-60px; left:50%; margin-left:-60px; } .pmpro_pricing_table>li.current a{ background:#FF6600; } .pmpro_pricing_table>li>ul li h2{margin:0;font-size:14px;font-weight:600;text-transform: uppercase;} span.pmpro_price:before { content: ''; background: rgba(0,0,0,0.1); display: inline-block; width: 160px; height: 160px; border-radius: 50%; } .pmpro_pricing_table>li .pmpro_price strong span { display:block; font-size: 11px; } .pmpro_pricing_table>li .pmpro_price strong{ font-size:36px;font-weight:600; display:block;  position: absolute; top: 35%; left: 50%; margin-left: -19%; line-height: 1; } .pmpro_pricing_table>li.current .pmpro_price strong, .pmpro_pricing_table>li:hover .pmpro_price strong{color:#FFF;} .pmpro_pricing_table>li.current h2,.pmpro_pricing_table>li:hover h2{color:#FF6600;} .pmpro_pricing_table>li:hover span.pmpro_price:before, .pmpro_pricing_table>li.current span.pmpro_price:before{background:#ff6600;}

[Anshuman Sahu]

Please try adding the given css also : @media (max-width: 767px){ .pmpro_pricing_table>li {     width: 100%; } }

[Dariya]

Thank you. Now we can see it all. But in vertical position it is too long. How can we make it stretch but horizontal on mobile view? Not vertical How can we make it like in screenshot horizontal but little smaller?

[Anshuman Sahu]

again that will also not possible as the mobile has very small width and showing all the  three membership pricing element wont be possible in such a small width .It would be better to show one element in mobile .

[Author]

Posts