How do I force an image to be responsive using CSS so it stays in the same position?

Question

I have an image set up like this using CSS.

Here is how it looks on a regular desktop:

I'm using the following CSS on the image (the avatar + arrow) to achieve this effect:

img#sideimage {
     position: absolute;
     margin-left: -96px!important;
     margin-top: 0px;
     width: 180px;
}

The html is quite simple; it's just WordPress shortcode:

[row class="toppage"][column size="2/3"]<a href="#injustice_form" target="foobox" 
data-width="460px">Know someone serving a life sentence? Do you feel it was
prosecutorial overkill?</a>[/column][column size="1/3"]<img id="sideimage" 
src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-this8.png" alt="Donate 
to the NCDP" align="right" />[spt_paybutton text="Donate!" comment="true" 
service="false" amount="" design="28" lightbox="true"][/column][/row]
[row][column size="2/3"]
There are currently roughly 160,000 prisoners in
America serving life sentences without the possibility of parole.
[/column]
[/row]

That translates into this html output:

<div class="su-row toppage"><div class="su-column su-column-size-2-3"><div class="su- 
column-inner su-clearfix"><a href="#injustice_form" target="foobox" 
data-width="460px">Know someone serving a life sentence? Do you feel it was 
prosecutorial overkill?</a></div></div>

<div class="su-column su-column-size-1-3"><div class="su-column-inner 
su-clearfix"><img id="sideimage" src="https://nationalcdp.org
/wp-content/plugins/speed-booster-pack/inc/images/1x1.trans.gif" data-lazy-
src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-this8.png" alt="Donate 
to the NCDP" align="right" /><noscript><img id="sideimage" src="https://nationalcdp.org
/wp-content/uploads/2014/09/feature-this8.png" alt="Donate to the NCDP" align="right" 
/></noscript><a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28"  
href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal
/index.php?&serv=false&amount=&comment=true&iframe=true&width=100%&height=100%">Donate!
<span></span></a></div></div></div>

But when using a device with a smaller viewport, the image (which includes the avatar and the arrow) gets smushed to the left, and cut off:

Could (and should) I use @ media queries to resolve such an issue? If so, could anybody guide me through the proper way to do so with the information I provided?

An example, for instance, is located at https://nationalcdp.org/life-sentences/

Thank you for any guidance anybody can offer!

Answer 1

That is a lot of redundant HTML! Let's simplify your markup with the bare minimum required:

<div class="donate">
  <a href="#" class="link">
    Know someone serving a life sentence? Do you feel it was prosecutorial overkill?
  </a> 
  <a href="#" class="button">Donate!</a>
</div>

Sprinkle some CSS

• Create the button with CSS and apply easy :hover and :active states.

• The button is given position: absolute and will position itself relative to its position: relative container .donate. top: 50% along with the negative top margin will keep it centered when the container width is reduced.

• .donate is given an appropriate max and min width

• The arrow / avatar are added with a pseudo element on the .donate container.

• The right margin on .text is large enough to account for the width of the button.

Example demos

With current image

body {
  margin: 0;
  font-family: Helvetica;
}
.donate {
  max-width: 500px;
  min-width: 350px;
  position: relative;
  box-shadow: 0 0 10px #CCC;
  padding: 10px;
  margin: 10px auto 0;
}

/*arrow / avatar image*/
.donate:after {
  content: '';
  background: url(https://nationalcdp.org/wp-content/uploads/2014/09/feature-this8.png) left top no-repeat;
  /*background image*/
  display: block;
  height: 180px;
  width: 180px;
  position: absolute;
  right: 90px;
  top: 50%;
  margin-top: -15px;
}
.link {
  display: block;
  margin-right: 140px;
  color: #000;
  text-decoration: none;
}
.button {
  text-decoration: none;
  background: #940001;
  color: #FFF;
  padding: 0.5em;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -1.05em;
  transition: all 0.2s;
  border-radius: 5px;
}
.link:hover {
  text-decoration: underline;
}
.button:hover {
  box-shadow: 0 0 10px #940001;
}
.button:active {
  box-shadow: 0 0 0 #940001;
}

<div class="donate">
  <a href="#" class="link">
    Know someone serving a life sentence? Do you feel it was prosecutorial overkill?
  </a> 
  <a href="#" class="button">Donate!</a>
</div>

With altered image

body {
  margin: 0;
  font-family: Helvetica;
}
.donate {
  max-width: 500px;
  min-width: 350px;
  position: relative;
  box-shadow: 0 0 10px #CCC;
  padding: 10px;
  margin: 10px auto 0;
}

/*arrow / avatar image*/
.donate:after {
  content: '';
  background: url(https://i.sstatic.net/tWfRP.png) left top no-repeat;
  /*background image*/
  display: block;
  height: 180px;
  width: 180px;
  position: absolute;
  right: -20px;
  top: 50%;
  margin-top: -5px;
}
.link {
  display: block;
  margin-right: 140px;
  color: #000;
  text-decoration: none;
}
.button {
  text-decoration: none;
  background: #940001;
  color: #FFF;
  padding: 0.5em;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -1.05em;
  transition: all 0.2s;
  border-radius: 5px;
}
.link:hover {
  text-decoration: underline;
}
.button:hover {
  box-shadow: 0 0 10px #940001;
}
.button:active {
  box-shadow: 0 0 0 #940001;
}

<div class="donate">
  <a href="#" class="link">
    Know someone serving a life sentence? Do you feel it was prosecutorial overkill?
  </a> 
  <a href="#" class="button">Donate!</a>
</div>

Answer 2

Don't use width:180px use percentage values, all responsive elements / pages must use only percentage values:

#a{
  width:100px;
  height:100px;
  background:red;
}
#b{
  width:15.6%;
  height:30%;
  background:black;
  position:absolute;
}

<div id="a"></div>
<div id="b"></div>

Note: view the example in full screen.
The black box is relative, the red one isn't, zoom in on the page and see how the red one gets bigger and the black one looks exactly the same.

Answer 3

If you are using bootstrap, most possibly you can do is that insert the html of this part in a div whose class will be :

<div class="col-xs-12">
   .........
   .........
</div>

This will force wrap the html to the full width of the screen.