Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 29, 2022 at 10:29 am #1349935
    fkm

    Hi Enfold team,

    using the following css code I was able to enlarge the images of the ajax portfolio preview to full width:

    #top .av_table_col.first.portfolio-preview-image,
    #top .portfolio-preview-content {
    width: 100% !important;
    display: block !important;
    }
    }

    Also, I’ve made some other changes learned from the Enfold forums, like removing the lightbox, borders, the navigation etc.
    Unfortunately, I couldn’t remove the area surrounding the closing “X”. So please let me know how to do.

    In addition, please let me know how to close he gap between the images (imgae list) and how to enlarge them to full width on mobile devices (smartphones).

    Please see screenshots.

    Thank you very much in advance.

    Best regards, fkm

    April 30, 2022 at 11:42 pm #1350087
    Mike

    Hey fkm,
    Thanks for the link to your site and the screenshot, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    #main .ajax_controlls {
	display: none;
}
#top #main .portolio-preview-list-image,
#top #main .portolio-preview-list-image img {
    border: none;
    margin: -1px;
}

@media only screen and (max-width: 767px) { 
	.responsive #top #wrap_all #main .portfolio_preview_container.open_container {
		width: 101vw !important; 
        position: relative !important; 
        left: calc(-50vw + 50%) !important; 
	}
}

    Best regards,
    Mike

    May 3, 2022 at 12:48 pm #1350311
    fkm

    Hi Mike,

    every single one works just fine – thank you very much!

    With enlarging the images of the ajax portfolio preview at mobile devices to full width, the text below did the same of course.
    So I tried adding the following code to get margins on the sides and it seems to work:

    @media only screen and (max-width: 767px) {
    #top .portfolio_preview_container .portfolio-preview-content {
    padding: 0px 16px 0px 16px!important;
    }
    }

    If that is ok then this topic is succesfully done and can be closed.

    Thank you very much again.

    Best regards, fkm

    May 3, 2022 at 5:32 pm #1350366
    Mike

    Hi,
    Glad to hear, your css looks good, I’m glad you sorted this out.
    If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Remove closing area and enlarge images on mobile at ajax portfolio preview’ is closed to new replies.