Hello,
I was wondering how I can change the mobile display of our website. Presently it is like this :
http://www.screencast.com/users/omnipundit/folders/Default/media/bde94e22-abc9-43c1-bc3e-91ea6e83f9cb
but I want to change to :
http://www.screencast.com/users/omnipundit/folders/Default/media/a450f9e4-0577-4061-946b-dbdbd45ba09e
So basically want to make image bigger(no excerpt) for mobile display. But at the same time I want to keep Block 6 for desktop (with excerpt). I have seen it done by lot of websites with same theme. Can anyone help me with the perfect block I need to use for Mobile display. Can we use two different blocks for two types of display?
Thanks,
sirfanik1
Hi,
Use this CSS, add it in Theme panel -> Custom CSS section
@media (max-width: 767px) {
.td_mod9 .meta-info,
.td_mod9 .td-post-text-content {
display: none;
}
.td_mod9 .item-details {
margin-left: 0 !important;
margin-bottom: 10px;
}
.td_mod9 .thumb-wrap img {
position: relative !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
margin-bottom: 10px;
}
}
Thanks for the message!
Hi Marius,
Thanks for the custom CSS. I got this after applying the code.
http://www.screencast.com/users/omnipundit/folders/Default/media/a181fa89-5bf7-4d9e-aa92-395f00bd9746
However I want to keep a small white margin on both sides of the image as indicated in the above image with red arrow. Also I need help in changing the font type and size of the title of each article below the image. Can you provide me with your views.
Thanks,
India Insights
Hi,
Use this css for the images: http://screencast.com/t/L25693Vu
@media (max-width: 767px) {
.page .td_mod9 .thumb-wrap img {
width: 95% !important;
margin-left: 2.5% !important;
margin-right: 2.5% !important;
}
}
For title fonts you already have them changes via css so you just need to replace them: http://screencast.com/t/upMO5iMk
Thanks
