Cannot get text to be responsive

smitty62
smitty62 used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
I took out all the <br> and it started looking a lot better on the edges (not sure why).

Commented:
This can help too
word-wrap: break-word;
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.
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

Author

Commented:
Thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial