Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 7, 2017 at 11:13 pm #886246
    chopsuey750

    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; 
} }
    December 7, 2017 at 11:33 pm #886258
    Jordan Shannon

    Hey chopsuey750,

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

    Best regards,
    Jordan Shannon

    December 8, 2017 at 12:31 am #886301
    chopsuey750

    Hi Jordan, yes, that’s the one.

    December 8, 2017 at 11:04 am #886411
    Victoria

    Hi,

    Best regards,
    Victoria

    December 8, 2017 at 6:07 pm #886559
    chopsuey750

    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

    December 8, 2017 at 6:58 pm #886570
    chopsuey750

    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;

    } }

    December 9, 2017 at 12:00 am #886670
    Jordan Shannon

    Hi,

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

    Turn on Custom CSS Class field for all ALB Elements

    Best regards,
    Jordan Shannon

    December 9, 2017 at 4:30 am #886725
    chopsuey750

    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;

} }
    December 10, 2017 at 12:48 am #887006
    Mike

    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

    December 10, 2017 at 1:11 am #887009
    chopsuey750

    Thanks so much Mike!

    December 10, 2017 at 4:39 am #887042
    Mike

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

    Best regards,
    Mike

  • Author
    Posts
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.