CSS for Blog Posts Header Section
-
I am trying to find a CSS fix for an area in the header on the individual blog posts sections. I would like the black bubble around the “posted on – date” and “leave a comment” area to NOT TO be there. Can someone please help me with a possible CSS fix for this?
Example here: https://inkinthirds.com/2018/10/25/tlt-throwback-year-2-forty-two/
The blog I need help with is: (visible only to logged in users)
-
Hello @graceblackink,
Try adding the following code to your CSS:
#primary-header.has-background-cover .entry-meta { background: transparent; }Give that a try and let me know how it goes. :)
-
Thank you, @charleybea ! It worked.
Another question: Is there a way to fix all of the Feature Image Headers in the mobile view (version) soothed are not squares? The featured image size in the theme is 1100×560 but when viewed on mobile version it become a box. Is there a way to code this so that the mobile version iFeatured Image Headers are more rectangular like the Desktop and Laptop version?
-
-
Hello @graceblackink,
You’re welcome! Sure – it looks like the featured image height is using ’ems’ for the featured image on all devices, so we can target smaller devices like a phone. I started with 18em, but feel free to play with that more.
Try this out and let me know how it goes. :)
@media only screen and (max-width: 500px) { #primary-header { height: 18em !important; } } @media only screen and (max-width: 500px) { #primary-header .primary-hentry-inner { padding: 0 0 30px; } } -
Thanks so much, @charleybea! It’s perfect. Seems like they should have fixed this one in the theme directly. So grateful you are so knowledgeable.
I have another issue now but it’s a different topic. So I’ll post in another thread.
Thanks again!
Grace
- The topic ‘CSS for Blog Posts Header Section’ is closed to new replies.