Link to home
Start Free TrialLog in
Avatar of Mike Waller
Mike WallerFlag for United States of America

asked on

Webpage not mobile-responsive due to line of html code

Hi there. My webpage is not mobile-responsive and it appears due to this line of html code:

<label for="q2"><strong>What ministries does the Archbishop&rsquo;s Catholic Appeal support?</strong></label>

Open in new window


Here is the full html of my page:

<style type="text/css"><!--
label {
    color: #222222;
    cursor: pointer;
    font-size: 1.175rem;
    font-weight: normal;
    line-height: 1.5;
}
span.FormLabelText {
 color: #222222;    
    font-size: 1.275rem;
    font-weight: bold;    
}
fieldset {
color: #222222;
  font-size: 1.275rem;
    font-weight: bold;
  } 
hr {
color:#EEEEEE;
max-width:95%;
}    
h2.section-header-container {
font-size:26px;
}
h2 {
font-size:26px;
}
h3 {
font-size:24px;
}
p.content {
font-size:20px;
text-align:left;
font-weight:normal;
margin-right:50px;
}
p.content2 {
font-size:20px;
text-align:left;
font-weight:normal;
margin-right:50px;
}
p.top-message {
font-size:26px;
text-align:center;
font-weight:bold;
color:#ffffff;
margin:15px;
}
p.bottom-message {
font-size:20px;
text-align:center;
font-weight:bold;
color:#FFFFFF;
margin:15px;
}
p.form {
margin-left:50px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {   
  .full {
    display:block;
    width:100%;
	height:auto;
	clear: both;	
	margin:20px;
  } 
  table.bottom-footer-image-1920 {
    display:none;
  }
  table.top-banner-image-1920 {
    display:none;
  }  
  table.top-banner-image-1250 {
    display:none;
  }     
  table.top-banner-image-480 {
    display:none;
  }
 div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 320px;
	border: 0px solid;
	margin: 0 auto;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .full {
    display:block;
    width:100%;
	height:auto;
	clear: both;	
	margin:20px;
  } 
  table.bottom-footer-image-1920 {
    display:none;
  }
  table.top-banner-image-1920 {
    display:none;
  } 
  table.top-banner-image-1250 {
    display:none;
  }    
  table.top-banner-image-320 {
    display:none;
  }
  div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 320px;
	border: 0px solid;
	margin: 0 auto;
}
img.footer {
width: 480px;
height: 112px;   
text-align:center;	
display: block;
margin: 0 auto;
}
}
@media only screen and (min-width: 768px)  {       
  table.bottom-footer-image-mobile {
    display:none;
  }
  table.top-banner-image-320 {
    display:none;
  }
  table.top-banner-image-480 {
    display:none;
  }
}



section {
  padding-top: 10px;
}

.q1 input {
  display: none;
  visibility: hidden;
}
.q1 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q1 label:hover {
  color: #222222;
}
.q1 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q2 input {
  display: none;
  visibility: hidden;
}
.q2 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q2 label:hover {
  color: #222222;
}
.q2 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q3 input {
  display: none;
  visibility: hidden;
}
.q3 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q3 label:hover {
  color: #222222;
}
.q3 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q4 input {
  display: none;
  visibility: hidden;
}
.q4 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q4 label:hover {
  color: #222222;
}
.q4 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q5 input {
  display: none;
  visibility: hidden;
}
.q5 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q5 label:hover {
  color: #222222;
}
.q5 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q6 input {
  display: none;
  visibility: hidden;
}
.q6 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q6 label:hover {
  color: #222222;
}
.q6 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 0px;  
}
#q1 {
  display: none;
  visibility: hidden;
}

#a1 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q1:checked ~ #a1 {
  height: auto; 
}
#q2 {
  display: none;
  visibility: hidden;
}

#a2 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q2:checked ~ #a2 {
  height: auto; 
}
#q3 {
  display: none;
  visibility: hidden;
}

#a3 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q3:checked ~ #a3 {
  height: auto; 
}
#q4 {
  display: none;
  visibility: hidden;
}

#a4 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q4:checked ~ #a4 {
  height: auto; 
}
#q5 {
  display: none;
  visibility: hidden;
}

#a5 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q5:checked ~ #a5 {
  height: auto; 
}
#q6 {
  display: none;
  visibility: hidden;
}

