This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Cta widget Button CSS

Resolved 4 replies premiumthemetheme-vantage
10 years ago · Last reply by Magus 10 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. eshan 10 years, 8 months ago

    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. eshan 10 years, 8 months ago

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

  3. eshan 10 years, 8 months ago

    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. Magus Staff 10 years, 8 months ago

    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.

Have a different question or issue?

Start New Thread