We are using the block slider but find that the arrows cover up important text when viewed on mobile and the tabs don't work for the layout we want.
We have tried custom CSS, but this affects all text components:
@media (max-width:768px) {
.component__body-inner.text__body-inner {
width:75%;
margin:0 auto;
}
}
Currently, we’re on:
Thanks,
Sherri
Hi Sherri,
Try to make your CSS more specific to the context. One way is to reference the Article Block Slider in your style. Below I have included ".abs__container". This a class on the container that houses the sliding blocks. (Preserve the space that follows it.)
@media (max-width:768px) {
.abs__container .component__body-inner.text__body-inner {
width:75%;
margin:0 auto;
}
}
An alternative method:
Using the AT config editor, you can add a class to each component that is destined for the ABS and reference that class in your style. In the example below, the class is "w75". (Again preserve the space.)
@media (max-width:768px) {
.w75 .component__body-inner.text__body-inner {
width:75%;
margin:0 auto;
}
}