Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #738475

    Something small that I noticed is when you change the color of the overlay that appears on images, it doesn’t tend to line up with the size of the image. It looks like it runs about 1 pixel short at the bottom of the images and 5 pixels too far on either side of them. Not a huge deal, but I wasn’t able to find anything addressing it in the support forum, so I thought I would post something about it.

    #738753

    Hey NicomIT,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #738956

    Sure, you can see what I’m referring to if you mouse over the aerial photo under the breadcrumb nav on the page below.

    #739239

    Hi,

    Thanks for that, though I can’t see anything like that on my end using Chrome. In what browser are you seeing it?

    Best regards,
    Rikard

    #739382

    Hi Rikard,
    It’s harder to see with a white overlay, so I made it blue. For some reason the gap at the bottom isn’t showing now. But you can see where it bleeds out a little too far on the sides.

    #740989

    Hi!

    The calculation is a bit off by .1% but I’m not sure why. This css modification should fix it temporarily.

    .avia_transform a .image-overlay {
        width: 99.9% !important;
        left: .1% !important;
    }

    Cheers!
    Ismael

    #740990

    Hi,

    Sorry for the late reply. Thanks for that, I can see what you mean now. Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-468 .overlay-type-image {
        left: 0 !important;
        width: 743px !important;
    }

    Best regards,
    Rikard

    #741250

    Thanks. I tried the code suggested by both of you, but neither seemed to fix it.

    #741257

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .image-overlay {
        width: 100%!important;
        left: 0!important;
    }
    

    Best regards,
    Yigit

    #741261

    Thanks. That worked when I added it to the Quick CSS section, but just not when I added it to the style.css file in my child theme.

    #741268

    Hey!

    Please post the content of your Style.css file here using – http://pastebin.com/

    Regards,
    Yigit

    #741273

    Sorry, it doesn’t seem to be working for me. I get this message…

    Possible Spam Detected
    Your paste has triggered our automatic SPAM detection filter. This happens when certain keywords are detected in a paste. It can also happen if you are creating a lot of pastes in a short period of time. To confirm you are not a bot, please solve the captcha below. PRO users don’t get asked to solve captchas.

    I did remove the CSS from the Quick CSS section and put it back in the style.css. So if you check the website now the overlay is not displaying correctly again.

    #741277

    Hi!

    Please create a temporary admin login and post it here privately

    Cheers!
    Yigit

    #741281

    Sure. Here you go.

    #741283

    Hi!

    I added the code to bottom of Style.css file of your child theme in Appearance > Editor and it does work fine on my end.
    Please flush browser cache and refresh your page a few times – http://wiki.scratch.mit.edu/wiki/Hard_Refresh

    Regards,
    Yigit

    #741286

    Thanks Yigit. I can see it working now.

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

The topic ‘Position of Image Color Overlay’ is closed to new replies.