bootstrap fails in mobile version

site fails in mobile phone version.  The background disappears, the fonts are wrong, etc.  What did I do?

Beta
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/rfq.html

screenshot
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/rfq.html
nsitedesignsAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
That will work. You just want to add css under the media query @media (min-width: 769px){
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Do you see where you have
@media (min-width: 769px)
h1 {
color: #363;
font-weight: normal;
padding-left: 30px;
font-size: 2.25em;
}

Open in new window

That is saying once the viewport goes below 769, all bets are off...

So
@media (max-width: 768px)
h1 {
/*change font size as needed */
color: #363;
font-weight: normal;
padding-left: 30px;
font-size: 2.25em;
}

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
probably add to that..


@media (max-width: 768px){
h1 {
/*change font size as needed */
color: #363;
font-weight: normal;
padding-left: 30px;
font-size: 2.25em;
}
.content{background-color:white;}

}

Open in new window


I forgot the curly brackets in  my first post
@media (max-width: 768px){
   /* classes go here */
   .something{font-size:20px;}
}
0
 
nsitedesignsAuthor Commented:
Hi Scott,

Did you mean this code below?  I could not find the one you mentioned.  
div.logophone div{position: absolute;bottom: 30px;right: 0;}
@media (min-width: 769px){ 
	.logotext div.companyname{
		margin-left:90px;
		text-align:left;
		font:  Verdana, Arial, Helvetica, sans-serif;
		font-size: 2.3em;
    }

Open in new window

0
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.

All Courses

From novice to tech pro — start learning today.