Change accordion and tab attributes when displayed on mobile

0
Change accordion and tab attributes when displayed on mobile 1
andy1
Sep 30, 2016 09:13 PM 1 Answers General
Member Since Jul 2016
Subscribed Subscribe Not subscribe
Flag(0)

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?

Regards

Andy

 

2 Subscribers
Change accordion and tab attributes when displayed on mobile 1
Change accordion and tab attributes when displayed on mobile 3
Submit Answer
Please login to submit answer.
1 Answers
Sort By:
Best Answer
0
Change accordion and tab attributes when displayed on mobile 4
PickPlugins
Oct 02, 2016
Flag(0)

Welcome to our forum,

 

have you tried with media query ?

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

}

 

Regards

Sign in to Reply
Replying as Submit