STYLING: "Blog Post"- and "Magazine"-elements (featured image + mobile behavior) - Support

Tagged: blog post, featured image, magazine element

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 22, 2018 at 10:20 am #945024
Aulas
Participant
Hi there Kriesi Team,

I have some problems with the setup of my page (link below). I am on my way, but I just can’t get the last few things into place :-)

1. I would like the setup to look like the image below (with rectangular featured image to the left and post-title, excerpt-text and read-more-link to the right for the image). If you look at my page, I am nearly there – but how do I make the last?
I used this Quick CSS:
```
#top .fullsize .template-blog .big-preview {
    width: 26%;
    float: left;
    margin-right: 2%;
    margin-top: 50px;
}  
```
2. I would like the mobile/small-screens behavior to look like image 2 below. (With the featured image on top and the rest below) how do I do that?

3. In the Magazine Elements I would like:
- A. Increase the space between the “Heading Text” (the dates) and the “Post titles”.
- B. Increase the space between the 3 Magazine elements (top right corner of my page)
I really do hope it is possible to make last corrections :-)
Best regards Laura
April 24, 2018 at 7:22 am #945708
Ismael
Moderator
Hey Laura,

Thank you for using Enfold.

1-23.) Set the “Preview Image Size” of the Blog Posts element to “manual” and then select a larger version of the thumbnail. Add the following css codes afterwards.
```
@media only screen and (min-width: 768px) {
#top .fullsize .template-blog .post .entry-content-wrapper {
    max-width: 1200px;
}

#top .fullsize .template-blog .post .entry-content-wrapper > * {
    max-width: 80em;
    margin-left: auto;
    margin-right: auto;
}

#top .fullsize .template-blog .post .big-preview {
    width: 30% !important;
    float: left;
    margin-right: 2%;
    margin-top: 0;
}

#top .fullsize .template-blog .post .entry-content-wrapper > .entry-content-header {
    width: 67%;
}
}
```
And then use this script to move the preview image above the header container.
```
add_action('wp_footer', 'ava_custom_script_blog_mod');
function ava_custom_script_blog_mod(){
?>
<script type="text/javascript">
(function($) {
    $('.html_elegant-blog .av-alb-blogposts .post').each( function() {
        var image, heading;

        image = $(this).find('.big-preview');
        header = $(this).find('.entry-content-header');

        image.insertBefore(header);
    });
})(jQuery);
</script>
<?php
}
```
3.) Use these css codes to adjust the bottom margin of the magazine top bar and the space between the magazine items.
```
.av-magazine {
    margin-bottom: 50px;
}

.av-magazine-top-bar {
    margin-bottom: 20px;
}
```
Best regards,
Ismael
April 25, 2018 at 11:11 am #946510
Aulas
Participant
Hey Ismael,
THANK YOU – that’s exactly what I have been looking for :-) Great!

But now I got two new challenges on the page…..

1. How can I make the images responsive? I’m struggling with the fact that the image becomes very large, on “middle” screen size view (looks nice on big and small screens). If I fix the image size, then the image is squeezed. (See pictures below) –
( Please not that I am only testing on the TOP image on the Blog Posts list [ 495 x 340 px ] – I tried all the different standard sizes – but they don’t seem to match..)

I used this quick css code to fix the image size:
```
.page-id-xxxx .big-preview img {   
      height: 270px !important;
    width: auto !important; /* and I tried to fix the width as well */
   clip: rect(0px,200px,200px,0px);  
}
```
2. How can I increase the space between the “Post title” and the “Content text”? – on the Blog Posts list, same page.

Thank you again – and I really do hope that you can help with these issues :-)
Best regards Laura
April 27, 2018 at 5:25 am #947618

Ismael
Moderator

Hi,

We don’t usually entertain multiple questions on a single thread but since I found your inquiries a little late than usual, I tried to answer them all. If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

May 1, 2018 at 5:35 pm #949589

Aulas
Participant

Hey Ismael,
Thank you for your answer and good help – and for your good advice about forum behavior… it makes sense :-) I will split my questions.
Best regards Laura

May 2, 2018 at 11:00 am #949952

Ismael
Moderator

Hi,

Awesome! We’ll close this one now. :)

Best regards,
Ismael
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘STYLING: "Blog Post"- and "Magazine"-elements (featured image + mobile behavior)’ is closed to new replies.