Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 27, 2015 at 8:34 pm #479284
    STATSmkt

    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 #479375
    Yigit

    Hey 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,
    Yigit

    July 28, 2015 at 5:43 pm #479837
    STATSmkt

    Thank 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 #480765
    Jillian

    I also need to know this.

    July 30, 2015 at 6:06 pm #480811
    Yigit

    Hi!

    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,
    Yigit

    July 30, 2015 at 6:17 pm #480814
    STATSmkt

    Thank 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, 3 months ago by STATSmkt.
    July 30, 2015 at 6:25 pm #480818
    Jillian

    It’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, 3 months ago by Jillian.
    August 3, 2015 at 6:34 am #481889
    Rikard

    Hi,

    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,
    Rikard

    August 4, 2015 at 12:01 am #482457
    STATSmkt

    Hi 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 #482853
    Yigit

    Hi!

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.