Cannot get text to be responsive

This site look fine on the desktop, however, when I looked at it on my phone it looked terrible.  I do have bootstrap and I have reworked the code numerous times, but I just can't get this top banner (especially the title) to be responsive.  I also cannot get the text to come away from the edges.  I've tried padding & margins in several different ways, but it's just not happening.  

http://insurance.illinois.gov/defaultEnrollment.html

...I made some alterations and it is working better now on mobile, but how do I get header tags to be responsive?
smitty62Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

smitty62Author Commented:
I took out all the <br> and it started looking a lot better on the edges (not sure why).
1
user_nCommented:
This can help too
word-wrap: break-word;
0
Slick812Commented:
greetings  smitty62 , , ,  I looked at your HTML in the div -
       <div class="responsive" style="background-color:#FFF">

and there are CSS things you that you have in there, that do Not have any effect on this display, especially to have it changing to display better on phones. AND you have Incorrect use of attributes in tags, as you have this -
       <p style="color:#ed7428" style="padding-right:3px; padding-left:3px">
you are NOT suppose to have TWO "style" attributes in any tag.

It is also very recommended that people should NOT use "inline style" that are inside of a tag like <p>. . .  It is much better if you have the CSS for elements in a <style> tag or in a CSS style sheet file.

Also in BootStrap, there is good classes to be used for ROW - COLUMN display, But for a "Custom" Non-Column display , like you have here, Bootstrap may not offer many things to help you. Also Just adding the Bootstrap class "Responsive" to a <div> does Not do anything to make it have the display that you think you want for phones.

I did the code I show next in firefox, so it had a display that seemed tolerable in tablets and phones, It uses just CSS (no bootstrap), because you have a FULL SCREEN width of your <div> container and there are no columns in it.
I give the container <div> an ID of  id="topBan"  to use in the CSS <style> tag so it will be Unique to this page elements. See code below -
<style>
#topBan {
background-color:#fff;
}

#topBan a {
text-decoration:none;
display: block;
text-align: center;
padding: 0.3em;
color:#ed7428;
}

#topBan h3 {
/*font-size:larger;*/
font-weight:bold;
font-size: 180%;
}

#topBan h3 img{
width: 13%;
max-width: 170px;
min-width: 110px;
margin-right: 3%;
}

.lm3 {
margin-left: 3%;
}

#imgBr {
display: none;
}

#tlBr {
display: none;
}

@media screen and (max-width: 953px){
#imgBr {display: inline;}
#topBan h3 img{margin: 0;}
}

@media screen and (max-width: 757px){
#topBan h3 {font-size: 140%;}
}

@media screen and (max-width: 610px){
#tlBr {display: inline;}
#topBan h3 {font-size: 130%;}
}
</style>


<div id="topBan">    
  <a href="https://getcoveredillinois.gov/">
    <h3><img src="http://insurance.illinois.gov/images/getcoveredillinoisTransparent.jpg" /><br id="imgBr" />Open Enrollment<br id="tlBr" /> November 1 - December 15<span class="lm3">(866) 311-1119</span></h3>
    <p><b>Starting November 1, 2017,</b> the Department of Insurance will significantly increase the operating hours for the Get Covered Illinois help line, 1-866-311-1119.</p>
    <p>This year, licensed agents will be available Monday &mdash; Friday from 7:00 a.m. to 8:00 p.m., except on Thanksgiving Day, and Saturdays &amp; Sundays from 8:00 a.m. to 6:00 p.m.</p>
    <p>Additionally, beginning on November 1, 2017, GetCoveredIllinois.gov will provide consumers with a comprehensive look at all plan options available.</p>
  </a>
</div>

Open in new window


I removed your   <div class="row">  tag and then gave the <a> element a CSS of    display: block;     to take the place of the <div> removed which had a display of block.

Please notice the @media  max-width CSS I use here like -
     @media screen and (max-width: 953px){

these customize the Display for better views in tablets and phones.

Ask question if you need more information.
0
lenamtlCommented:
This is because the is a missing div col
Find this
 <div class="responsive" style="background-color:#FFF">    
        <div class="row">

Open in new window

then add a
<div class="col-sm-12">

Open in new window

and close the div before the slider this should fix the problem

You can do the same for the slider and put it on row/col div
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smitty62Author Commented:
Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.