Docs

[hanneska]

Hi there!

As on http://schnittweise.08k.de/wordpress/0300_e_soldaten for instance, I just tried out a customization of the Soliloquy navigation elements via:

.soliloquy-container .soliloquy-next {
background: rgba(256,256,256,0.1) url(//schnittweise.08k.de/wordpress/wp-content/uploads/2017/02/Soliloqui-NavArrow-next-white.png) no-repeat scroll 50% 50% !important;
width: 18px !important;
height: 35px !important;
}
.soliloquy-container .soliloquy-prev {
background: rgba(256,256,256,0.1) url(//schnittweise.08k.de/wordpress/wp-content/uploads/2017/02/Soliloqui-NavArrow-prev-white.png) no-repeat scroll 50% 50% !important;
width: 18px !important;
height: 35px !important;
}

How can I control the size of the control elements in the responsive case?

Best regards!

[Rad]

Hi there,

Thanks for posting in.

Try wrapping your custom CSS within @media block.

Example,

@media ( min-width: 980px ) { /* desktop */

}

@media ( min-width: 979px ) { /* tablet */

}

@media ( min-width: 767px ) { /* mobile */

}

A complete example is this

@media ( min-width: 767px ) {
.soliloquy-container .soliloquy-next {
background: rgba(256,256,256,0.1) url(//schnittweise.08k.de/wordpress/wp-content/uploads/2017/02/Soliloqui-NavArrow-next-white.png) no-repeat scroll 50% 50% !important;
width: 18px !important;
height: 35px !important;
}
.soliloquy-container .soliloquy-prev {
background: rgba(256,256,256,0.1) url(//schnittweise.08k.de/wordpress/wp-content/uploads/2017/02/Soliloqui-NavArrow-prev-white.png) no-repeat scroll 50% 50% !important;
width: 18px !important;
height: 35px !important;
}
}

Then change the size per device target.

Hope this helps.

[Author]

Posts