Jump to content
theinfinitywall

Adjust the margins under images in my blog posts

Recommended Posts

theinfinitywall    0
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    547
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    0
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    0
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    547
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    0
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    547
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    0
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    547
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

    • 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.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • Queue-it
      By Queue-it+
      Hi,
      I am using pl-section-journey and hiding most of the images. When running the page via google speed insights, it tells to optimize all the images that are in this plugins default. (e.g. https://queue-it.com/wp-content/plugins/pl-section-journey/images/drawer-5.jpg ) Like this one that is not visible on the website, but is a part of the plugin and comes up in google insights.
      I've deleted all the images in the plugin, but they still seem to come up. Ref. this page: queue-it.com/features
×