Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #886246

    Hi, I added this custom CSS under Quick CSS. The button is properly resized, but the text is wrapping when font-size is above 17px. How can I stop it from wrapping?

    
    /*change size of button on full slider*/
    #full_slider_1 .avia-slideshow-button {  
    /* Adjust this for size */     
    padding: 10px 130px !important;    
    font-size: 24px !important; 
    } }
    
    #886258

    Hey chopsuey750,

    Are you referring to the “get your freebie” button?

    Best regards,
    Jordan Shannon

    #886301

    Hi Jordan, yes, that’s the one.

    #886411

    Hi,

    Best regards,
    Victoria

    #886559

    Hi Victoria, the first button on the top, that currently reads “oh heck ya”. When the label on the button is longer the text will wrap. How do I set the size of the button so it’s not effected by how long or short the label is?

    Thank you,
    Sue

    #886570

    Hi, I figured it out. I added with width property to the CSS as shown below. However, I still have an issue. I only want to change the button for that one slider on that one page. I tried to put the css in the custom css class field for that element on the page, and it’s not taking effect. What am I doing wrong?

    /*change size and style of button on fullwidth slider*/
    #full_slider_1 .avia-slideshow-button {

    /* Adjust this for size */
    width: 405px;
    height: padding: 10px !important;
    font-size: 24px !important;
    background-color: #4261f5 !important;
    border-radius: 25px !important;
    text-decoration: none;

    /* Adjust these for position */
    top: -56px;
    left: 15px;

    } }

    #886670

    Hi,

    You can attempt to add a class to the button and target the class:

    https://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -for-all-alb-elements/

    Best regards,
    Jordan Shannon

    #886725

    Hi Jordan, I’m not sure how to do this. I added a custom css class to the fullwidth easy slider named sth-entrylevel-slide.

    I then modified my css in Quick CSS to reference the class name instead of #full_slider_1, but it doesn’t seem to have any effect on how the button is displayed. What am I doing wrong?

    /*change size and style of button on fullwidth slider*/
    #sth-entrylevel-slider .avia-slideshow-button {
    
    /* Adjust this for size */
    width: 405px;
    height: padding: 10px !important;
    font-size: 24px !important;
    background-color: #4261f5 !important;
    border-radius: 25px !important;
    text-decoration: none;
    
    /* Adjust these for position */
    top: -56px;
    left: 15px;
    
    } }
    
    #887006

    Hi,
    If I understand correctly, you would like the button to cover the white area.

    .page-id-10 .avia-slideshow-button.avia-button.avia-color-blue  {
    width: 455px;
    height: padding: 10px !important;
    font-size: 24px !important;
    background-color: #4261f5 !important;
    border-radius: 25px !important;
    text-decoration: none;
    top: -56px!important; 
    left: 45px!important; 
    
    } 

    please see screenshot in Private Content area

    Best regards,
    Mike

    #887009

    Thanks so much Mike!

    #887042

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Text is wrapping after changing font size of full slider button’ is closed to new replies.