How to change responsive size of module in mobile?

Hi, i know that there’s advance css on theme panel for mobile, but how do i change the module size?

please refer from this screenshot:

View post on imgur.com

In big grid, the module is split into two per row. While block 16 becomes 1 big module per row.

How do i make block 16 to split into two per row just like in big grid?

Thanks!

Hi

Try this css in theme panel > custom code > custom css: http://screencast.com/t/KqYttQKyEMC

@media (max-width: 767px){
.td_block_16 .td-block-row .td-block-span4{
width: 49% !important;
}
}

Thanks!

hi, it worked but creates spaces every 3 modules as shown here:

View post on imgur.com

also, how can I decrease font size? it’s too big when i check in my mobile.

Hi

Note that this block wan’t designed to be displayed on two colons on mobile devices and there is a chance to appear some issues when you’re trying to change its layout. Try this css instead of the first one, it should work fine now: http://screencast.com/t/fviNy2t48

@media (max-width: 767px){
.td_block_16 .td-block-row .td-block-span4{
width: 50% !important;
}
.td_block_16 .td-block-row:after{
clear: right;
}
.td_block_16 .entry-title{
font-size: 13px;
}

Thanks!

Thanks it worked somehow, but there still a problem..

please refer from this screenshot:

View post on imgur.com

as seen above, it still creates a space.. i’ve noticed that when the title number of lines is not equal, it creates a space. as you’ve noticed, one module has 3 lines of title, while the next one, it has 2 lines of title.. then the space is created below.. any fix?

Thanks!

• This reply was modified 10 years by pauuuuu29.
• This reply was modified 10 years by pauuuuu29.

hi, i’ve managed to fix it by specifying a height to the title, but if there’s any better fix, let me know. Thanks!

Hi

Glad you’ve managed to solve this.
You can use this solution at the moment if it works fine. There might be a better solution but this involve a new approach for block’s layout.

Thanks!