Solved

bootstrap fails in mobile version

Posted on 2014-02-27
4
277 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

863 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now