Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 25, 2024 at 12:41 pm #1440816
    fkm

    Hi Enfold team,

    I really like the new before/after image element and just integrated it on one of my portfolio pages.
    The actual congruent before after images will follow, I’m temporarily using sample pictures of the same size.

    However, I would like to make a few further adjustments to it:

    1. I would like to increase the size of the before/after image element to the same size of the sliders that I use on the other portfolio pages.
    The before/after image is intended to replace the slider on this portfolio page.
    Please see the screenshots and another portfolio page with a slider as example below.

    2. Even though I set the radius to zero in the before/after image settings, the corners are still slightly rounded. Please let me know how to remove the rounding.

    Thank you very much in advance.

    Best regrads,
    fkm

    April 26, 2024 at 12:19 pm #1440948
    Mike

    Hey fkm,
    Thanks for the screenshots and link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .avia-image-diff-container {
    margin: 0;
    width: 100vw !important; 
  position: relative !important; 
  left: calc(-50vw + 50%) !important; 
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 29, 2024 at 10:46 am #1441280
    fkm

    Hey Mike,

    thank you very much for the CSS – it works great!

    Please let me know how to enlarge it proportionally so that when viewed on large screens, it extends by 16 px on each side without getting changed on the mobile view.
    I would like the size of the before/after image to behave like the size of the sliders on the other portfolio pages.
    Please see the screenshot and another portfolio page with a slider as example below.

    Also, please let me know how to remove the slight rounding on the corners.

    Thanks a lot in advance.

    Best regards,
    fkm

    April 30, 2024 at 12:23 pm #1441438
    Mike

    Hi,
    You can try this css, but you will need to set the width, as a percentage will not work, so you may need adjust this for different screen sizes with media queries

    #top .avia-image-diff-container .avia_image {
	border-radius: 0;
}
#top .av-image-diff-wrapper {
    margin: 0;
    width: calc(1208px + 16px) !important;
}
#top .avia-image-diff-container .avia_image {
	max-width: calc(1208px + 16px) !important;
	width: calc(1208px + 16px) !important;
}

    and example of this with a media query for desktop would be like this:

    @media only screen and (min-width: 1440px) { 
#top .avia-image-diff-container .avia_image {
	border-radius: 0;
}
#top .av-image-diff-wrapper {
    margin: 0;
    width: calc(1208px + 16px) !important;
}
#top .avia-image-diff-container .avia_image {
	max-width: calc(1208px + 16px) !important;
	width: calc(1208px + 16px) !important;
}}

    Best regards,
    Mike

    May 8, 2024 at 12:10 pm #1442675
    fkm

    Hi Mike,

    please excuse my late reply.

    I’ve been trying around with the CSS you gave me and it works as you say, considering the different screen sizes.
    However, while I was trying around I also found out that I actually like it better graphically when the element is not expanded.
    So I adjusted the size of the sliders on the other portfolio pages instead.

    Now I´m absolutely happy with the CSS from your first message and the CSS for removing the corner radius from your second one.

    Please feel free to close this topic as as completed successfully.

    Thank you very much.

    Best regards,
    fkm

    May 8, 2024 at 2:37 pm #1442689
    Rikard

    Hi,

    Great, I’m glad that Mike could help you out. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘adjustments to the before/after image’ is closed to new replies.