Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 24, 2018 at 12:50 am #945611
    mleite1

    Hello, I’m finalizing the project and organizing the elements in the devices is being very difficult.

    Now I’m trying to fix ACCORDION on the devices (see image – https://d.pr/KFM5du)

    I use the code below. But it does not change the background color on the devices and the properties of the text does not change. Just the size of the font.

    In the desktop code I can not change the font for Oswald.

    CODES
    /*ACCORDION DESKTOP*/
    @media only screen and (max-width: 768px) {
    .accordion {
    font-family: Oswald, ‘Roboto’, ‘HelveticaNeue’, Helvetica, Arial, sans-serif !important;
    font-size: 45px !important;
    }
    }
    /*ACCORDION DEVICES*/
    @media only screen and (max-width: 767px) {
    .accordion {
    font-family: Oswald, ‘Roboto’, ‘HelveticaNeue’, Helvetica, Arial, sans-serif !important;
    font-size: 25px !important;
    line-height: 1.5;
    background: rgb(255,0,0,0.1) !important;
    }
    }

    April 25, 2018 at 6:09 am #946403
    Vinay

    Hey mleite1,

    Please import the font by adding the below code to the top of the styles sheet:

    @import url('https://fonts.googleapis.com/css?family=Oswald');

    To change the font style:

    .av_toggle_section .toggler {
font-family: Oswald, ‘Roboto’, ‘HelveticaNeue’, Helvetica, Arial, sans-serif !important;
 font-size: 45px;
 line-height: 1.5em;
 color: #FFF;
 padding: 20px;
 background: rgb(255,0,0,0.1) !important;
 font-weight: bolder;
}

    Please check this links for more info on accordion.

    If you have more questions please post a link to the page where we can inspect the element in question.

    Best regards,
    Vinay

    April 25, 2018 at 1:53 pm #946573
    mleite1

    Vinay, thank you very much for the return.

    You forgot a detail. I need to have 2 types of accordion. One for desktop and other for mobile devices. Comop I use this code?

    LIKE THIS:
    /*ACCORDION DESKTOP*/
    @media only screen and (max-width: 768px) {
    .av_toggle_section .toggler {
    font-family: Oswald, ‘Roboto’, ‘HelveticaNeue’, Helvetica, Arial, sans-serif !important;
    font-size: 45px;
    line-height: 1.5em;
    color: #FFF;
    padding: 20px;
    background: rgb(255,0,0,0.1) !important;
    font-weight: bolder;
    }
    /*ACCORDION DEVICES*/
    @media only screen and (max-width: 767px) {
    .av_toggle_section .toggler {
    font-family: Oswald, ‘Roboto’, ‘HelveticaNeue’, Helvetica, Arial, sans-serif !important;
    font-size: 20px;
    line-height: 1.5em;
    color: #FFF;
    padding: 20px;
    background: rgb(255,0,0,0.1) !important;
    font-weight: bolder;
    }

    April 25, 2018 at 4:35 pm #946687
    Vinay

    Hi,

    I’m sorry I missed the mobile version but I’m glad you figured it out :)

    We will close this ticket if you need any further help with any other issue please open a new ticket, we are happy to help :)

    Thank you for using Enfold.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘ACCORDION ON DEVICES’ is closed to new replies.