change trailer box title font size

Comments

• Phil

  May 2022

  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

  June 2022

  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

  June 2022

  I figured it out. Thank you for your time!
• Phil

  June 2022

  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

  June 2022

  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

  June 2022

  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

  June 2022

  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

  June 2022

  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

  June 2022

  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

  June 2022

  And the website is live, montecitomedspa.com.
• Phil

  June 2022

  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