Positioning an arrow relatively

[hantaah]

I have a callout box here: http://www.churbus.com/ask-an-expert/

Where it says “Not A Member?” I have placed an arrow pointing to the join now button. It looks great on my screen siz but any smaller and it all goes to pot. How should I do it so that the arrow looks good even when screen size is reduced?

[SamA74]

That is kind of tricky, because the position of the button in relation to the text alters. So the orientation of the arrow must change to suit.
All I can think of for now is to have a css transform within media queries to do this. Eg, when the button goes below the text, the arrow could rotate 90deg cw and move to the left of the button, below the text. But difficult, because the change is due to in-line wrapping, not a query already there.

[PaulOB]

How about just removing the arrow with media queries and put the button underneath.

e.g.

@media screen and (max-width:1200px){
 .callout-box-description-left{
  float:none!important;
  max-width:none;
 }
 .callout-box-description-left img{display:none}
 .callout-box-button{float:none;clear:both}
}

[SamA74]

Simpler. Better no arrow than a mis-directed one.

[yathrakaaran]

May be use a downward arrow using media queries on smaller screens where the button shows below the text? Just a suggestion! Example