kannandgr8

Thanks a ton Steven. This trick worked perfectly.

Cheers!
Kannan

Hi Steven,

Thanks for your feedback and help. I will open a separate thread in WP forums for this issue. I did try the css provided by you, but it did not make any difference to the padding in the mobile view. Any idea why?

Cheers!
Kannan

Thanks Steven. The updated css helped me fix the bug with the featured posts. Thanks for the tip on the text to appear on the side of the thumbnail too. As you mentioned I have to play around bit with that to achieve the layout that I want.

Hi Steven,

I have found one more major bug with the Featured posts. In the mobile and tab view, if I click on either the first or the second featured post, it always takes me to the 3rd featured post (which is displayed on separate line as per the new CSS that we introduced). Could you please help in fixing this bug.

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

}
}

Best Regards
Kannan

Hi Steven,

Thanks for your reply. How to move thumbnail the thumbnail beside the title and category (instead of stacked)?

Best Regards
Kannan

Hi Steven,

Thanks for your reply. While the above fix did help in getting around the alignment issue. However I am now back with the same issue of not being able to utilize the extra space on the tab for a two column layout. The reason I was looking to have this view especially for the tab and mobile was to reduce the scrolling in the Category section, as I expect to have quite a few posts/ recipes in each category.

Cheers!
Kannan

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

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

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

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

Regards
Kannan

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

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