I asked this question over on the themeforest comments section but the answer really what I was looking for. Below is the question and answer from there.
Me – Is there no way of having the thumbs of the homepage latest post still be high quality for mobile phones like iphone and androids. Even after I regenerated the thumbnails they always show up grainy on mobile phones.
Support – Hi,
On mobiles they’re set to width: 100% because there are many devices with different screen sizes, you can set the images to their original size using custom css like this: – http://screencast.com/t/DHEEDFsnZQe
Updated question. I want to keep the width still 100% on mobile but the current size thumb for module 11 is not sufficient on mobile phones as it becomes super grainy on mobile screen with high ppi. If I change the thumbnail size to a 600 width for module 11 how can I still keep it within its container for the desktop and 100% for mobile?
Hi,
Then the image will be loaded at 600px and you would need to use custom css to make it fit into it’s container on desktops and also on tablets and set it to 100% width for mobiles. To target the image for all screens widths (desktop/tablets/mobiles) you would have to use this css snippets:
/* mobile */
@media (max-width: 767px) {
}
/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {
}
/* desktop */
@media (min-width: 1024px) {
} You could also use the advanced css filed from theme panel and add the css for tablets/mobile/desktop into the specially designed fields: http://screencast.com/t/yqSKh7xOaZ
If you don’t have basic html/css/php knowledge and don’t know how to do it we suggest you hire a developer to do it for you as unfortunately we cannot offer custom work as we work hard on the development, updates, fixes and support. You can always get a freelancer from sites like: http://studio.envato.com/ if you don’t know how to do it yourself.
Hope this helps!
Thanks for the message!
