Docs

[blueprint]

Hi support team,

I know there are a few threads on this subject, but I couldn’t figure it out and need your help.

What I’d like to achieve is placing the post title below featured image and fit it’s alignment into my text colums of the blog (see screenshot).

Can you please tell me how to do that?

*
Currently the blog post titles are removed with this code:

 .single .entry-title {
    display: none;
}

[blueprint]

Here is the screenshot…

[blueprint]

This reply has been marked as private.

[Jade]

Hi there,

I have just checked your page but it seems to be set correctly now according to what you are aiming to do. Were you able to sort it on your own?

[blueprint]

No, I’m afraid not. This is a regular custom headline in a text Element. But this is how I want it to look like. Normally it would be ok, but the problem is that on my post grid and and index page, the title is shown twice – once as the blog title from the source and than the second time as the Excerpt (because this is how the post text begins). Thats why I thought it would be better to use the preset post titel.

It would be great, if there was a solution!
Thak you!!

[Nabeel A]

Hi again,

It seems like you’ve also disabled the featured image. You can remove the following code

.single .entry-featured {
    display: none;
}
 .single .entry-title {
    display: none;
}

To display title after the featured image, you can add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

(function($) {
   $('.single-post .entry-header').insertAfter('.single-post .entry-featured');
})(jQuery);

Hope this helps!

[blueprint]

Thank you, now the title shows up under the custom headline!

#1 To fit the alignment to the post’s textblock I tried this:

.entry-title {
text-align: left;
}

.single-post .entry-header{
  padding-top: 2em;
  margin-left: 7%;
}

The problem is, that on different screen sizes the left margin changes accordingly. Can you give me a code that aligns the title with the post text on all screen sizes?

#2 I tried removing the space between featured image and nav bar with this code, but it had no effect:

.single-post .x-flexslider {
   display: none;
}

Can you tell why?

Thanx again!!

[Lely]

Hi There,

#1. Please also add this:

.single-post .entry-header .entry-title {
    width: 100% !important;
    padding: 0 10%;
}
@media (max-width: 767px){
.single-post .entry-header .entry-title {
    padding: 0;
}
}

#2

.single-post.x-post-meta-disabled .post .entry-featured {
    margin-top: 0;
}
.single .hentry .entry-wrap {
    padding-top: 0;
}

Hope this helps.

[blueprint]

Thanks a lot! So far the code works. There is just still an alignment change on smaller screen sizes (see scrennshot).

And I noticed that, although the title is responsive, it still overflows the column on the right side on small screensice 320-480px (see scrennshot). Can you tell me how to fix this?

Thank you!!!

[Lely]

Hi There,

Please update this part:

@media (max-width: 767px){
.single-post .entry-header .entry-title {
    padding: 0;
}
}

To this:

@media (max-width: 767px){
.single-post .entry-header .entry-title {
    padding: 0;
    width: 88% !important;
}
}

Hope this helps.

[blueprint]

Thank you, but no – it did not help. It makes the title go even further to the left…

Is there another way?

[blueprint]

And can you please tell me how to achieve the same for custom post type?

Thank you!!

[Rue Nel]

Hello There,

Do you want some thing like this?
http://prntscr.com/cjafp1
http://prntscr.com/cjaftu

You need to update the given css and make use of this code instead:

.single-post .entry-header {
    padding-top: 2em;
    margin: 0 auto;
    padding-left: 10%;
    padding-right: 10%;
}

.single-post .entry-header .entry-title {
    width: 88% !important;
    padding: 0;
    max-width: 1200px;
}

@media(max-width: 979px){
  .single-post .entry-header {
    padding-left: 0;
    padding-right: 0;
  }
}

This could would also apply to custom post types.

Please let us know if this works out for you.

[blueprint]

Excellent! Thank you so much!
I adjusted the code in order to fix the alignment for all screen sizes, and added a font-size so that the heading would still be bigger than text on small sizes. Is that correct, or is there a more elegant way?

@media(max-width: <strong>770px</strong>){
  .single-post .entry-header {
    padding-left: 0;
    padding-right: 0;
    <strong>font-size: 130%</strong>;
  }
}

😀

[blueprint]

Ups – my text decoration messed up the code. Here it is again:

@media(max-width: 770px){
  .single-post .entry-header {
    padding-left: 0;
    padding-right: 0;
    font-size: 130%;
  }
}

[Author]

Posts