Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Accordian not Working in Responsive Mode

Accordian
    • 9 years, 8 months ago shibbytude
      Participant

      Expired

      Hi!

      Great theme and easy to work with, so all happy! :)

      Just one problem I have though with the Accordian.

      If you look at this page: Website Link

      When you look at it on a mobile or make the browser screen size smaller, the Accordion covers all the page.

      had a look at the CSS but cant seem to get to the route of the problem, if you could help that would be great.

      Thanks!

       

    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      Please go to file wp-content\plugins\js_composer\assets\css\js_composer.css and find this line:

      .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left .vc_tta-controls-icon {
        position: absolute;
        top: 50%;

      Edit it by commenting out the top attribute. It should be like this:

      .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left .vc_tta-controls-icon {
        position: absolute;
        /*top: 50%;*/

      Let us know.

      Best regards!

    • 9 years, 8 months ago shibbytude
      Participant

      Expired

      Hi!

      Thanks for your help, sadly this didn’t work, it just moved the Arrow for the Accordion.

      Thanks for help so far,

    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      Please try this out, add these lines into your custom css box:

      .vc_tta.vc_general .vc_tta-panels-container, .vc_tta.vc_general .vc_tta-panels {
          position: inherit !important;
      }
      .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left .vc_tta-controls-icon {
          top: initial !important;
      }

      Let us know.

      Best regards!

    • 9 years, 8 months ago shibbytude
      Participant

      Expired

      Hi!

      Thanks for this! :)

      Nearly there, is working better, you can see the text now for the page in responsive mode, but the grey box is still there behind the text.

      Thanks again

    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      What gray box are you referring to? Please send a screenshot so i can understand better. Did you add the second line too? (this:`.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left .vc_tta-controls-icon {
      top: initial !important;
      }` ) Because i see the first plus sign still dislocated..

      Best regards!

    • 9 years, 8 months ago shibbytude
      Participant

      Expired

      Hi Mihila,

      Thanks for the reply.

      Yes I have added both lines of code as requested. Please see attached screenshot.

      Thanks again.

    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      I think it looks good. Let us know if you need further help.

      Best regards!

    • 9 years, 8 months ago shibbytude
      Participant

      Expired

      hi

       

       

      the grey background behind the text before the title saying what does skillserve offer should not be grey it should be white!

      the first accordions background colour when going into responsive mode covers the first paragraph of text. Please check the link in my first message

    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      Please add this code into your custom css box:

      @media (max-width: 767px){
      .wpb_alert p:last-child, #content .wpb_alert p:last-child, .wpb_text_column p:last-child, .wpb_text_column *:last-child, #content .wpb_text_column p:last-child, #content .wpb_text_column *:last-child {
          background-color: white !important;
      }}

      Let us know.

      Best regards!

    • 9 years, 8 months ago shibbytude
      Participant

      Expired

      Thanks! this helped fix it :)

      Thanks for help!

Viewing 10 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password