Change accordion and tab attributes when displayed on mobile

Support reply may delay for 3 weeks due to corona virus outbreak, please send us email to
Sep 30, 2016 09:13 PM 1 Answers General
Member Since Jul 2016
Subscribed Subscribe Not subscribe

I use CSS in my child theme to set the attributes for all accordions and tabs on the website (rather than set them for each accordion separately on the 'edit accordions' panel. This works when displaying on a full-screen device:

/* Accordion header */
.accordions-head {background-color: #bcd2ee !important; border: 1px solid #dddddd; height: 12px !important; padding-top: 1px !important; color: #333 !important; }
/* Tab header */
.accordions-tab-head {background-color: #bcd2ee !important; border: 1px solid #ffffff; color: #333 !important}
/* Tab header: background when active */
.accordions-tabs .ui-tabs-active a {background-color: #dddddd !important;}
/* Accordion and tab up/down icon: remove */
.accordions-tab-icons, .accordion-icons {display: none !important;}
/* Accordion and tab content */
.accordion-content, .tabs-content {background-color:#f3f3f3 !important; border: 1px solid #dddddd !important;}
.accordion-content p, .tabs-content p {line-height: 150%; font-size: 110%;}

However, when displayed on a mobile (using WPtouch) the above css is ignored. Everything reverts to the definitions on the 'edit accordions' panel.

Do you have any idea why this might be?




2 Subscribers
Submit Answer
Please login to submit answer.
1 Answers
Sort By:
Best Answer
Oct 02, 2016

Welcome to our forum,


have you tried with media query ?

@media only screen and (max-width: 500px) {




Sign in to Reply
Replying as Submit

Please use to upload your screenshot and share url here.
You can't upload any files or attachment to our server directly for security reason, you can use 3rd party website and share file url here. here is the top file sharing website you can use.

Please login to see your tickets