Jump to content


Photo
- - - - -

Big gap between post header and post content since PageLines update


Best Answer Danny , 25 February 2013 - 07:18 AM

Hi,

 

This is happening as you're attaching an image to your post and this image is the first content added, so it has no margin top. However, when you add your text beneath it, it is given a margin-top and this is pushing your image and content down.

 

To resolve this, you can use one of the PageLines utility classes. What you need to do is do the go to your post, and you should have a format similar to this:

 

<img src="This is the image in your post">

 

Remember Breach & Clear, the squad tactical game being produced by Call of Duty’s...

 

Instead, add the following:

 

<img src="This is the image in your post">

 

<p class="zmt">Remember Breach & Clear, the squad tactical game being produced by Call of Duty’s...</p>

 

Wrap your first paragraph of text with a p tag and give this p tag a class with zmt like above. ZMT is an abbreviation of Zero Martin Top, you can find more information here.

 

http://support.pagel...cool-utilities/

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 pockettactics

pockettactics

    Member

  • Members
  • 20 posts
  • LocationLondon & New York
  • Country: Country Flag

Posted 24 February 2013 - 05:26 PM

Hi folks-

 

I updated to PageLines 2.4 this weekend and I've noticed that since the update I'm getting a big gap between my post headers and the post content. It's pretty ugly. Can I change a setting in the framework options or add something to the custom CSS to tweak this?

 

My site

Please Login or Register to see this Hidden Content

but I've also embedded an image below so you can see what I'm talking about.

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  69.3KB   2 downloads Mobile Strategy Game Reviews for Android, iPad, and iPhone.jpg]

 

Thanks!



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 February 2013 - 07:18 AM   Best Answer

Hi,

 

This is happening as you're attaching an image to your post and this image is the first content added, so it has no margin top. However, when you add your text beneath it, it is given a margin-top and this is pushing your image and content down.

 

To resolve this, you can use one of the PageLines utility classes. What you need to do is do the go to your post, and you should have a format similar to this:

 

<img src="This is the image in your post">

 

Remember Breach & Clear, the squad tactical game being produced by Call of Duty’s...

 

Instead, add the following:

 

<img src="This is the image in your post">

 

<p class="zmt">Remember Breach & Clear, the squad tactical game being produced by Call of Duty’s...</p>

 

Wrap your first paragraph of text with a p tag and give this p tag a class with zmt like above. ZMT is an abbreviation of Zero Martin Top, you can find more information here.

 

Please Login or Register to see this Hidden Content


  • pockettactics likes this

#3 pockettactics

pockettactics

    Member

  • Members
  • 20 posts
  • LocationLondon & New York
  • Country: Country Flag

Posted 25 February 2013 - 08:33 AM

Hey Danny, that worked - thanks kindly! Is there no universal solution that I can just apply once to the CSS somewhere?



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 February 2013 - 08:59 AM

There already is a solution however, as you're adding an image first, the CSS for zero margin is applied to that and not your text. If you were to switch them around so you had text first and then the image, the zero magin top would be applied automatically.



#5 pockettactics

pockettactics

    Member

  • Members
  • 20 posts
  • LocationLondon & New York
  • Country: Country Flag

Posted 25 February 2013 - 12:00 PM

There already is a solution however, as you're adding an image first, the CSS for zero margin is applied to that and not your text. If you were to switch them around so you had text first and then the image, the zero magin top would be applied automatically.

 

Is there a way to add text first and still have the image show up where it does in my posts?



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 February 2013 - 12:19 PM

You could use the PageLines grid to basically create a two column layout for your first paragraph and image. See here for information on how to use the PageLines Grid.

 

Please Login or Register to see this Hidden Content


  • pockettactics likes this

#7 pockettactics

pockettactics

    Member

  • Members
  • 20 posts
  • LocationLondon & New York
  • Country: Country Flag

Posted 25 February 2013 - 12:44 PM

Thanks Danny, I appreciate it.

 

Now I'm noticing that the number of comments is suddenly missing from the post metabar - should I start a new thread for that?



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 February 2013 - 12:46 PM

Yes please create a new topic.