Jump to content
Sign in to follow this  
lbhansen

Unwanted Padding/Margin with Image Section

Recommended Posts

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.

Share this post


Link to post
Share on other sites
Andrew

Hey! 

With a problem like this its usually easiest to help if we have an annotated screenshot(s) and live link.  Its hard to tell what you're going for from a text description only ... 

but in this case, my guess is you're struggling with the fact that img tags are inline by default and can cause spacing issues based on line-height as such... i'll bet your problem is solved with this: 

#image_usmwmp6 img{ display: block; }

Share this post


Link to post
Share on other sites
Aires

I just tried what @Andrew suggested and it does fix your issue.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
lbhansen
On ‎2‎/‎10‎/‎2017 at 7:43 AM, Andrew said:

Hey! 

With a problem like this its usually easiest to help if we have an annotated screenshot(s) and live link.  Its hard to tell what you're going for from a text description only ... 

but in this case, my guess is you're struggling with the fact that img tags are inline by default and can cause spacing issues based on line-height as such... i'll bet your problem is solved with this: 

#image_usmwmp6 img{ display: block; }

@Andrew,

I tried including a screen shot originally, but for some reason it didn't work. Hopefully it's attached this time, although it isn't annotated.

I did include a link to the live website in the original message. Is that not the kind of live link you're looking for?

I have no idea what to do with #image_usmwmp6 img{ display: block; }. I placed it in the Alt Text field which didn't work. I placed it in the Additional Section Classes field which didn't work.

If I do put it in the right place, should I still keep padding at 0 or reset to its defaults.

Please remember, I'm someone who bought into DMS, and now PL5 (after the legacy PageLines), on the promise of building sites "without code". So I need detailed guidance if code needs to be inserted somewhere to make things work.

As I write this, the attached screenshot shows the header with default settings. The live link, http://756.a44.myftpupload.com/, shows the problem with padding set to 0 all around. There should be no space whatsoever between the header image and the menu. If I were to change the bottom margin to -1 it overlaps but develops a gap with narrow browser windows, e.g. mobile.

Is there something else I should have provided to demonstrate the problem?

Laurence

 

FC Header-a.png

Share this post


Link to post
Share on other sites
Aires

Hi @lbhansen,

I am sure this will be updated but in the mean time install the less/css extension and add the css Andrew has provided and this will solve your issue.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
lbhansen
On ‎2‎/‎11‎/‎2017 at 9:21 PM, Aires said:

Hi @lbhansen,

I am sure this will be updated but in the mean time install the less/css extension and add the css Andrew has provided and this will solve your issue.

Thanks, @Aires and @Andrew.

I still had some fumbling around to get things looking as good as they do now. For some reason, when I exported my original image from Illustrator, the .png picked up one pixel vertical, which appears to have rendered as white. I changed the vertical size from 151 to 150 (don't ask why I had 151 - it was some legacy choice from an old site) and it now looks okay. To my eye there is still a hint of white between header and menu but I'm done with it for now.

Again, thank you.

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

Sign in to follow this  

  • Similar Content

    • 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
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • janpeeters
      By janpeeters
      I've searched the forum but couldn't find any other reports.
      When I enlarge the margin-top in the editor of a text box also margin-left gets enlarged. I would think that's an unwanted behaviour. You can see this here:
      https://goo.gl/OzMA7Z
      Jan
×