[AndrewParticipant]

Is there a way to do this with CSS?

[RadModerator]

Hi there,

Thanks for posting.

Depends on site’s structure. What stack you’re on? Would you mind providing some url where you wish to apply this?

Thanks!

[AndrewParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks! I’m assuming you’re referring to recent posts at your home page. In that case, please add this css 😉

.x-recent-posts a {
  position: relative;
}
.x-recent-posts .h-recent-posts {
  position: absolute;
  z-index: 9999;
  margin-top: -50px;
  background-color: rgba(255,255,255,0.7);
  width: 100%;
  left: 0;
  padding: 10px;
}

Hope this helps.

[AndrewParticipant]

No, I mean when you view a specific post, I’d like to overlay the title on the featured image.

For example: https://wordpress.org/plugins/wysija-newsletters/

[Paul RModerator]

Hi,

In that case, please replace the code with this.

.single-post .entry-title {
  border-radius: 10px;
  position: relative;
  margin-top: -100px;
  z-index: 9999;
  margin-bottom: 30px;
  margin-left: 30px;
  background: #000;
  width: auto;
  float: left;
  color: #fff;
  padding: 10px;
}

Hope that helps.

[AndrewParticipant]

PERFECT! Thank you!!!

[John EzraMember]

You’re most welcome!

[Michael Burton, CFP®Participant]

I think I am asking the same question, but just to be sure: I want to feature one to three single images on the home page of my blog. I would like the option to have the title of the post overlay on top of the image. Is the way to do this to use the css code above?

If so, what is it going to look like? Can you point me to a sample page that is using the same CSS code?

Thanks so much!

[Rue NelModerator]

Hello There,

Thanks for updating this thread! The code that is working for Andrew is only applicable in single post. As I understand, you want something that will be in your blog page.

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.

To assist you with the issue, it would be much better if you also provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[koixtechParticipant]

Dear Team,

I deployed the same CSS on the blog pages, it looks stunning.
But, the issue is in Mobile View, it remains the same & is not responsive.
I tried using the below code, but it does not work (in inspect element they are striked out)

@media (max-width:  800px) {
.x-topbar {
display: none;
}
.single-post .entry-title {
font-size: 2em;
  border-radius: 5px;
  position: relative;
  margin-top: -150px;
  margin-bottom: 30px;
  margin-left: 30px;
  background: #000;
  opacity: .7;
  width: auto;
  float: left;
  color: #fff;
  padding: 5px;
}

[koixtechParticipant]

Dear X,

My question is how do i make the blog title responsive on all the devices, maintaining the ratio of the image text over the featured image.

Thanks!
Roy

[ThaiModerator]

Hi Roy,

Would you mind providing us with your website URL so we can take a closer look?

Thanks.

[koixtechParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi Roy,

Try adding following CSS under Customize > Custom > CSS:

@media (max-width: 767px){
    .single-post .entry-title {
        margin-left: 0;
        font-size: 3em;
    }
}
@media (max-width: 640px){
    .single-post .entry-title {
        font-size: 2.5em;
    }
}
@media (max-width: 480px){
    .single-post .entry-title {
        font-size: 2em;
    }
}

Hope it helps.

[Author]

Posts