Tagged: , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 28, 2020 at 5:46 pm #1207882
    Sclark91

    Hello!

    I’m having an issue with the plus and minus buttons from the Accordion Toggle element overlapping the title copy of each toggle on smaller devices like mobile and possibly tablet but it looks good on a desktop.

    The site is pioneerautocredit.com

    Here is a screenshot of the issue:
    https://drive.google.com/file/d/1LRFSNwmZTnWO7j4w6w9vqeuf9SSZNtfT/view?usp=sharing

    And here is some code that I already have relating to the accordion toggle:
    .js_active .toggler, .js_active .tab { border: none !important; }

    #top.home .togglecontainer .toggler {
    padding: 25px 25px 27px 35px !important;
    }

    #top.home .togglecontainer .toggle_content {
    padding: 15px 15px 17px 35px !important;
    background: #f4f4f4 !important;
    border: none !important;
    }

    p.toggler:focus {
    outline: -webkit-focus-ring-color auto 0;
    }

    #top.home .togglecontainer .single_toggle {
    margin-bottom: 0px !important;
    }

    #top .main_color .toggler:focus {
    outline: 0 !important;
    outline: 0 -webkit-focus-ring-color !important;
    }

    Thanks in advance!

    Stephanie

    April 28, 2020 at 8:54 pm #1207971
    Jordan Shannon

    Hey Stephanie,

    Add this to quick css:

    @media only screen and (max-width: 1024px)  {
#top.home .togglecontainer .toggler {
padding: 25px 60px 27px 35px !important;
}}

    Best regards,
    Jordan Shannon

    April 28, 2020 at 9:34 pm #1207988
    Sclark91

    Is this code specifically for the home page? It’s working for that toggle, but there’s another toggle on the contact page which is still having that issue.

    Contact

    Thanks for your continued assistance!

    April 28, 2020 at 9:45 pm #1207995
    Jordan Shannon

    Hi,

    Try this instead:

    @media only screen and (max-width: 1024px)  {
#top .togglecontainer .toggler {
padding: 25px 60px 27px 35px !important;
}}

    Best regards,
    Jordan Shannon

    April 28, 2020 at 11:21 pm #1208029
    Sclark91

    Strange, now that code works for the contact page toggle, but not the homepage toggle. XD
    In both instances with just that code and when paired with the above code.

    April 28, 2020 at 11:28 pm #1208032
    Jordan Shannon

    Hi,

    I’m seeing it fine on both pages. Did you clear the cache a few times over? You can also try the following:

    @media only screen and (max-width: 1024px)  {
#top.home .togglecontainer .toggler {
padding: 25px 60px 27px 35px !important;
}

#top.page-id-3254 .togglecontainer .toggler {
padding: 25px 60px 27px 35px !important;
}}

    Best regards,
    Jordan Shannon

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