[Jamie]

Hi
Option 1:
Just wondering is there a way I can make the promotional headline and the Button that has the link on the same line
Also to have the button same size text as headline with the button right beside the end of headline

Option 2:
Or to have the promotional headline on one line and without alot of spacing to have the Button in larger text and just under the headline text, both headline text on left and button on left.

Option 3:
If none of the above can be done to have the button alot larger and with some css to look like a button to press.

Any help in this matter would be appreciated.

Thanks

Trying to avoid a large spacing between the headline and button, and avoid having the button down slightly from the headline and far over the right hand side. Trying to make it more visible for people to see the button they have to press as pressing the headline text does nothing.

[Skandha]

@jdnorup: Hello there,
Can you please post in your site URL with Promotion Headline section enabled so that I can look into the issue?

Kind Regards,
Skandha

[Jamie]

Hi Skandha,

Our website address is https://umrengines.com.au/

Thanks

[Jamie]

Hi I have added this code, makes it look better but need a little help with it
The button has now the look I want but not sure how to move it over closer to the promotional message.
I added position: relative;left:-455px; to the button to bring it close, but as I knew it would not work on a much smaller screen, especially mobile.

Help with this please:
Button closer to promotion message
how to remove the white space underneath so the white spacing is same as it is on top

Here is the code I have done so far, it is probably not good but I tried my best as I have no idea with css

/* Promotion Button */
#promotion-message .right .promotion-button {
background-color: #000;
border: 1px solid #ab8632;
border-radius: 8px;
color: #fff;
margin-top: -5px;
}

/* Promotion Button – Hover */
#promotion-message .right .promotion-button:hover, #promotion-message .right .promotion-button:hover {

background-color: #ab8632!important;
border-color: #000000!important;
border: 1px solid #ab8632;
border-radius: 8px;
color: #000000!important;
font-weight: 550!important;
transition: .5s;
}

[Skandha]

@jdnorup: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#promotion-message .right {
    float: left;
}

Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts