Layout of featured posts and blogfeed in mobile and tablet view

Hi @kannandgr8,

Thanks for getting in touch, and thank you for using Kale- we really appreciate it.

Unfortunately we would need to be able to see this in action to be able to help out with some custom CSS here…besides not being live yet, it looks like the site is down with an error at the moment.

If you’re able to either make the site visible, or to share temporary admin access, we’d love to help you get this setup the way you want it.

Thanks again for reaching out, and have a great day!

Hello Steven,

Thanks for your reply. I have launched the site now and you should be able to view the blog by clicking the above mentioned URL.

The main issue is with the layout of the site in the tab or iPad where the posts in the blogfeed section as well as featured posts section appear with plenty of white space on right, as it is not getting auto-adjusted to two columns layout in the blogfeed section. It is a similar issue when I view the Categories section from the Main menu.

I was playing around with the css to at least align the post to the center of the page and was partially successful for the home page, however still not able to align the metadata. My preference would be to align at least one more post in the same row for the tablet view so that the space is not wasted. Need to understand the css for the categories page as well. Below is the css that I have added so far a part of my trial and error:

.blog-feed .entry-summary, .frontpage-featured-posts .entry-summary {
display: none;
}

@media (max-width: 767px) {
.header-row-1-toggle {
display: none;
}
.header-row-1 {
max-height: unset;
}
}

.entry img {
margin: 0 auto;
}
.frontpage-featured-posts h3.entry-title, .entry-date,
.blog-feed-posts h3.entry-title {
text-align: center;
}

.single-content img {
width: 100%;
height: auto;
}

.post .entry-img{
width: 100%;
}

.post .entry-img img {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}

.single-post .type-post .wp-post-image {
margin: 0 auto 0.5em;
display: flex;
}

Look forward for your suggestions and help here. Thanks

Thanks @kannandgr8, this is very helpful!

I see what you mean…it looks like Bootstrap is taking over here. You’re using a child theme (nice!), so the simplest way to change this is probably going to be adding a copy of the blog feed template into your child theme, and then changing the posts from Bootstrap’s col-md-6 class to col-sm-6 instead in /parts/feed.php.

If you have any trouble, just let us know!

Thanks Steven for your feedback. Could you please guide me with the steps for this please. Where can I find these files?

Also would I be able to restore the original settings, if for some reason either this does not work out or I am unhappy with the layout.

Thanks again

Hi Steven,

Could you please guide the steps required to achieve this. Thanks again.

Regards
Kannan

Sure thing, @kannandgr8!

1. Copy /parts/feed.php from your parent theme into your child theme
2. Edit the child copy, replacing the instances of col-md-6 with col-sm-6

If you have any trouble, just let us know! ??

Hi Steven

Thanks a ton. This is exactly what I wanted. Looks perfect in iPad or tab now. However just one issue – The posts still does not appear in two column layout for the featured posts section in the home page (above the recent posts section) and have the same issue when Accessing the Categories page. Could you please let me the steps to extend this same setting to these two sections as well

Cheers!
Kannan

Hi Kannan,

Glad we’re getting close! The featured posts section could be a little sticky since it’s not a multiple of two…do you have any ideas for how to handle that third post?

The category pages you can adjust by finding the col-md-4 on line 21, and adding col-xs-6 after it, so it looks like this:
<div class="col-md-4 col-xs-6">...

Thanks again!

Hi Steven,

Thanks for your quick response. I am however unable to find the col-md-4 on line 21 in feed.php file. I could not find any reference of col-md-4 in this file. Is it to be modified in some other file?

With respect to the Featured posts, yes even I thought the same. It looks perfect in landscape mode or laptop, however if we cannot make this an even number, was wondering if in the iPad portrait mode, the first two posts appear side by side (like in recent blog posts adjustment we did) and the third post either appear in the next line aligned against the center of the screen, or possibly a larger view for the third post alone.

Thanks again for your valuable help and suggestions here.

Cheers!
Kannan

Hi Kannan,

Sorry about that- I should have clarified…the name of the category file is category.php.

The featured posts can be edited in the same way as the category posts…the file for those is /parts/frontpage-featured.php.

And to center the last of the three posts, you can use the following CSS:

.frontpage-featured-posts .row > div:last-child {
    float: none;
    margin: 0 auto;
}

Hi Steven,

Thank you so much for your inputs, it worked for me this time. The category page is perfectly sorted now.

With the additional css, the centering of the third post in the featured post also works perfect in tablet or iPad. However with the additional css, the alignment does get distorted in the desktop or laptop view, as even though there is space for the third post in the first row, but it gets pushed to the second row and looks out of alignment. Is there any selective fix for the desktop view where the 3 posts can displayed in one line if there is enough space available?

I am sorry if I am repeatedly troubling you on this, but I believe this must pretty much be the last thing ??

Thanks again

Cheers!
Kannan

Hi Kannan,

Ah…that’s my bad- I should have limited that to screens 991px or smaller:

@media (max-width: 991px) {
    .frontpage-featured-posts .row > div:last-child {
        float: none;
        margin: 0 auto;
    }
}

This should do the trick in the place of the previous CSS. If you have any other issues just let us know! ??

Thanks Steven. This CSS worked now. You are a star ?? Really appreciate your help here.

Happy to hear that it worked out, Kannan, thanks for the follow up.

If you need anything else, just let us know! ??

Hi Steven,

Sorry to bother you again. I just noticed a bug or issue in the Categories page, where if there are 4 or more posts, the alignment is incorrect. The 4th post does not appear inline w.r.t 3rd post and moves to the next line. I see this issue both in mobile and tab view. The layout however is fine in desktop view.

You could notice this issue in both the categories – ‘Breakfast Recipes’ as well as ‘Curries and Gravies’.

Could you please advise on this.

Thanks

Regards
Kannan