Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1003286

    The featured images on the blog index page (which is also the front page) suddenly changed from center-aligned to left-aligned recently. There is one featured image that is still centered (currently the third from the top on the Front page, image is a heart), which makes this even more baffling.

    Also the content/sidebar ratio changed (wider sidebar, smaller body). I know how to fix that, but am waiting until we figure out what is causing the change in image alignment in case they are related, since they seem to have happened around the same time.

    Any thoughts on what might have caused this and how to fix it?

    #1003568

    Hey kgalatz,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .single-big img {
      display: block;
      margin: 0 auto;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1003741

    Many thanks, Victoria – that did re-center the images. There is a little funkiness with the overlay, though. When I first hover on an image, the overlay doesn’t fully extend to the right edge of the image. The width of this uncovered strip seems to vary depending on the width of the image. The second time I hover, it corrects itself. Is there anything I can do to make it fully cover the image on the first hover?

    Also, in mobile view, there is a large blank white area (almost a full screen in length) between the header image of the glasses and the first post on blog index pages (starting with Home page), and on the Contact page..

    • This reply was modified 7 months, 4 weeks ago by  kgalatz.
    #1004585

    Hi,

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

    CSS Snippet:

    
    /* CSS - Overlay */
    
    .avia_transform a .image-overlay {
        top: 0!important;
    }
    
    
    

    To fix the gap in the mobile please use the slider image as a background image and set the background-size property to cover.

    Best regards,
    Vinay

    #1005829

    Thanks, that fixed the overlay issue.

    #1005884

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1009669

    The overlay issue is now recurring. The code you gave me is still in place, not sure what could have changed.

    #1009694

    Hi,

    Have you made any additional updates (perhaps in css), since the fix was given?

    Best regards,
    Jordan Shannon

    #1009725

    No, I don’t think so. It was less than two weeks ago.

    #1009977

    Hi,

    Thanks for the feedback, I can’t reproduce the problem on my end using Chrome though. Could you post a screenshot highlighting what you are seeing on your end and in what browser please?

    Best regards,
    Rikard

    #1010844
    This reply has been marked as private.
    #1011157

    Hi,

    Thanks for the update. Please try this css code.

    .avia-image-overlay-wrap a.avia_image{overflow: hidden; }
    .avia-image-overlay-wrap a.avia_image .image-overlay{-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
    

    Don’t forget to toggle the Enfold > Performance > File Compression options after adding the code.

    Best regards,
    Ismael

    #1012906

    I wasn’t sure whether you meant to add the new code to the previous code you provided

    (.avia_transform a .image-overlay {top: 0!important;})

    or to replace that code with this new code, so I tried it both ways. When I added the new code without deleting the previous code, I saw the same problem as before (as seen in the screenshot I previously posted to page linked below).

    If I deleted the previous code and used only the new code, the problem also remained as before in FireFox, plus it created a new incomplete overlay problem in Chrome (see second screenshot on page linked below). Previously, the problem occurred in FireFox only.

    I’m not sure what you meant by “Don’t forget to toggle the Enfold > Performance > File Compression options after adding the code.”, but if you were referring to CSS file merging and compression, it is already disabled.

    #1013991

    Hi,

    Thanks for the update. Can we have access to the site? We would like to test the modifications.

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.