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
Welcome to our forum,
have you tried with media query ?
@media only screen and (max-width: 500px) {
}
Regards