Docs

[tparkmedia]

http://sonmat.kitchen

Hello!

I found in the forum some coding to make my blog post title align to the left and to make it responsive BUT it’s not completely responsive for me.

As you will see in the screenshots for media 979 it’s past the end of the image to the left,
and for media size 450 the first line is not aligned all the way to the left.

In media size 979 it does this

And in media size 450 it does this

This is the code I am using:

/*change post title style, alignment and make it responsive */
.single .entry-title {
    font-size: 24px;
  	font-weight: 500;
  	text-transform: capitalize;
  	text-align: left;
}

.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;
}

Thank you!

[Christopher]

Hi there,

Please update your code to :

/*change post title style, alignment and make it responsive */
.single .entry-title {
    font-size: 24px;
  	font-weight: 500;
  	text-transform: capitalize;
  	text-align: left;
}
@media (min-width:767px){

.single-post .entry-header {
    padding-top: 2em;
    margin: 0 auto;
width: 73%;

}

}

@media (max-width:767px){

.single-post .entry-header {

width: 88%;
}
}

Hope it helps.

[tparkmedia]

Nope, that didn’t fix it. It also made the title not completely aligned with the image on the left so I changed it back to my code.

Also, I forgot to say that I had this bit to make it responsive.

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

So my code is my first post plus this one.

More help please!

THANKS!!!

[Jade]

Hi there,

Would you mind providing your admin details so that we can check the entire code that is in the customizer and test it?

Thank you.

[tparkmedia]

This reply has been marked as private.

[Lely]

Hi There,

When I checked your site, I didn’t see any custom CSS from your Customizer, or even the child theme style.css file.
I made some this, please try the following CSS:

/*change post title style, alignment and make it responsive */
.single .entry-title {
    font-size: 24px;
  	font-weight: 500;
  	text-transform: capitalize;
  	text-align: left;
}

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

@media(max-width: 979px){
  .single-post .entry-header {
    padding-left: 0;
    padding-right: 0;
  }
.single-post .entry-content { /*Since the header padding was remove let's also remove content padding*/
    padding: 0 !important;
}
}

We have to remove both padding of header and content container so it will adjust accordingly on the same manner.

Hope this helps.

[tparkmedia]

Sorry I forgot to mention I have a plugin for CSS. It’s under Appearance -> Custom CSS.

OK the first issue of the title being weird at 979 is resolved!

BUT the second issue is of the title stacking and not lining up at 450, is NOT resolved: this

Any other suggestions please?

Thanks again!!

[tparkmedia]

Want to clarify re the second issue: I don’t mind the stacking, just want to fix the alignment issue.

Thanks!

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

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

Hope it helps, Cheers!

[tparkmedia]

Perfect!!

Thanks guys!!! 🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts