troubleshooting Question

Webpage not mobile-responsive due to line of html code

Avatar of Mike Waller
Mike WallerFlag for United States of America asked on
Web DevelopmentCSSHTML
5 Comments1 Solution141 ViewsLast Modified:
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>

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>

Any ideas experts?
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros