On my homepage I’m using Block 11, which contains Module 10. In the documentation it shows that Module 10 has a thumbnail size of 180 x 135.
When I use a three column layout with Block 11, the image shrinks to 80 x 60. How can I maintain the 180 x 135 thumbnail size? 80 x 60 is just too small.
Thanks,
Hi,
Please try this custom css in Theme Panel > Custom Css: http://screencast.com/t/9HHBSuVmPW
@media (min-width: 768px){
.td-pb-row .td-pb-span4 .td_block_11 .entry-thumb {
width: 180px !important;
margin-left: auto;
margin-right: auto;
}
.td-pb-row .td-pb-span4 .td_block_11 .td_module_10 .td-module-thumb {
float: none!important;
}
.td-pb-row .td-pb-span4 .td_block_11 .td-module-title {
padding-left: 0px !important;
}
}
This css will be applied on tablets and desktop.
Thanks!
Thanks for your prompt reply.
Please bear with me here I’m still learning CSS. I have some questions.
Will this new code cause the image to appear above the title and excerpt, or will the image be side-by-side with the title? I’d prefer side-by-side.
Secondly, where exactly does this code need to be inserted? Do I go into the Theme Panel > Custom CSS > Your Custom CSS and paste it in? Or, does it need to be inserted into the stylesheet? And, does this go into the parent or child theme?
Thanks,
Put it in the custom css panel, then refresh browser … nothing will blow up by trying it out 🙂
You can always remove anything you paste into the custom CSS box. It’s not permanent and doesn’t change anything … it’s just an “over ride” for the default styles/setup. 🙂
Hi,
Thanks Chris!
@awtown The above css code will place the thumb above the title but you can change this if you like how it looks – http://screencast.com/t/9wy1BnfrpkKl Replace with this code in Theme Panel > Custom Css: http://screencast.com/t/9nlnbRRJ
@media (min-width: 768px){
.td-pb-row .td-pb-span4 .td_block_11 .entry-thumb {
width: 180px !important;
margin-left: auto;
margin-right: auto;
}
.td-pb-row .td-pb-span4 .td_block_11 .td-module-title {
padding-left: 185px !important;
}
}
Also if you like with thumb above title like I provided the code first time, please adjust that code like this as it affect also module 10. So this is the right code and I will also edit and change it in my previous post: http://screencast.com/t/qVrW4EhS7
@media (min-width: 768px){
.td-pb-row .td-pb-span4 .td_block_11 .entry-thumb {
width: 180px !important;
margin-left: auto;
margin-right: auto;
}
.td-pb-row .td-pb-span4 .td_block_11 .td_module_10 .td-module-thumb {
float: none!important;
}
.td-pb-row .td-pb-span4 .td_block_11 .td-module-title {
padding-left: 0px !important;
}
}
Thanks!
