WordPress.org

Forums

Trouble with padding and height with percents (CSS) (6 posts)

  1. brianfbenton
    Member
    Posted 1 year ago #

    On my home page and in the related content images, I am having a hard time with using percents for padding and width/height. I can't figure out the correct dimensions so the white box has a 5% border on all sides, regardless of if the box is a square or rectangle. Here is the code I have right now.

    div.portfolio-media-wrapper.gdl-image .thumbnail-hover{ display: block; opacity: 0; filter: alpha(opacity=0);
    	position: absolute; padding-left: 5%; padding-right: 5%; padding-top: 5%; padding-bottom: 5%; width: 90%; height: 90%; }

    Thanks!!!

  2. batharoy
    Member
    Posted 1 year ago #

    This is as close as your gonna get, because the rectangles have greater width the border will appear a little larger on the left & right sides.

    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
  3. brianfbenton
    Member
    Posted 1 year ago #

    Ah, maybe I wasn't clear. If you look at the two pages I liked two, you'll see that while on the home page the border is the same on every side, on the related content section it is more space at the bottom. Any ideas?

  4. batharoy
    Member
    Posted 1 year ago #

    Margin/Padding set to a singe % number is the same on all 4 sides; order is top-right-bottom-left.
    All measurements are in height for this example.
    Height in question set to 80%

    Homepage Images:
    234*0.8 = 210.6 only going to cover 210.6 of 234px
    234px * 0.05 = 11.7 will start 11.7px from the top and cover 210.6px
    11.7px top + 11.7pxbottom +210.6px coverage = 234 0px left over

    Related Images:
    300*0.8 = 240 only going to cover 240 of 300px
    300px * 0.05 = 15px will start 15px from top and cover 240px
    15px top + 15px bottom + 240px coverage = 270px leaves 30px left over
    since it starts at the top those 30px extra will be taken from bottom

  5. brianfbenton
    Member
    Posted 1 year ago #

    Hmm, I see. So is there any way to adjust the code to cover the amount I want? I messed around with 15px padding as opposed to 5% but couldn't get that to work. Any ideas?

  6. batharoy
    Member
    Posted 1 year ago #

    So is there any way to adjust the code to cover the amount I want?

    Not that I'm aware of, because your dealing with 2 different sized elements with the same class/ID.

    About the closest you can get with css is what i posted above, to the best of my knowledge.

    Theoretically you should be able to edit the proper PHP files to give them 2 different classes/IDs. I'm not a PHP guy, don't even know which files to look in.

Topic Closed

This topic has been closed to new replies.

About this Topic