Solved

bootstrap fails in mobile version

Posted on 2014-02-27
4
284 Views
Last Modified: 2014-02-28
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
0
Comment
Question by:nsitedesigns
  • 3
4 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39893535
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39893537
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
 

Author Comment

by:nsitedesigns
ID: 39894861
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39894912
That will work. You just want to add css under the media query @media (min-width: 769px){
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question