- This topic has 16 replies, 4 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
October 6, 2020 at 2:44 pm #1475353Jatin
Hi Guys,
I have a custom css code to show the Category over the featured image but it shows fine on the mobile and not the same on the desktop. On mobile it shows fine as shown in screenshot sent in private info box along with site name.
Can you please help me get the consistent behavior on mobile and desktop for this particular case.October 6, 2020 at 3:56 pm #1475435ElvinStaffCustomer SupportHi,
I’ve noticed that you use 1 CSS style for different viewports and that is causing the issue.
Ideally, we’d have to set
@media
queries for different viewports since some settings that works on desktop might not look good on mobile.That said, you can try this code.
/* Settings for desktop */ .featured-image-category { position: absolute; bottom: 8px; left: 0px; background: #2E8B57; color: #fff; padding: 1px 15px 1px 15px; } @media(max-width:768px){ /* Settings for mobile */ .featured-image-category { position: absolute; bottom: 8px; left: 47.5px; background: #2E8B57; color: #fff; padding: 1px 15px 1px 15px; } }
October 7, 2020 at 1:59 am #1476012JatinThanks Elvin this worked like a charm, two more things. 1) I noticed that when i visit the blog page (info in private box) my featured images are centrally aligned. Is there any way to keep it left alight without breaking the Category over featured image ?
2) I am using header element for my post single and showing the category using the tags e.g. {{post_terms.category}}. Is it possible to not use this and show it the same way on as on Archive page on Post Single ?
October 7, 2020 at 7:21 am #1476493DavidStaffCustomer Support1. You can use this CSS to change the Mobile archive post image alignment to left:
@media (max-width: 768px) { body:not(.single-post) .inside-article .post-image { text-align: left; } }
And in the CSS provided here you would remove the
left: 47.5px;
property to align the term to the left.2. No the Header Elements can only be used ONCE on page and not within a post loop.
October 9, 2020 at 6:27 am #1480311JatinThanks David, This works but if i have multiple Categories for a Post then it just overlaps one another as you can see in the screenshot. Is there any way to show both the Categories and auto adjust itself.
October 9, 2020 at 12:55 pm #1481054TomLead DeveloperLead DeveloperYou need to have a div around those individual category divs:
<div class="featured-image-category-wrapper"> <div class="featured-image-category">Some category</div> <div class="featured-image-category">Another category</div> </div>
Then you position the
.featured-image-category-wrapper
element.October 10, 2020 at 2:45 am #1481646JatinHi Tom,
Sorry i am new to CSS and PHP. I have a code running in Code Snippet for this. Which part i should change. Some Category and Another Category – is it a hard coded category. I want it to pick it up when i set the categories for the posts and display on the Image as it shows now.
add_filter( 'post_thumbnail_html', 'tu_add_category_featured_image'); function tu_add_category_featured_image ($output) { $return = $output; $cat = get_the_category (get_the_ID() ); if (isset( $cat) && ! is_singular()) { foreach ($cat as $cat_name) { $return .= '<div class="featured-image-category">' .$cat_name->name. '</div>' } } return $return; }
October 10, 2020 at 5:47 am #1481819JatinHi David,
You provided below code which is working fine. But the Image i understand as required is left alight. But on mobile phone i want it to occupy the space on the right as well i.e. to Span the space rather than left align. I tried to change text-align to justify but it did not work.
/* ############# Post Single Featured Image to Left Align ################## */
@media (max-width: 768px) {
body:not(.single-post) .inside-article .post-image {
text-align: left;
}
}October 10, 2020 at 9:54 am #1482296TomLead DeveloperLead DeveloperYour code will need to look like this:
add_filter( 'post_thumbnail_html', 'tu_add_category_featured_image'); function tu_add_category_featured_image ($output) { $return = $output; $cat = get_the_category (get_the_ID() ); if ( isset( $cat ) && ! is_singular() ) { $return .= '<div class="featured-image-category-wrapper">'; foreach ($cat as $cat_name) { $return .= '<div class="featured-image-category">' .$cat_name->name. '</div>'; } $return .= '</div>'; } return $return; }
Then your CSS would look like this:
/* Settings for desktop */ .featured-image-category-wrapper { position: absolute; bottom: 8px; left: 0px; } .featured-image-category { background: #2E8B57; color: #fff; padding: 1px 15px 1px 15px; } @media(max-width:768px){ /* Settings for mobile */ .featured-image-category-wrapper { position: absolute; bottom: 8px; left: 47.5px; } }
October 10, 2020 at 10:14 am #1482319JatinThanks a lot Tom. I tried the Code but its showing Syntax Error. https://imgur.com/Rj5clga
October 10, 2020 at 1:26 pm #1482517TomLead DeveloperLead DeveloperCan you try the updated code above?
October 11, 2020 at 3:58 am #1483042JatinPerfect. Thanks Tom. Works great. However the Image on Mobile is left aligned. Can it take up the space on the right. https://imgur.com/OxZuQMm
October 11, 2020 at 11:03 am #1483630TomLead DeveloperLead DeveloperThe images aren’t wide enough to fill that space.
You’ll need to make the wider in order for that to happen. You can always make it so a larger image is loaded, and then resize it on desktop using CSS if necessary.
October 12, 2020 at 3:16 am #1484485JatinThanks Tom will do. All good now. Except that the categories are showing as one block rather than separate ones. https://imgur.com/wDPts7z.
October 12, 2020 at 7:48 am #1484863DavidStaffCustomer SupportHi there,
edit this CSS to include the bottom margin property:
.featured-image-category { background: #2E8B57; color: #fff; padding: 1px 15px 1px 15px; margin-bottom: 2px; /* Add this property */ }
-
AuthorPosts
- You must be logged in to reply to this topic.