Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 30, 2018 at 3:55 pm #1028093
    c3idesign

    Hi, I want to remove the overlay effect on images, so the image always displays without overlay. I also need to change the css so that when an image is linked, the caption will display.

    On the page below, the first image at bottom is how I want to display the caption. The first image does NOT have a link.

    On the second image, I’ve added a link, but then the caption does not display.

    The other item is the border shown under the row of images (there are actually 2 borders). How can I remove them?

    Thanks.

    November 2, 2018 at 6:55 am #1029041
    Mike

    Hey c3idesign,
    To remove the two border lines, please try this code in the General Styling > Quick CSS field:

    #top.page-id-3604 .container_wrap {
    border-top-style: none !important; 
    border-top-width: 0px !important; 
}
#top.page-id-3604 .hr-default span.hr-inner  {
border-top-style: none !important; 
    border-top-width: 0px !important; 
}

    This has been written to work only on the one page, please let us know if you have other pages you would like it to work on.

    To remove the overlay, Please try this code in the General Styling > Quick CSS field:

    .av-caption-image-overlay-bg {
    opacity: 0 !important; 
}

    I assume this is for the whole site, please let us if you want to restrict which pages it will work on.

    Best regards,
    Mike

    November 5, 2018 at 11:15 pm #1030097
    c3idesign

    Thank you. The border styling and the overlay removal css were what I needed.

    My other question was this: on the page listed below in private content, I’ve created a row with small images. (Only the first 2 are set up now.)

    The first image does NOT have a link, and the caption for this image, “Living” is displayed.
    The second image DOES have a link, and now it’s caption (“Dining”) is hidden, or not being displayed. I’ve tried to find the css, but haven’t had any luck. Any code will be for THIS page only.

    Thank you.

    November 6, 2018 at 5:30 am #1030192
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field:

    #top.page-id-3604 .avia-image-overlay-wrap a.avia_image {
    overflow: visible !important; 
}

    Best regards,
    Mike

    November 7, 2018 at 4:28 pm #1030897
    c3idesign

    Thanks – that worked! What if I want on multiple pages? Will I need to add CSS for each page id?

    November 7, 2018 at 5:32 pm #1030917
    c3idesign

    I am going to add this question – since I believe it’s the image overlay also.

    On this page – http://c3idesign.com/wp1/portfolio/ – how can I adjust the text size on mobile. I’ve added custom CSS, so that may be affecting it.

    Thank you.

    November 7, 2018 at 7:10 pm #1030946
    Jordan Shannon

    Hi,

    Do you mean the title text? “Cooking”

    Best regards,
    Jordan Shannon

    November 8, 2018 at 4:45 pm #1031313
    c3idesign

    Not the “Cooking” next to the large image, but the labels below – there are 6 – cooking, bathing, etc. I want these to resize on mobile and tablets.

    • This reply was modified 6 years, 1 month ago by c3idesign.
    November 8, 2018 at 11:13 pm #1031440
    Mike

    Hi,
    I took a look at the 6 items, but they are set to display:none for screens under 767px
    If this is just temporary, then try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
#av_section_2 .av-image-caption-overlay-center p {
font-size: 12px !important;
}
#av_section_2 .av-image-caption-overlay-center {
padding: 50px 10px 0px 5px !important;
}
}

    Please see the screenshot in Private Content area.

    I recommend adding a custom ID to the section to replace the #av_section_2, which has been automatically generated and could change in the future as you add more elements to the page. To add custom IDs & classes go to Enfold Theme Options > Layout Builder > Show element options for developers and enable the option, then in your element create a unique ID such as “smallportthumbnails”

    Best regards,
    Mike

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