Jump to content
theinfinitywall

Adjust the margins under images in my blog posts

Recommended Posts

theinfinitywall

Hello,

 

I would like to adjust the space underneath our images in blog posts. I have tried several different things, searched, and haven't found a solution yet.

 

What css code would work to reduce (adjust) the padding under blog post images.

 

Example:

 

http://thisisyou.net/lindsay-cory/

 

That huge white line underneath is what we would like to reduce down.

 

Thanks,

 

Mark

Share this post


Link to post
Share on other sites
Rob

Hi Mark,

 

Do you have Firebug for Firefox or know of Chrome's Inspection Tool?

 

These two tools allow you to point to an element and see all the relevant CSS and HTML that makes the element. The link below provides information on how to use these tools.

http://support.pagelines.me/docs/customization/custom-css/

 

Likely, the margin-bottom is set to a value larger than you want.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
theinfinitywall

It is larger than I want it to be. I do have chrome, and have used the inspection tool. I just cannot get any css to work for some reason to make the adjustment

Share this post


Link to post
Share on other sites
theinfinitywall

From what I am seeing, it looks like the image margins padding and border are at 0 already. So, I'm lost. Would it be from placing the images in the blog post, then it counting them as paragraphs?

Share this post


Link to post
Share on other sites
Rob

Images shouldn't be set as paragraphs as that will add a whole new level of padding and margins.

 

The post's edit box in has an image option to include images and does not use paragraph tags.  It allows you to set the alignment and if you then use the Text Mode, you can move text right up under the image code, keeping the alignment pretty tight.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
theinfinitywall

Rob,

 

Right.

 

I do get the concept, teach people how to fish,...do not give them fish,...or they will be back tomorrow. I see how it applies here.

 

However, I have been fishing, and something is broken or I'm missing something.

 

I do thank you for your time, however,....I feel as if you are missing my question, or are giving me answers and information that do not directly resolve why I am posting.

 

Am I missing something?

 

I see the margins at 0, and a huge space. Any css I try to use, still has no effect.

Share this post


Link to post
Share on other sites
Rob

Mark,

 

Let me make this very clear, with absolute respect. We are not supposed to provide CSS to our clients.  It is considered designing their sites and against our company's policy. We strongly recommend that people use Firebug or Chrome's Tools to identify and test CSS.

 

That said, I'd like you to test this:

p, .p, .hentry ul, .hentry ol {
    margin: 0 0;
}

In future though, please use those tools and if you need reference to a resource, we will be very happy to assist at any time.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
theinfinitywall

Rob,

 

I appreciate both your response, and your time.

 

I tested, and it completely removes the white space under the images in their entirety. When I insert values to adjust the white space accordingly, it reverts back to it's original margin padding :(

Share this post


Link to post
Share on other sites
Rob

It was intended to do just that.

 

Let me say that I strongly recommended applying the images without paragraph tags around it.

 

You may adjust the margins by using something like 0.2em for the 2nd 0 in the margin tag.

 

    margin: 0 0.2em;
 
Please reference http://www.w3schools.com/css/ for additional information on margins.
  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • mtaus
      By mtaus+
      I'm trying to add a Careers page to a site to display job openings. The plan is to create a Post using a subcategory 'Careers' and then display those on the page. All of the post sections in PL seem to include images and there's no obvious way to remove them or include an excerpt from the post. 
      Any suggestions?
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • BentleyD
      By BentleyD+
      Hey there,
       
      I am working on BentleyRolling.com. I used grams on MoonbodySoul.com and all the images are cropped to a square, whether they are square or 4:5 when posted on instagram, they still get cropped to a square. This looks way better than some being squares and some being 4:5. Did something change since I designed MoonBodySoul.com with Platform5? Can you help me crop all images to a square on BentleyRolling.com 
       
      All the best,
       
      Bentley
    • cstudio
      By cstudio
      How do I control the lightbox effect on the plugin "popthumbs"?  On mobile, it opens up much to small then when expanded it opens to large.  I would like to control the the lightbox to like 90% of the viewer window but I can't figure out how/where to control that.
      Site example

       
      Thx
    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
×