Tagged: featured, featured images, mobile
-
AuthorPosts
-
July 27, 2015 at 8:34 pm #479284
Hello,
I’m trying to get featured images to show up on the Blog Posts module on mobile. I would like to have big-preview image show above the title, just like it is when you click into a post.
Thanks in advance!
July 28, 2015 at 12:28 am #479375Hey STATSmkt!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 767px) { .responsive .template-blog .blog-meta, .responsive .post_author_timeline, .responsive #top #main .sidebar { display: block; }}
Regards,
YigitJuly 28, 2015 at 5:43 pm #479837Thank you for your reply!
With your code, that adds the square version of the image to the side of the post and squishes all the content, not the full featured image above the post. Any idea how to get the full size image above the post?
July 30, 2015 at 4:21 pm #480765I also need to know this.
July 30, 2015 at 6:06 pm #480811Hi!
Please add following code to Quick CSS as well
@media only screen and (max-width: 767px) { .template-blog .blog-meta { float: none; margin: auto; width: 100%!important; } a.small-preview img { margin: auto; } a.small-preview { width: 100%; background-color: transparent!important; } .flex_column .template-blog .post .entry-content-wrapper { width: 100%; padding-top: 20px; } }
Regards,
YigitJuly 30, 2015 at 6:17 pm #480814Thank you!
A few things–That removes all the content from the blog post preview. [EDIT: Added .template-blog .post .entry-content-wrapper {overflow:visible !important;} and that brought the content back]
And also, is there a way to use the full width image instead of the square image?
- This reply was modified 9 years, 4 months ago by STATSmkt.
July 30, 2015 at 6:25 pm #480818It’s still the same. I added this code:
@media only screen and (max-width: 767px) { .responsive .template-blog .blog-meta, .responsive .post_author_timeline, .responsive #top #main .sidebar { display: block; }} @media only screen and (max-width: 767px) { .template-blog .blog-meta { float: none; margin: auto; width: 100%!important; } a.small-preview img { margin: auto; } a.small-preview { width: 100%; background-color: transparent!important; } .flex_column .template-blog .post .entry-content-wrapper { width: 100%; padding-top: 20px; } }
I need the featured image to be on top of the text. At the moment it’s beside the featured image which makes the page very long.
Check it right here; http://esther.abosict.nl
- This reply was modified 9 years, 4 months ago by Jillian.
August 3, 2015 at 6:34 am #481889Hi,
Sorry for the late reply. Did you manage to get the problem fixed? Looking at your site it looks like the images are full width and on top of the text.
Thanks,
RikardAugust 4, 2015 at 12:01 am #482457Hi Rikard,
The problem still isn’t fixed entirely. If you take a look at the link, the images above each post are still square thumbnails. I would like them to be the full-width image, just like they are in the individual post (this is for mobile, btw).
If you could provide some more clarity into this, that would be of immense help.
Thanks!
August 4, 2015 at 5:26 pm #482853Hi!
It is not easily possible as featured images of the blog style you are using are 180x180px. It is not possible to make them fullwidth without changing image size of square images or without distorting them. You can go to Appearance > Editor and open functions.php file and find
$avia_config['imgSize']['square'] = array('width'=>180, 'height'=>180);
and increase the width and height then regenerate thumbnails using this plugin – https://wordpress.org/plugins/regenerate-thumbnails/.
Or you can refer to my post here – https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263 to display different elements on desktop and mobile.Cheers!
Yigit -
AuthorPosts
- You must be logged in to reply to this topic.