• Resolved websiren

    (@desertsiren)


    Hello. I’m using a customized child of the Hueman theme and have run into a glitch I can’t solve. I’ve added borders to the images and (in FireFox, anyway), the right side of those borders is disappearing on any image that completely fills the area. (Except for the thumbnails on the home page. Those appear to all display correctly?)

    This is happening on both the home page and single post pages, but only with large or wide images. I suspect it’s an overflow or width issue somewhere, but have been unable to isolate it. (After trying many CSS changes.)

    Any suggestions?

    Here’s two pages with the issue:
    https://desertsiren.com/site/
    https://desertsiren.com/site/2014/12/merchants-estrella-war-2015/

    Thanks for the help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Do you have chrome? I dont use firefox, so something similar may be included with it. Or with firebug.
    But if you use chrome and select inspect element, you can often see that some of the css values on the side have a line through them. This means that the css value is being over ridden by another value. It could be something to do with that.
    Sorry am on my phone so can’t check your site right now. Will try later.

    Thread Starter websiren

    (@desertsiren)

    Thanks, but I’m not seeing anything like that with my code inspector. I’m not sure that this would actually be a css value being overridden. I suspect the layout is doing what it’s set up to do: not showing anything that extends past the section border. I’m thinking it has to be a width value and/or a “max-width: 100%” setting. I just can’t figure out which one.

    Hi websiren. I think you’re right: the theme is resizing the images to fit the container and it doesn’t leave room for the right side border. Couple of options:
    1. You could resize the images to the container size less a couple of px to allow for the border.
    2. You could go through each page and identify the individual image elements, then set the width with css.
    3. You could use a blanket style to catch all the images:

    img {
      width: 99% !important;
      }

    Hope that helps.

    Thread Starter websiren

    (@desertsiren)

    Thanks! I actually solved this late last night, mostly using method #2 (resizing the max width allowed for the various elements in CSS). Many of the individual elements already had the img width line you included, but they were set at 100% with the !important designation on some (and changing them to 99% didn’t work), so I changed them individually to pixel widths. (It was a little different in each area, so I just experimented til I found a setting for each that didn’t cut off the border.)

    Again, if this helps anyone in the future: I worked around the border cut-off issue by changing the CSS max width setting (inside a child theme) for each area where the image border was getting cut off. I’ve also started making new images, including “featured”, not quite as wide as they were.

    Thanks, again.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Added Image Borders Disappearing on Right Side’ is closed to new replies.