The size of the bootstrap slider title and description.

Hey there mudante,

How are you doing today?

If these are the ones you’re referring to https://screencast.com/t/0uk4wRWm2PK then please try adding the following code to themes custom CSS tab in Appearance -> Theme Options -> Custom CSS:

#bootstrap-slider .carousel-caption h2 {
  font: normal 36px Roboto!important;
}

#bootstrap-slider .carousel-caption p {
  font: normal 18px Roboto;
}

Note that these are original font size values and to reduce them please decrease the numeric values to what ever suits your needs. Normally I wouldn’t suggest the use of the !important declaration. However, it can sometimes be a necessary evil when over-writing existing styles. You can find more info on the use of important declaration here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

If the code doesn’t work can you please keep it added and post link to your site so I can take a look ??

Cheers,
Bojan

Thanks Bojan or your nice and courteous reply with the code and the SCS.
I already reduced the font size by using the options available in the Evolve theme customizer panel: “Bootstrap Slider.” What I was precisely concerned with was the size of the opaque banner container of those titles and descriptions in the bottom since it s quite big and invasive over the images. Just by “playing by ear” I got to reduce it by adding the following code on the custom CSS:

#bootstrap-slider .carousel-caption {
left:0;
right:0;
padding-top:0; (it was 50 on the parent, I believe)
padding-bottom:0px; (same way)
bottom:0;
}
#bootstrap-slider .carousel-caption h2 {
background:rgba(0,0,0,0.5);
padding-top:0px; (15 on the parent)
padding-bottom:0px; (15 on the parent
margin-top:0;
}

Although I got what I wanted I’m not so sure it is correct AND I want to shrink it MORE! My w/site is not running with this theme yet. I’m preparing Evolve little by little for a future migration to this new folder since I have an old non-responsive theme in the actual one. Besides, I’m a musician, not a developer and I constantly make mistakes and absurd alterations. However, here is it: https://rmpiano.com/lessons

Thanks again and cheers back!

Hey again mudante,

Everything looks ok with your code. However, I’m not entirely sure what you’re looking to do so can you please add more info or possibly a screenshot of what exactly are you trying to shrink and I’ll be happy to give you a hand with making those CSS modifications ??

Cheers,
Bojan

Thank you Bojan for your help and courtesy.
Here is the page in question:

https://rmpiano.com/lessons/wp-content/uploads/2015/06/evolve-theme-bootsrap-slider-title-and-desctiption-size-and-hight.png”>

In addition, can you please help me with this space also since is within the same subject?

https://rmpiano.com/lessons/wp-content/uploads/2015/06/evolve-theme-unused-space-in-pages2.png”>

Thanks so much in advance for your time and knowledge!

Hey again mudante,

Thanks for the screenshots.

There is a bottom margin on both heading and paragraph in the slider, you can remove it by adding the following:

#bootstrap-slider .carousel-caption p, #bootstrap-slider .carousel-caption h2 {
  margin-bottom: 0;
}

As for the title on the second screenshot or the example page you can first try remove 35px top margin on entry-content by adding the following:

.entry-content {
  margin-top: 0;
}

If you want to move it more without pushing the whole content to the top (including the sidebar) you can apply negative margin as well instead of adding just 0. If you want to push the whole content part to the top with the sidebar you can try removing or reducing 35px top padding that is added on the on the whole content area by adding something like this:

.content {
  padding-top: 15px;
}

Hope this helps ??

Cheers,
Bojan

Thanks Bojan, I will work on those issues’nd codes and let you know.
Y deeply appreciate your answers. many cheers! Mudante.

Please let me know how that goes ??

Cheers,
Bojan

Hi Bojan, working hard and updating you about this subject just to close it with a nice “resolved.” ??

Both codes worked perfectly. I’m learning at a fast pace.
in the second case space was reduced the by first the removal of the:

/*Remove EDIT page box, all*/
.edit-post a, .edit-comment a, .edit-page a {
display: none;
}

and also disabling the page title with:

/*Remove page title*/
.page h1.entry-title {
display: none;

Then I did enter your code with a minus 38 (-38) as follows:

/*Reduce/remove space left by edit box & page title*/
.entry-content {
margin-top: -38px;
}

I include all of them here to help somebody else with the same issues or purposes. Happy ending and here is the SS:

https://rmpiano.com/lessons/home/

Did I thank you enough? No, but please keep answering questions here, we all appreciate it so much. Cheers!

THANKS BOJAN . . Resuelto!

Glad to hear that worked for you and happy I could help ??

Have a great day!

Cheers,
Bojan