#a6 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q6:checked ~ #a6 {
  height: auto; 
}
--></style>
<table style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top">
	
<table class="top-banner-image-1250" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/ACA_web_header1.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="top-message">Please consider a recurring monthly donation.</p>
</td>
</tr>
</tbody>
</table>
<table class="top-banner-image-480" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/ACA_Mobile_header1.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="top-message">Please consider a recurring monthly donation.</p>
</td>
</tr>
</tbody>
</table>
<table class="top-banner-image-320" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/ACA_Mobile_header1.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="top-message">Please consider a recurring monthly donation.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top">
	
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="10%" align="left" valign="top">&nbsp;</td>
<td class="full" width="50%" align="left" valign="top">
<p class="form"><br /><convio:session name="63" param="3"></convio:session></p>
</td>
<td class="full" width="50%" align="left" valign="top">
<p class="content"><br /><br />Please remember that the success of this year’s Appeal cannot rely on a few who are wealthy, but upon many who are willing.  Please help me to the best of your ability. This year, the Archbishop’s Catholic Appeal is introducing nine levels of giving that correspond to the Nine Choirs of Angels.  The primary purpose for initiating these Levels of Leadership Giving is to challenge all members of our faith community to embrace their role in the life and development of our Archdiocesan Church, while also cultivating a spirit of Christian stewardship. Below you will also find a few frequently asked questions about the Appeal.</p>
<p class="content">May our Lord bless you for your charity offered in his name.</p>

<p class="content">Sincerely and gratefully yours in Christ,</p>

<p class="content"><img src="../images/content/pagebuilder/archbishop-signature.png" alt="" width="100%" style="max-width:200px;width:100%;" max-width="200px;" height="auto" /></p>

<p class="content">Most Reverend Samuel J. Aquila, S.T.L.<br />
Archbishop of Denver</p>

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="30%" align="left" valign="top"><h2 style="font-size:16px;"><img align="left" src="../images/content/pagebuilder/angel.jpg" alt="" width="100%" style="max-width:75px;width:100%;" max-width="75px;" height="auto" />Choirs of Angels<br /><span style="font-size: 16px; font-weight: normal;">Level of Leadership Giving</span></h2></td>
<td width="70%" align="left" valign="top"><p class="content"><strong>Guardian Angel</strong> $1,000-$2,499<br />
<strong>Archangel</strong> $2,500-$4,999<br />
<strong>Principality</strong> $5,000-$9,999<br />
<strong>Power</strong> $10,000-$14,999<br />
<strong>Virtue</strong> $15,000-19,999<br />
<strong>Dominion</strong> $20,000-24,999<br />
<strong>Throne</strong> $25,000-34,999<br />
<strong>Cherubim</strong> $35,000-$49,999<br />
<strong>Seraphim</strong> $50,000+</p></td>
</tr>
</tbody>
</table>
<p class="content">Monthly donations count towards leadership giving. For example, $84 / month places you in the Guardian Angel society.</p>
<h2 class="section-header-container">Frequently Asked Questions<br /><span style="font-size: 16px; font-weight: normal;">(Click on each question to reveal answer.)</span></h2>
<div class="q2">
  <input id="q2" type="checkbox" />
  <label for="q2"><strong>What ministries does the Archbishop&rsquo;s Catholic Appeal support?</strong></label>
<div id="a2">
<p class="content">The Archbishop’s Catholic Appeal funds nearly forty archdiocesan programs. A partial listing includes: Archdiocesan Archives, Black Catholic Ministry, Catholic Charities, Catholic Deaf Community, Centro San Juan Diego, Child and Youth Protection, Hispanic Ministry, Hmong Catholic Community, Kateri Catholic Community, Liturgy Office, Natural Family Planning, Office of Catholic Schools, Parish Support Services, Permanent Diaconate, Redemptoris Mater Missionary Seminary, Religious Education and Pastoral Care for Persons with Developmental Disabilities, Respect Life Office, Rural Life Ministry, Saint John Vianney Theological Seminary, Social Ministry, Totus Tuus, Tribunal, Vocations, and Youth Ministry.	</p>
</div>
</div>
<div class="q3">
   <input id="q3" type="checkbox" />
  <label for="q3"><strong>Why should I donate to the Archbishop&rsquo;s Catholic Appeal?</strong></label>
<div id="a3">
<p class="content">As followers of Christ  who embodied perfect charity  we are called to support the charitable outreach efforts of our Archdiocesan Church.  People are often astounded to learn that providing for the needs of the Church is one of the &ldquo;Five Precepts of the Catholic Church.&rdquo;  (<em>Catechism of the Catholic Church</em>, #2041-2043)  Much like the faithful are asked to support the pastoral programs at their local parishes, they also are called to provide for the material needs of their wider Church -- the Archdiocese of Denver.</p>
</div>
</div>
<div class="q4">
  <input id="q4" type="checkbox" />
  <label for="q4"><strong>Why should I consider a monthly recurring gift to the Archbishop&rsquo;s Catholic Appeal?</strong></label>
<div id="a4">
<p class="content">Both the donor and the archdiocese benefit from monthly recurring gifts. For you, the process is easy and convenient. You will receive fewer philanthropic requests. The size of your gift grows significantly over a twelve-month period and you can increase, pause, or stop your monthly donation at any time. The archdiocese benefits by witnessing a reduction in postage and administrative costs, while ensuring a consistent monthly cash flow throughout the year.</p>
</div>
</div>
<div class="q5">
  <input id="q5" type="checkbox" />
  <label for="q5"><strong>I donate to the Appeal every year, so why am I asked to increase my gift?</strong></label>
<div id="a5">
<p class="content">There are many ministries that face increased demands for services every year. For example, the number of women in their sixties or older who are experiencing homelessness continues to escalate, not to mention the ever-increasing costs to educate our seminarians. It is my hope that the additional sacrifices from our faithful will help offset the surge in costs.</p>
</div>
</div>
<div class="q6">
  <input id="q6" type="checkbox" />
  <label for="q6"><strong>How much does it cost to conduct the Archbishop&rsquo;s Catholic Appeal?</strong></label>
<div id="a6">
<p class="content">Thanks to streamlined efforts, the total operating costs associated with last year’s Appeal were only 5.3%. As a result, more than 94 cents of every dollar raised was invested in archdiocesan ministries. What a 
remarkable testament to the practice of Christian stewardship. The overhead costs for the 2018 Appeal are expected to remain unchanged.</p>
</div>
</div>







</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top">
	
<table class="bottom-footer-image-1920" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/Archden_logo_white_on_black_1920x209.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="bottom-message">If you need assistance, our representatives are happy to help you. You can make a gift over the phone during regular business hours MST by calling: 303.867.0614.</p>
</td>
</tr>
</tbody>
</table>
<table class="bottom-footer-image-mobile" style="border-collapse: collapse; max-width: 288px; min-width: 100%; width: 288px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="bottom-message">If you need assistance, our representatives are happy to help you. You can make a gift over the phone during regular business hours MST by calling: 303.867.0614.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[
document.getElementById("level_standardauto_repeatname").checked = true;
// ]]></script>

Open in new window


Any ideas experts?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

I am not seeing the problem - in what way is the page not responsive - what am I a looking for?
Avatar of Mike Waller

ASKER

It doesn't appear responsive over mobile only if I take out this line of html code does it work...

 <label for="q2"><strong>What ministries does the Archbishop&rsquo;s Catholic Appeal support?</strong></label>

Open in new window


Here is the full code...

<style type="text/css"><!--
label {
    color: #222222;
    cursor: pointer;
    font-size: 1.175rem;
    font-weight: normal;
    line-height: 1.5;
}
span.FormLabelText {
 color: #222222;    
    font-size: 1.275rem;
    font-weight: bold;    
}
fieldset {
color: #222222;
  font-size: 1.275rem;
    font-weight: bold;
  } 
hr {
color:#EEEEEE;
max-width:95%;
}    
h2.section-header-container {
font-size:26px;
}
h2 {
font-size:26px;
}
h3 {
font-size:24px;
}
p.content {
font-size:20px;
text-align:left;
font-weight:normal;
margin-right:50px;
}
p.content2 {
font-size:20px;
text-align:left;
font-weight:normal;
margin-right:50px;
}
p.top-message {
font-size:26px;
text-align:center;
font-weight:bold;
color:#ffffff;
margin:15px;
}
p.bottom-message {
font-size:20px;
text-align:center;
font-weight:bold;
color:#FFFFFF;
margin:15px;
}
p.form {
margin-left:50px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {   
  .full {
    display:block;
    width:100%;
	height:auto;
	clear: both;	
	margin:20px;
  } 
  table.bottom-footer-image-1920 {
    display:none;
  }
  table.top-banner-image-1920 {
    display:none;
  }  
  table.top-banner-image-1250 {
    display:none;
  }     
  table.top-banner-image-480 {
    display:none;
  }
 div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 320px;
	border: 0px solid;
	margin: 0 auto;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .full {
    display:block;
    width:100%;
	height:auto;
	clear: both;	
	margin:20px;
  } 
  table.bottom-footer-image-1920 {
    display:none;
  }
  table.top-banner-image-1920 {
    display:none;
  } 
  table.top-banner-image-1250 {
    display:none;
  }    
  table.top-banner-image-320 {
    display:none;
  }
  div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 320px;
	border: 0px solid;
	margin: 0 auto;
}
img.footer {
width: 480px;
height: 112px;   
text-align:center;	
display: block;
margin: 0 auto;
}
}
@media only screen and (min-width: 768px)  {       
  table.bottom-footer-image-mobile {
    display:none;
  }
  table.top-banner-image-320 {
    display:none;
  }
  table.top-banner-image-480 {
    display:none;
  }
}



section {
  padding-top: 10px;
}

.q1 input {
  display: none;
  visibility: hidden;
}
.q1 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q1 label:hover {
  color: #222222;
}
.q1 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q2 input {
  display: none;
  visibility: hidden;
}
.q2 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q2 label:hover {
  color: #222222;
}
.q2 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q3 input {
  display: none;
  visibility: hidden;
}
.q3 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q3 label:hover {
  color: #222222;
}
.q3 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q4 input {
  display: none;
  visibility: hidden;
}
.q4 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q4 label:hover {
  color: #222222;
}
.q4 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q5 input {
  display: none;
  visibility: hidden;
}
.q5 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q5 label:hover {
  color: #222222;
}
.q5 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;  
}
.q6 input {
  display: none;
  visibility: hidden;
}
.q6 label {
  display: block;
  padding: 0.5em;
  text-align: left;
  color: #222222;
}
.q6 label:hover {
  color: #222222;
}
.q6 label::before {
  font-weight: bold;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 0px;  
}
#q1 {
  display: none;
  visibility: hidden;
}

