Mobile Responsive Look

Hello TagDiv,

I would like to know if there is a way to change the way Block 11 looks on Mobile?
Rather than a full-width look, is there a way I can make Block 11 look like Block 8 ONLY on Mobile?

It would complete my site as that is the look I am going for.

Thanks,

Hi

You can try this css in theme panel > custom code > custom css to achieve a similar layout: http://screencast.com/t/F9EgCwlA2

@media(max-width: 768px){
.td_block_11 .td-module-thumb .entry-thumb {
width: 100px;
float: right;
margin-left: 20px;
}
}

If you want a different implementation you will need some cutomizations in theme’s files as the css code can’t reproduce 100% the layout of block 8 on mobile.

Thanks!

Hi Andrei,

Thanks for the above.
I am struggling to change the look of one more module.

I would like Block 11 to look like Block 3 on Mobile ONLY.

I know how to use display: none for the excerpt, but how can I change the thumbnail dimension of the block so it replicates the full width size?

Thank you!

Hi

Please note that all this customizations require lots of tests and many customizations in order to achieve the desired result. Theme’s block have a fixed layout for each device and changing it require a specific approach for each block. Basicaly you can use media queries as I did in previous example and target the modules used in block 3 to change their’s layout.
Unfortunately time does not allow us to offer any custom services at the moment so if you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you.

Thanks!