Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #401321

    Hi guys
    couple of problems that I would appreciate some assistance with:

    1. Header post images are not showing (link in private section below)
    2. and are not centered
    Code
    [av_image src='2223' attachment_size='full' align='center' animation='left-to-right' link='' target='' styling='no-styling' caption='' font_size='' appearance=''][/av_image]
    (link below)
    3. Is it possible to force a hard crop ratio within the code – irrespective of the uploaded image ratio?

    Also
    5. PORTFOLIO masonry gallery – when viewed on an ipad – has overlay permanently visible/ activated

    6. And could you please provide the a quick code to reduce the Top/ Bottom padding of the overlay

    Many thanks in advance
    Best Chris

    #401340
    This reply has been marked as private.
    #401858

    Hi!

    If possible, could you please provide us with a temporary admin login so that we can take a closer look?

    Regards,
    Rikard

    #401866
    This reply has been marked as private.
    #402825

    Hi!

    1.+2.) Use this code in Quick CSS field:

    .avia_transform .avia_animated_image {
    opacity: 1;
    left: 250px;
    }
    

    3.) Please refer to this thread: https://kriesi.at/support/topic/height-cropped-version-of-the-featured-image/#post-92719

    5.) Could you please post a screenshot of the issue? It seems fine for me and I can’t see any problems.

    6.) Which top/bottom padding do you mean? you can use imgur.com to provide us screenshots.

    Best regards,
    Andy

    #403094

    Hi Andy
    thanks
    1. image now appearing but is not responsive (ie not resizing to full image upon smaller window size)
    screenshot link

    2. IPAD screenshot – illustrating all images with overaly permanently activated (and not on hover)

    3. THe reduction of padding referred to is the padding of the Overlay as also seen in the IPAD screenshot

    THanks
    Chris

    #404110

    Hey!

    1.) Add this for smaller screens:

    @media screen and (max-width: 1024px) {
    .avia_transform .avia_animated_image {
    left: 0px;
    }}
    

    2.) Go edit your masonry gallery, scroll down to “Image overlay” and choose “overlay activated”.

    3.) So you want to remove the white line between your portfolio images? if yes use this:

    @media screen and (max-width: 1024px) { 
    .avia_desktop.avia_transform3d .av-masonry-image-container {
    margin: -1px;
    }}
    

    Otherwise please provide us a mockup of what you want to achieve (instead of a screenshot which shows what is already viewable on your website).

    Cheers!
    Andy

    #404905

    Hi Andy and thanks for your response.

    Points 2& 3 above addressed below:
    2. Masonry Gallery Overlay is/ was activated ‘On Hover’
    – Works for chrome browser
    – Does NOT work for IPAD
    &
    3. Am referring to how to REDUCE the OVERLAY TOP and BOTTOM padding (not the space between images)
    Please see screen shot for visual reference

    ************
    4. The previous code to center images appears to have a right weight. ie is not proportional
    – on full 1020×1920 chrome
    – but is centered on IPAD 728×1080 viewing?
    Screen shot below

    5. Could you please provide the HTML code for a left and right paragraph padding (not just the first line)
    – Code required as a post is being generated in a custom post form (and not the post builder)
    – have tried 1/5 – 3/5 – 1/5 colum layout – but does not give the control.
    Screen shot

    thanks
    Chris

    #405530

    Hi!

    2.) I don’t have an iPad, but as far as I know there is no hover function for iPad, because you don’t have any mouse. So for iPad captions are visible by default. If you want to remove them you can use this code:

    @media only screen and (max-device-width : 959px) {
    .av-inner-masonry-content { display: none !important; }
    }
    

    3.) Use this code to control it:

    .av-masonry-entry .av-masonry-entry-title {
    margin-top: -17px;
    }
    .avia_desktop .av-caption-on-hover .av-masonry-item-with-image .av-inner-masonry-content {
    height: 14%;
    }
    

    4.) Remove this code:

    .avia_transform .avia_animated_image {
    left: 250px;
    }
    and try instead this one: 
    .avia_transform .avia_animated_image {
    margin: auto;
    }
    

    5.) You can try this code:

    p {
    margin-left: 85px;
    margin-right: 85px;
    }
    

    but it will affect all your texts and even other elements. You would need to put the text into an extra element (layout element for example), so we can call it with some specific CSS.

    Best regards,
    Andy

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