Home>Support>Cta widget Button CSS

Cta widget Button CSS

By eshan, 10 years ago. Last reply by Magus, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

HI,
Im trying to position the cta widget button with a bit more consistency. Ive set the CTA height to 150px for stability but I cant seem to position the button relative to the bottom without messing up the button placement completely ( ie sits outside the CT) and the whole CTA gets affected too.
Ive tried targeting .ow-button-base a ,ow-button-base, .so-widget-sow-button with no joy.
Ive set up a couple of CTAs here test.thegplondon.co.uk – at the moment they havent any extra css added to them ( apart from setting the height of the whole CTA base.)
I could just use the html widget and write a box in HTML I guess but Im trying to avoid doing that so that when others in the team take over the site I dont get called constantly just to add in more CTAs.:)
Any help would be welcomed – thanks in advance.
best wishes
Eshan

URL: http://test.thegplondon.co.uk

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 23 days ago eshan

    Hi,
    actually I think I might have worked this out with the following css – Ive added it below in case it this helps you guys or anyone else to do a more sticky right button alignment. It was deeply irritating for me, so maybe others might like to know…:)

    .sow-cta-wrapper{
  position:relative;
}
.so-widget-sow-button{
    position: absolute;
  bottom: -11em;
 right:0px;
}

    thanks

  2. 10 years, 23 days ago eshan

    NB – obviously you might want to add padding to the CTA box for prettyness etc

  3. 10 years, 23 days ago eshan

    Ok, so a quick update – Ive tweaked the code so it doesnt mess up the responsive layout – ie on small screens.
    Also bear in mind the

    bottom:-11em;

    works for me because Ive already set a height

    .sow-cta-base{
  height:150px;
}

    so all my cta boxes are the same height. you might have to play with that if you set a different height.

    Here’s the amended css

    .sow-cta-wrapper{
  position:relative;
}

@media screen and (max-width: 640px){
.sow-cta-base .so-widget-sow-button{
float:none !important;
  margin-left:0px !important;
  margin-right:0px !important;
  }
}

@media screen and (min-width:640px){
.so-widget-sow-button{
    position: absolute;
  bottom: -11em;
 right:0px;
  margin-right:0px !important;
}
}
  4. 10 years, 22 days ago Magus
    Hi, I Work Here

    Hi Eshan

    Glad to hear you found a solution. I am sure other users will find this snippet useful.

    Let us know if you need any more help.

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More