change trailer box title font size

Stratinc

Hello,

I would like to change the font size of the Title in the Trailer Boxes. Could you provide the custom CSS for it? I tried placing it myself but it wasn't working.

https://montecitomedspa.com - scroll down to see trailer boxes.. would like the title font to be smaller so that all the treatments listed can fit.

And for the last box, I'd like it to have the same height as the others but span across the length of the two above. Is that possible?

Thanks!

Phil

Hi,

1) There is no need to write a custom CSS code for that.

Edit these sliders, and in the Style tab, you will find the typography option for the title.

To make your work faster, you can use the preset feature.

2) It is possible but probably you will have to modify your image proportions, and you would have to work with it for a while to choose the best one.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Stratinc

I see why I was having trouble, I'm using Elementor to build. I don't see the same options. And it looks like if I go to build from the Betheme builder I can't edit what I built using the Elementor builder.

2) I am aware I'll have to change the image size or span it to cover, but I can't seem to make it do so with the Elementor settings for the trailer box and column.

Stratinc

I figured it out. Thank you for your time!

Phil

Good to hear that.

If is there anything else I can help you with, please, let me know.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Stratinc

Is there a way to change the font sizes etc. in the trailer box from the Elementor builder? I really want to change the title font size and letter spacing. I tried re-building the trailer boxes from the Betheme builder but then I can't drag it to the location I want it to given the other sections are built with Elementor.

Phil

To change the font size and letter spacing in the Elementor for the Trailer box, you need to write a custom CSS code, and place it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Do you need help with writing it?

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Stratinc

Yes, that would be wonderful if you could provide the custom CSS.

And, the text in the trailer boxes is not responsive. Can we set the percentage responsiveness in the same custom CSS code?

Phil

Please, use the following code:

.trailer_box .desc h2{
   font-size: 20px!important;
   letter-spacing: 0!important;
}

But the amount of text is too high for mobile display. In that situation, I suggest adjusting the mobile.

https://elementor.com/help/mobile-editing/

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Stratinc

Screen Shot 2022-06-10 at 10.21.15 AM.png

Screen Shot 2022-06-10 at 10.21.38 AM.png

Thank you for the trailer box CSS! It worked.

Unfortunately, when editing a Betheme element using the Elementor builder I don't see the font size responsive icons to adjust for each device. And attached are screenshots of the sections (fancy heading and trailer boxes) on my iPhone using Safari and chrome. Is there another way to do this in CSS code?

Stratinc

And the website is live, montecitomedspa.com.

Phil

By adjusting the display, I meant hiding the Trailer Boxes for the desktop view and putting the new ones only for mobile with less content.

You can also try to replace the previous code with the following one:

@media only screen and (max-width: 767px){
  .trailer_box .desc h2{
  font-size: 15px!important;
  letter-spacing: 0!important;
  line-height: 15px
  }
  .trailer_box .desc .subtitle{
     margin-bottom: 5px;
  }
}
@media only screen and (min-width: 768px){
      .trailer_box .desc h2{
      font-size: 20px!important;
      letter-spacing: 0!important;
   }
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next