Tagged: , , , , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 29, 2018 at 10:34 pm #1003286
    kgalatz

    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?

    August 30, 2018 at 1:35 pm #1003568
    Victoria

    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

    August 30, 2018 at 6:46 pm #1003741
    kgalatz

    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 6 years, 2 months ago by kgalatz.
    September 2, 2018 at 8:12 am #1004585
    Vinay

    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

    September 5, 2018 at 1:50 am #1005829
    kgalatz

    Thanks, that fixed the overlay issue.

    September 5, 2018 at 5:55 am #1005884
    Rikard

    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

    September 13, 2018 at 10:06 pm #1009669
    kgalatz

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

    September 13, 2018 at 10:50 pm #1009694
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

    September 13, 2018 at 11:57 pm #1009725
    kgalatz

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

    September 15, 2018 at 6:42 am #1009977
    Rikard

    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

    September 17, 2018 at 5:12 pm #1010844
    kgalatz
    This reply has been marked as private.
    September 18, 2018 at 9:23 am #1011157
    Ismael

    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

    September 21, 2018 at 9:24 pm #1012906
    kgalatz

    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.

    September 25, 2018 at 5:58 am #1013991
    Ismael

    Hi,

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

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.