#a1 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q1:checked ~ #a1 {
  height: auto; 
}
#q2 {
  display: none;
  visibility: hidden;
}

#a2 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q2:checked ~ #a2 {
  height: auto; 
}
#q3 {
  display: none;
  visibility: hidden;
}

#a3 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q3:checked ~ #a3 {
  height: auto; 
}
#q4 {
  display: none;
  visibility: hidden;
}

#a4 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q4:checked ~ #a4 {
  height: auto; 
}
#q5 {
  display: none;
  visibility: hidden;
}

#a5 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q5:checked ~ #a5 {
  height: auto; 
}
#q6 {
  display: none;
  visibility: hidden;
}

#a6 {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  color: #222222;
}
#q6:checked ~ #a6 {
  height: auto; 
}
--></style>
<table style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top">
	
<table class="top-banner-image-1250" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/ACA_web_header1.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="top-message">Please consider a recurring monthly donation.</p>
</td>
</tr>
</tbody>
</table>
<table class="top-banner-image-480" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/ACA_Mobile_header1.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="top-message">Please consider a recurring monthly donation.</p>
</td>
</tr>
</tbody>
</table>
<table class="top-banner-image-320" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/ACA_Mobile_header1.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="top-message">Please consider a recurring monthly donation.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top">
	
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="10%" align="left" valign="top">&nbsp;</td>
<td class="full" width="50%" align="left" valign="top">
<p class="form"><br /><convio:session name="63" param="3"></convio:session></p>
</td>
<td class="full" width="50%" align="left" valign="top">
<p class="content"><br /><br />Please remember that the success of this year’s Appeal cannot rely on a few who are wealthy, but upon many who are willing.  Please help me to the best of your ability. This year, the Archbishop’s Catholic Appeal is introducing nine levels of giving that correspond to the Nine Choirs of Angels.  The primary purpose for initiating these Levels of Leadership Giving is to challenge all members of our faith community to embrace their role in the life and development of our Archdiocesan Church, while also cultivating a spirit of Christian stewardship. Below you will also find a few frequently asked questions about the Appeal.</p>
<p class="content">May our Lord bless you for your charity offered in his name.</p>

