Grow your CSS skills. Land your dream job.

WordPress Images

  • # July 3, 2012 at 8:54 pm

    I’m starting to style my portfolio site but I’m having an issue when it comes to displaying the images. In my CSS, I’ve declared the list item to have a width of 230px but somehow WordPress is not complying and is setting its own width (see image attached). It’s also setting a margin on it’s own and I can’t seem to remove it, but I can add to it. Really odd.

    # July 3, 2012 at 8:59 pm

    It looks like they’re both 230px, unless you’re talking about it becoming 232px?
    It’s becoming 232px because of your 1px border on each side. You have two simple options:
    1. Make the width/height 228px
    2. Give the li box-sizing: border-box and it will calculate width/height including borders and padding/margins.

    # July 3, 2012 at 9:02 pm

    @ChrisxClash Then why are some of the other thumbnails 230px by 230px?

    # July 3, 2012 at 9:08 pm

    Oh my, I’m embarrassed. I was quickly hovering, not seeing that it was the image itself that were different widths. My fault.

    However, I still can’t seem to remove the margin that WordPress is setting.

    # July 4, 2012 at 12:28 am

    You know how it works, bud! If you’ve got a link you’ll get it solved super quick!

    # July 4, 2012 at 12:58 am

    @TheDoc I’m totally new here.

    So I narrowed the issue down to ‘inline-block‘ but have no idea how to remove the whitespace since I won’t be able to alter the HTML.

    Fiddle

    # July 4, 2012 at 1:01 am

    Solved by adding font-size: 0; to the ul tag.

    @joshuanhibbert You should put this solution on your blog as I went there to find an alternate solution but couldn’t find one that suits not being able to alter the markup.

    # July 4, 2012 at 3:23 am

    The margin is actually being caused by white space in the markup, an unfortunate side effect.

    Using the font-size trick is a little hackish, I suppose, but it could work in this case.

    The only problem you might encounter is if you do eventually want text in there, perhaps for captions.

    # July 4, 2012 at 2:24 pm

    @TheDoc Yeah, that’s what I read on Josh’s blog and one of the articles here. I really hate the way WordPress displays your markup in view source. The code is extremely misaligned and adds ridiculous amounts of spacing so using font-size: 0; was a perfect solution. Thanks Gray.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".