Hello diosahayya,
Put below css code into your current theme’s style.css (at the end) file located at wp-content/themes/your_current_theme/ folder.
@media only screen and (max-width: 540px) {
#bootstrap-slider .carousel-caption p,
#bootstrap-slider .carousel-caption .bootstrap-button,
#bootstrap-slider .carousel-control {
display:block;
}
#bootstrap-slider .carousel-caption {
top: 14px;
}
}
Note : All Changes you done in any file of theme are gone when you update theme. So prefer Child Theme.
Hope this will helps you.
Hi Saurabh @saurabhdhariwal
Thank you for your advice. In order for the header, paragraph, button, control to show I had to use the following CSS:
@media only screen and (max-width: 540px) {
#bootstrap-slider .carousel-caption p,
#bootstrap-slider .carousel-caption .bootstrap-button,
#bootstrap-slider .carousel-control {
display:block;
}
#bootstrap-slider .carousel-caption {
top: 10px;
}
#bootstrap-slider .carousel-caption h2 {
font-size: 10px !important;
line-height: 1.5 !important;
}
#bootstrap-slider .carousel-caption p {
font-size: 9px !important;
line-height: 1 !important;
}
#bootstrap-slider .carousel-caption .bootstrap-button {
font-size: 7px !important; margin-top: 0 !important;
position: relative !important;
top: 0px !important;
line-height: 2 !important;
}
}
And the following issues remain:
1) on ipad view, the button and control boxes overlap
2) on mobile phone view, the button stretches across the screen
Any tips are very welcome! Thank you
Hi,
Add Custom CSS in your 540px media query
#bootstrap-slider .carousel-caption .bootstrap-button {
line-height: 4 !important;
width: 100px;
}
#bootstrap-slider a.left::before, #bootstrap-slider a.right::before {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 10px;
}
And Add this extra CSS separately
@media only screen and (max-width: 360px) {
#bootstrap-slider .right.carousel-control {
left: 185px;
}
#bootstrap-slider .carousel-control {
left: 165px;
bottom: 11%;
}
}
Thanks
