Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #724980

    Hi guy’s – I’m back again :-)

    I’ve been looking for some custom css for the accordion slider and almost found what I was looking for within ticket #535133. I am using LifeIsNow001 tweaked code looks great on a desktop view but the excerpt is all squished up to the left on mobile devices. Is there any way to extend the excerpt to about 50% of the displayed image size?

    Also can you let me know how I can change the text colour from white to something else?

    Thanks for the help,
    Marc

    #725017

    Hey MarcG5!

    You will have to change the color:#fff value of the CSS to something else.
    Regarding the excerpt, in which page is it?

    Thanks a lot

    Best regards,
    Basilis

    #725030

    Hi Basilis,

    Thanks for your reply. I can’t see any reference to the colour being #fff in that section of the css. Do I need to include an additional line of code for this? I did include the page link in the private section but here it is again http://www.marcgodfreeweddings.co.uk it’s at the bottom of the home page.

    Thanks for your help,
    Marc

    #726472

    Hi,

    What is the css codes that you used? I’m sorry but we can’t use the “ticket number” to visit the thread. We need the actual url. You can insert those css codes inside a css media query so that it won’t affect the mobile view.

    @media only screen and (min-width: 989px) {
      /* Add your Desktop Styles here */
    
    }
    

    Best regards,
    Ismael

    #726572

    Hi Ismael,

    Here is the code that I am currently using:

    #top .aviaccordion-title-on-hover .aviaccordion-preview {
    opacity: 1;
    filter: alpha(opacity=100);
    text-align: center;
    }
    
    h3.aviaccordion-title {
    position: absolute;
    left: 0;
    background: rgba(0,0,0,.3);
    padding: 10px;
    top: 10;
    margin: 0;
    text-align: left;
    }
    
    #top .aviaccordion-preview-title {
    display: block;
    padding: 0;
    }
    
    li.aviaccordion-slide:hover .aviaccordion-excerpt {
    opacity: 1;
    }
    
    .aviaccordion-excerpt {
    opacity: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    padding: 10%;
    }
    
    #top .aviaccordion-slide:hover .aviaccordion-excerpt {
    background: rgba(0,0,0,.6);
    padding: 20px;
    display: block;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    }
    
    #top .aviaccordion-preview-title-wrap {
    display: block;
    }
    
    #top .aviaccordion-preview-title-wrap {
    background: transparent !important;
    }

    Thanks
    Marc

    #727745

    Hi,

    Can you post to the link to the previous thread where you get the code so we can review it.

    Best regards,
    Nikko

    #727918
    #728319

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
    .aviaccordion-preview {
        width: 60%!important;
    }}
    .aviaccordion-excerpt {
        color: orange;
    }
    

    Enjoy your holidays!

    Best regards,
    Yigit

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