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 have added a Lax section on the footer of this site: http://www.ics-law.org.php72-38.lan3-1.websitetestlink.com/ but the background image is not displaying. When I first add the image it appears in the background, but then after saving and reloading it is gone even though the thumbnail indicates it's still there. Screenshot attached.
      Any suggestions?

    • 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
×