<p class="content">Sincerely and gratefully yours in Christ,</p>

<p class="content"><img src="../images/content/pagebuilder/archbishop-signature.png" alt="" width="100%" style="max-width:200px;width:100%;" max-width="200px;" height="auto" /></p>

<p class="content">Most Reverend Samuel J. Aquila, S.T.L.<br />
Archbishop of Denver</p>

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="30%" align="left" valign="top"><h2 style="font-size:16px;"><img align="left" src="../images/content/pagebuilder/angel.jpg" alt="" width="100%" style="max-width:75px;width:100%;" max-width="75px;" height="auto" />Choirs of Angels<br /><span style="font-size: 16px; font-weight: normal;">Level of Leadership Giving</span></h2></td>
<td width="70%" align="left" valign="top"><p class="content"><strong>Guardian Angel</strong> $1,000-$2,499<br />
<strong>Archangel</strong> $2,500-$4,999<br />
<strong>Principality</strong> $5,000-$9,999<br />
<strong>Power</strong> $10,000-$14,999<br />
<strong>Virtue</strong> $15,000-19,999<br />
<strong>Dominion</strong> $20,000-24,999<br />
<strong>Throne</strong> $25,000-34,999<br />
<strong>Cherubim</strong> $35,000-$49,999<br />
<strong>Seraphim</strong> $50,000+</p></td>
</tr>
</tbody>
</table>
<p class="content">Monthly donations count towards leadership giving. For example, $84 / month places you in the Guardian Angel society.</p>
<h2 class="section-header-container">Frequently Asked Questions<br /><span style="font-size: 16px; font-weight: normal;">(Click on each question to reveal answer.)</span></h2>
<div class="q2">
  <input id="q2" type="checkbox" />
  <label for="q2"><strong>What ministries does the Archbishop&rsquo;s Catholic Appeal support?</strong></label>
<div id="a2">
<p class="content">The Archbishop’s Catholic Appeal funds nearly forty archdiocesan programs. A partial listing includes: Archdiocesan Archives, Black Catholic Ministry, Catholic Charities, Catholic Deaf Community, Centro San Juan Diego, Child and Youth Protection, Hispanic Ministry, Hmong Catholic Community, Kateri Catholic Community, Liturgy Office, Natural Family Planning, Office of Catholic Schools, Parish Support Services, Permanent Diaconate, Redemptoris Mater Missionary Seminary, Religious Education and Pastoral Care for Persons with Developmental Disabilities, Respect Life Office, Rural Life Ministry, Saint John Vianney Theological Seminary, Social Ministry, Totus Tuus, Tribunal, Vocations, and Youth Ministry.	</p>
</div>
</div>

</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" align="center" valign="top">
	
<table class="bottom-footer-image-1920" style="border-collapse: collapse; max-width: 100%; min-width: 100%; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top"><img src="../images/content/pagebuilder/Archden_logo_white_on_black_1920x209.jpg" alt="" width="100%" height="auto" />
	</td>
</tr>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="bottom-message">If you need assistance, our representatives are happy to help you. You can make a gift over the phone during regular business hours MST by calling: 303.867.0614.</p>
</td>
</tr>
</tbody>
</table>
<table class="bottom-footer-image-mobile" style="border-collapse: collapse; max-width: 288px; min-width: 100%; width: 288px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" height="50" align="center" valign="top" bgcolor="#006649">
<p class="bottom-message">If you need assistance, our representatives are happy to help you. You can make a gift over the phone during regular business hours MST by calling: 303.867.0614.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[
document.getElementById("level_standardauto_repeatname").checked = true;
// ]]></script>

Open in new window


Also, my site is here: http://archden.org/donate

What do you think?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I just took out the collapse/expand on that site and that fixed the mobile responsiveness.
So is the question answered or do you still have further questions?