Solved

bootstrap fails in mobile version

Posted on 2014-02-27
4
292 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 53

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 53

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 53

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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
hbo knew my windows software 4 90
How to remove a section of the main menu from Magento 1.9.3 3 70
type of website 13 54
Developers / Staff Setup 10 48
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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