Hi,
I am using block number 11 to show articles on my website and I would like to get the same layout even on mobile (http://hardwarestartup.io). At the moment the images on mobile are really big and the article titles are shown below. I would like to maintain the same layout I have on my website even on mobile (like TechCrunch app).
Is there any way to do that?
Thanks a lot!
Best,
Fab.
Hi,
You can try to use a fixed width also on mobile view like this and display title and excerpt under the image :http://screencast.com/t/eSzFdzj99vl
@media (max-width:767px) {
.home .td_block_11 .td-module-thumb .entry-thumb {
width: 180px !important;
}
}
Also if you want to display it the same like on desktop please use this css in Theme Panel > Custom Css: http://screencast.com/t/QLMicNRJF6Z
But on very small screens it will look like this: http://screencast.com/t/pHeQo2yiOz
@media (max-width:767px){
.home .td_block_11 .td-module-thumb .entry-thumb {
width: 180px !important;
}
.home .td_block_11 .td_module_10 .td-module-thumb {
position: relative;
float: left;
margin-bottom: 20px;
}
.home .td_block_11 .td_module_10 .item-details {
position: relative;
min-height: 135px;
margin-left: 200px;
margin-bottom: 40px;
}
}
Hope this helps!
Hi,
Thanks for your reply. Is it possible to reduce the size of the images on mobile even more and the text as well? I would like to have this kind of layout in the end. http://prntscr.com/6k9b44
Thanks a lot,
Fab.
Hi,
Just decrease the width from the above code to reduce the images size on mobile and and if you want to hide the excerpt on mobile please use custom css to hide it: http://screencast.com/t/XMmQSva2S9L
@media (max-width:767px){
.home .td_block_11 .td-module-thumb .entry-thumb {
width: 150px !important;
}
.home .td_block_11 .td_module_10 .td-module-thumb {
position: relative;
float: left;
margin-bottom: 20px;
}
.home .td_block_11 .td_module_10 .item-details {
position: relative;
min-height: 135px;
margin-left: 200px;
margin-bottom: 40px;
}
.home .td_block_11 .td_module_10 .item-details .td-excerpt {
display: none;
}
}
If you don’t have basic css/html experience I suggest to get someone to do this for you as we cannot offer custom work. Sorry!
Thanks!
