Center CTA Button and Heading, Remove Lines

  • Resolved slbrown415

    (@slbrown415)


    6 years, 3 months ago

    Hi,
    I would like to center the heading and call to action button in a popup. I’ve added the below as I found on another thread, but it didn’t work.

    .hustle-modal-title {
    text-align: center;
    }
    .wph-modal.module_id_2 .hustle-modal a.hustle-modal-cta {
    margin-left: auto;
    margin-right: auto;
    }

    Also would like to remove the lines above and below the text content. Thanks!

    • This topic was modified 6 years, 3 months ago by slbrown415.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Laura – WPMU DEV Support

    (@wpmudev-support8)

    6 years, 3 months ago

    Hi @slbrown415

    I hope you’re doing fine today!

    The CSS that you tried is for popup while on your site you’re actually using slide-in. It’s a different module so the code will be similar but not the same. It requires few small modifications:

    .hustle_module_id_2 .hustle-content .hustle-title {
text-align: center;
}
.hustle_module_id_2 .hustle-content a.hustle-button-cta {
  margin:0 auto!important;
	display:block!important;
	width:150px!important;
}
.hustle_module_id_2 .hustle-group-content,
.hustle_module_id_2 .hustle-group-title {
	border:0!important;
}

    Above CSS should work on your site. Note please:

    1) I used “!important” flag which isn’t quite an “elegant” solution and is not recommended but in this case it might be necessary to “force-overwrite” Hustle core code. I suggest trying this CSS first without “!important” and only adding it if it doesn’t work otherwise (I tested it in browser so it’s a bit different)

    2) you might want to adjust the 150px value to make the CTA button wider or narrower.

    Best regards,
    Adam

    Thread Starter slbrown415

    (@slbrown415)

    6 years, 3 months ago

    Thanks so much, Adam!

    I did have to keep !important for the CTA, but the title worked without. I appreciate it!

    Is there a way to remove the line breaks before and after the text content?

    Steph

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    6 years, 3 months ago

    Hello @slbrown415 ,

    Please try this code:

    .hustle_module_id_2.hustle-ui .hustle-info.hustle-info--compact .hustle-layout .hustle-content .hustle-group-title:not(:last-child),
.hustle_module_id_2.hustle-ui .hustle-info.hustle-info--compact .hustle-layout .hustle-content .hustle-group-content:not(:last-child) {border-bottom: none;}

    kind regards,
    Kasia

    Thread Starter slbrown415

    (@slbrown415)

    6 years, 3 months ago

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Center CTA Button and Heading, Remove Lines’ is closed to new replies.