Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 30.06.2016, 11:02
MisterX75 MisterX75 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2011
Ort: 23669 Timmendorfer Strand
Beiträge: 10
MisterX75 befindet sich auf einem aufstrebenden Ast
Standard Hintergrundgrafik für verschiedene Endgeräte mit Hilfe von Mediaquerys anpassen

Moin.

Beim erstellen dieser Webseite Raucherentwöhnung durch Hypnose: Richtig rauchfrei - mit Daniel Deutsch ist mir aufgefallen, dass die bereitgestellte Hintergrundgrafik sich je nach verwendetem Gerät( Iphone, Ipad, Android Tablet/Smartphone ) bzw. verwendetem Browser anderst Verhält. Nun dachte ich so bei mir ok nimmste halt die Mediaquerys und passt das ganze an. Bustekuchen.

Ich habe versucht es über pixel ratio/resolution zu lösen komme aber nicht auf das gewünschte Ergebnis. Sollte man es über min-/max-width machen ja/nein?

Gibt es gegebenenfalls andere Lösungsansätze?
Benötige ich dann auch noch verschiedene Auflösungen der Hintergrundgrafik?
Wie löse ich das Problem, dass bei manchen Endgeräten der Browser sich an einer speziell Stelle in der Hintergrundgrafik festbeißt und diese dann zoomt auf Teufel komm raus.

Fragen über Fragen und ein total verwirrter Marco.


Grüß und danke für die Hilfe im voraus.
Marco

PS:

Hier der HTML und CSS Code

HTML-Code:
<!DOCTYPE html>
<html class="full" lang="de">
    <head>
        <meta charset="utf-8">

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Raucherentw&ouml;hnung durch Hypnose: Richtig rauchfrei - mit Daniel Deutsch</title>
        <meta name="description" content="Daniel Deutsch Hypnose: Richtig rauchfrei mit Daniel Deutsch - Raucherentw&ouml;hnung durch Hypnose in L&uuml;beck. Tel: 0451 - 604414 oder 0176 - 84744045." />
        <meta name="keywords" content="Hypnose, Raucherentw&ouml;hnung, Daniel Deutsch" />
        <meta name="page-topic" content="Gesundheit, Raucherentw&ouml;hnung, Hypnose" />
        <meta name="publisher" content="Daniel Deutsch" />
        <meta name="copyright" content="Daniel Deutsch" />
        <meta name="language" content="Deutsch,German,de" />
        <meta name="robots" content="index,follow" />
        <meta name="audience" content="all" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- Custom CSS -->
        <link href="css/style.css" rel="stylesheet">
        
        <!-- Google Fonts -->
        <link href='https://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
                        
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    
    </head>

    <body>
        <!-- Kopfbereich -->
        <div id="header">
            <div class="container">
                <header  class="col-md-12">
                    <div class="headerText col-md-8 col-xs-12">
                        <p><span>Daniel&nbsp;Deutsch</span></p>
                        <p><img src="img/logo2.png" alt="Logo Hypnose Daniel Deutsch" class="img-responsive" /></p>
                        
                    </div>
                    <div class="col-xs-1"></div>
                    <div class="logo col-md-4 col-xs-12">
                        <p><a href="#">Physioterapie</a> | Hypnose</p>
                        <div class="termine">
                            <p>Termine t&auml;glich nach Vereinbarung:</p>
                            <div class="telefon">
                                <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"> 0451 - 20207214</span>
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"> 0176 - 84744045</span>
                            </div>
                        </div><!--Ende Termine -->
                    </div><!--Ende Logo -->
                </header>
            </div><!-- Ende Container -->
        </div><!--Ende Kopfbereich -->
        
        <!-- Navigation -->
        <nav class="navbar" role="navigation">
            <div class="container">
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="" id="myNavbar">
                    <ul class="nav nav-tabs nav-justified" role="tablist">
                        <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
                        <li role="presentation"><a href="#uebermich" role="tab" data-toggle="tab">&Uuml;ber mich</a></li>
                        <li role="presentation"><a href="#hypnose" role="tab" data-toggle="tab">Hypnose</a></li>
                        <li role="presentation"><a href="#fragen" role="tab" data-toggle="tab">Fragen</a></li>
                        <li role="presentation"><a href="#kontakt" role="tab" data-toggle="tab">Kontakt</a></li>
                        <li role="presentation"><a href="#impressum" role="tab" data-toggle="tab">Impressum</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
        
        <!-- Page Content -->
        <div id="content" class="container">
            <div class="row">
                <div class="tab-content">
                    <!-- Inhalt von Home-Hypno -->
                    <div role="tabpanel" class="tab-pane fade in active" id="home">
                        <h1>Herzlich willkommen!</h1>
                        <p>
                            W&uuml;nschen Sie sich Ver&auml;nderungen in Ihrem Leben und m&ouml;chten Sie dabei meine gezielte Unterst&uuml;tzung erhalten?
                            <br /><br />
                            Erz&auml;hlen Sie mir, worum es geht ...
                        </p>
                        <ul>
                            <li><h2>Raucherentw&ouml;hnung</h2></li>
                            <li><h2>Gewichtsoptimierung</h2></li>
                            <li><h2>Kinder-/Elternhypnose</h2></li>
                            <li><h2>Selbstwertgef&uuml;hl</h2></li>
                            <li><h2>Selbstbewusstsein</h2></li>
                            <li><h2>Blockadenl&ouml;sung</h2></li>
                            <li><h2>Konfliktbew&auml;ltigung</h2></li>
                            <li><h2>&Auml;ngste/Furcht (nicht patholog.)</h2></li>
                            <li><h2>Allergien</h2></li>
                            <li><h2>Entspannung bei Pr&uuml;fungen</h2></li>
                            <li><h2>Sch&uuml;chternheit</h2></li>
                            <li><h2>Entscheidungsfindung</h2></li>
                            <li><h2>Aktivieren von Selbstheilungskr&auml;ften</h2></li>
                            <li><h2>Schlafverbesserungen</h2></li>
                            <li><h2>Wellness-Hypnose</h2></li>
                            <li>u.v.m.</li>
                        </ul>
                        Ich helfe Ihnen gern ...
                    </div><!-- Ende Home-Hypno -->
                    
                    <!-- Inhalt von Über mich -->
                    <div role="tabpanel" class="tab-pane fade in" id="uebermich">
                        <div class="col-md-7">
                        <h1>Über mich</h1>
                        <p>
                            Ich bin verheiratet und habe zwei Kinder. Neben meiner Familie ist es auch meine Lebensaufgabe, Menschen mit dem Wunsch nach Ver&auml;nderung durch Hypnose zu helfen.
                            <br /><br />
                            Ich bin ausgebildeter Hypnose-Coach und IntuTrance&reg;-Master auch f&uuml;r Eltern und Kinder. Als Physiotherapeut betreibe ich eine weitere Praxis in L&uuml;beck-Eichholz (<a href="http://www.physiotherapie-eichholz.de" target="_top" title="www.physiotherapie-eichholz.de">physiotherapie-eichholz.de</a>). Auch hier finden regelm&auml;&szlig;ig Hypnose-Sitzungen statt.
                            <br /><br />
                            Meine Arbeit mit Hypnose bezeichne ich als gezielte Hilfe f&uuml;r Menschen mit unterschiedlichen Problemen - dem Wunsch nach Ver&auml;nderung, Aufkl&auml;rung, Beratung und Entspannung.
                            <br /><br />
                            Sind Sie zufrieden? W&uuml;nschen Sie sich Ver&auml;nderung?
                            <br />
                            Vertrauen Sie Ihrem Bauchgef&uuml;hl ...
                        </p>
                        </div>
                        <div class="img_rechts col-md-5">
                            <img src="img/daniel_img.jpg" class="img-responsive" style="float: right; border: 1px solid #fff; border-radius: 50px 0px;" />
                            <p>
                                Zufriedenheit ist das Ziel ...
                            </p>
                        </div>
                    </div><!-- Ende Über mich -->
                    
                    <!-- Inhalt von Hypnose -->
                    <div role="tabpanel" class="tab-pane fade in" id="hypnose">
                        <h1>Hypnose</h1>
                        Hypnose ist die Arbeit mit dem Unterbewusstsein, in dem sich unz&auml;hlige M&ouml;glichkeiten f&uuml;r Erkenntnisse und L&ouml;sungen befinden. Hierbei sind Sie in Trance. Es gibt verschiedene Trance-Zust&auml;nde, von denen Sie sogar einige kennen, ohne dass es Ihnen vielleicht bewusst ist.
                        <br /><br />
                        Ich freue mich dar&uuml;ber, dass die Ergebnisse meiner Sitzungen als aufkl&auml;rend, richtig und auch als wohltuend bezeichnet werden.
                        <br /><br />
                        Gerne erkl&auml;re ich Ihnen ausf&uuml;hrlich alles &uuml;ber Hypnose, was Sie wissen wollen, in einem pers&ouml;nlichen Gespr&auml;ch.
                        <br />
                        Selbstverst&auml;ndlich kostenlos. Hier entscheiden wir, ob das entsprechende Vertrauen und Bauchgef&uuml;hl f&uuml;r eine Zusammenarbeit gegeben ist. Hierzu z&auml;hlt auch eine einfache Hypnose-&Uuml;bung, um zu erkennen, ob Sie zu einer Hypnose-Sitzung bereit sind.
                        <br /><br />
                        F&uuml;r Fragen und Antworten stehe ich Ihnen gerne kostenfrei zur Verf&uuml;gung oder schauen Sie unter der Kategorie "Fragen".
                    </div><!-- Ende Hypnose -->
                    
                    <!-- Inhalt von Fragen -->
                    <div role="tabpanel" class="tab-pane fade in" id="fragen">
                        <div class="col-md-12">
                        <h1>Häufig gestellte Fragen</h1>
                        <p>
                        <h2><b>Ist Hypnose gef&auml;hrlich?</b></h2>
                        F&uuml;r Menschen ohne bestimmte Erkrankungen nicht. M&ouml;gliche Kontraindikationen werden im Vorgespr&auml;ch erfasst.
                        <br /><br />
                        <h2><b>Wei&szlig; ich in Trance &uuml;berhaupt, was um mich herum passiert?</b></h2>
                        Selbstverst&auml;ndlich, und Sie k&ouml;nnen die Sitzung sogar zu jedem Zeitpunkt abbrechen, wenn Ihnen unwohl ist.
                        <br /><br />
                        <h2><b>Was kostet eine Hypnose-Anwendung und wie viele Sitzungen sind n&ouml;tig?</b></h2>
                        Eine durchschnittlich 90 min&uuml;tige Daniel-Deutsch-Hypnose-Sitzung ist normalerweise ausreichend, um das gew&uuml;nschte Ziel zu erreichen. Mein Honorar hierf&uuml;r betr&auml;gt 150,- &euro; und kann mit EC-Karte oder bar bezahlt werden. <!-- Meine Leistung berechne ich mit &euro; 150,- -->
                        Sollte eine weitere oder mehrere Sitzung(en) bez&uuml;glich eines Themas (Hypnose, Beratung, Coaching) gewünscht oder ggf. nötig sein, berechne ich diese mit 80,- &euro; pro Sitzung.
                        <br /><br />
                        <h2><b>Ich bin unsicher. Darf ich eine Begleitperson mitbringen?</b></h2>
                        Sie d&uuml;rfen gerne eine Begleitperson mitbringen, die w&auml;hrend der Sitzung anwesend ist.
                        <br /><br />
                        <h2><b>Was muss ich vor der Hypnose beachten?</b></h2>
                        Konsumieren Sie bitte keinen Alkohol und keine Drogen. Bitte vermeiden Sie am Tag der Hypnose-Sitzung vorhersehbaren, belastenden Stress, damit die Hypnose f&uuml;r Sie optimal wirken kann!
                        <br /><br />
                        <h2><b>Was muss ich nach der Hypnose beachten?</b></h2>
                        In den ersten drei Folgetagen vermeiden Sie bitte Alkohol-/Drogenkonsum, damit die Hypnosesitzung optimal wirken kann. Es gibt Ver&auml;nderungen, die sich nicht sofort, sondern erst in der Folgezeit entsprechend entwickeln k&ouml;nnen.
                        <br /><br />
                        <h2><b>Wo findet die Hypnosesitzung statt?</b></h2>
                        In der Luisenstra&szlig;e 1, 23568 L&uuml;beck
                        <br />
                        HYPNOSE-Praxis Daniel Deutsch
                        <br />
                        und
                        <br />
                        Im Brandenbaumer Feld 9, 23564 L&uuml;beck
                        <br />
                        <a href="http://www.physiotherapie-eichholz.de" target="_top" title="www.physiotherapie-eichholz.de">Praxis f&uuml;r Physiotherapie und Hypnose</a>
                        <br /><br />
                        Hausbesuche mache ich nach Absprache ebenfalls gern!
                        
                        <br /><br />
                        <h2><b>Sie haben weitere Fragen?</b></h2>
                        Dann rufen Sie einfach an:
                        <p class="telefon">
                            <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"> 0451 - 20 20 72 14</span>
                        </p>
                        <p class="telefon">
                            <span class="glyphicon glyphicon-phone" aria-hidden="true"> 0176 - 84 74 40 45</span>
                        </p>
                        oder nutzen Sie das <a href="/kontakt/index.php" title="Kontaktformular">Kontaktformular</a>.
                        </p></div>
                    </div><!-- Ende Fragen -->
                    
                    <!-- Inhalt von Kontakt -->
                    <div role="tabpanel" class="tab-pane fade in" id="kontakt">
                        <div class="col-md-12">
                            <h1>Kontakt</h1><br />
                            <b>Sie haben weitere Fragen oder m&ouml;chten Termine vereinbaren?</b><br /><br />
                            Dann rufen Sie einfach an:
                            <br /><br />
                            <p>
                                <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"> 0451 - 20 20 72 14</span>
                            </p>
                            <p>
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"> 0176 - 84 74 40 45</span>
                            </p>
                            <hr class="hr1" />
                            <p class="adresse">
                                Luisenstra&szlig;e 1
                                <br />
                                23568 L&uuml;beck
                            </p>
                            <hr class="hr2" />
                            <p class="adresse">
                                Im Brandenbaumer Feld 9
                                <br />
                                23564 L&uuml;beck
                            </p>
                            <hr class="hr3" />
                            <p>
                                Parkpl&auml;tze sind vorhanden.
                            </p>
                        </div>
                        
                        <div class="col-md-12">
                            <form id="frmKontakt" role="form" name="kontaktFormular" accept-charset="UTF-8">
                                <div class="row">                        
                                    <div class="col-lg-12">
                                        
                                        <!-- Ausgabe der Meldungen vom Kontaktformular -->
                                        <div id="erfolgsmeldung" class="col-lg-6" role="alert"></div>
                                        <!-- Ende Ausgabe der Meldungen vom Kontaktformular -->
                                        
                                    </div>
                                    
                                    <div class="col-lg-4">
                                        <div class="form-group has-feedback" id="frmGrpNachname">
                                            <label class="control-label" for="nachname">Nachname <span>*</span></label>
                                            <input type="text" class="form-control" id="nachname" placeholder="Mustermann">
                                            <span class="nachnameStatus" aria-hidden="true"></span>
                                            <span id="nachnameStatus" class="sr-only">(Fehler)</span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-4">
                                        <div class="form-group has-feedback" id="frmGrpEmail">
                                            <label class="control-label" for="email">Email Adresse <span>*</span></label>
                                            <input type="text" class="form-control" id="email" placeholder="Mustermann@muster.de" />
                                            <span class="emailStatus" aria-hidden="true"></span>
                                            <span id="emailStatus" class="sr-only">(Fehler)</span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-4">
                                        <div class="form-group" id="frmGrpTelefon">
                                            <label for="phone">Telefonnummer</label>
                                            <input type="text" class="form-control" id="phone" placeholder="01234/56789" />
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-12">
                                        <div class="form-group has-feedback" id="frmGrpNachricht">
                                            <label class="control-label" for="nachricht">Ihre Nachricht an uns <span>*</span></label>
                                            <textarea class="form-control" id="nachricht" placeholder="Hier Ihre Nachricht schreiben..." rows="6"></textarea>
                                            <span class="nachrichtStatus" aria-hidden="true"></span>
                                            <span id="nachrichtStatus" class="sr-only">(Fehler)</span>
                                        </div>
                                    </div>
                                    
                                    <div id="txt_Pfilchtfelder" class="form-group text-left">
                                        <small>Die mit <span>*</span> markierten Felder sind Pflichtfelder!</small>
                                    </div>  
                                                                
                                    <div class="form-group text-right">
                                        <button class="btn btn-default">Nachricht versenden</button>
                                    </div>                        
                                </div><!-- Ende row Kontaktformular -->
                                
                            </form>
                        </div>
                    </div><!-- Ende Kontakt -->
                    
                    <!-- Inhalt von Impressum -->
                    <div role="tabpanel" class="tab-pane fade in" id="impressum">
                        <h1>Impressum</h1><br />
                    </div><!-- Ende Kontakt -->
                </div><!-- Ende tabcontent -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    
        <!-- jQuery -->
        <script src="js/jquery-2.1.4.min.js"></script>
    
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
        
        <!-- Kontaktformular JS -->
        <script src="js/kontaktFormular.js"></script>

    </body>
</html>
HTML-Code:
/*!
 * Start Bootstrap - The Big Picture HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    margin-top: 0px;
    margin-bottom: 50px;
    background: none;
    color: #ededed;
    font-size: 16px;
    /*font-family: sans-serif;*/
    font-family: 'Ubuntu', sans-serif;
}

nav{
    width: 100%;
}

a{
    text-decoration: none;
    color: #EDEDED;
}

a:visited, a:link, a:active, a:hover{
    text-decoration: none;
    outline: none;
}

hr{
    display: block;
    margin: 10px 0;
    height: 1px;
    background: #fff;
    width: 100%;
}


/*********************** ID ******************************/
#header{
    margin-bottom: 20px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7392af+0,4f6d8f+50,1d354d+100 */
    background: #7392af; /* Old browsers */
    background: -moz-linear-gradient(left, #7392af 0%, #4f6d8f 50%, #1d354d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #7392af 0%,#4f6d8f 50%,#1d354d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #7392af 0%,#4f6d8f 50%,#1d354d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7392af', endColorstr='#1d354d',GradientType=1 ); /* IE6-9 */
    color: rgba(255, 255, 255, 0.35);/*#fff;*/
}

#oeffnungszeiten h3{
    font-size: 18px;
}

#oeffnungszeiten h4{
    font-size: 16px;
}

#content{
    min-width: 320px;
    max-width: 960px;
    background-color: rgba(0,0,0,0.25);
}

#home h2{
    font-size: 15px;
}

#uebermich > p >  a{
    text-decoration: none;
    border-bottom: 1px solid #fff;
    color: #EDEDED;
}

#uebermich > p > a:hover{
    text-decoration: none;
    border-bottom: 2px solid #ff0000;
    color: #EDEDED;
}

#fragen h2{
    font-size: 18px;
}

#fragen p{
    padding-bottom: 15px;
}

#fragen .telefon{
    padding-bottom: 0;
}

#fragen .telefon .glyphicon{
    font-size: 16px;
}

#kontakt p:last-child{
    font-size: 18px;
}

#kontakt p > span:before{
    font-size: 16px;
}

#map{
    width: 100%;
    height: 400px;
    /*margin-top: 50px;*/
    background-color: #ccc;
}




/************************************ Class *********************/
.full {
  background: url(../img/beach_bg.jpg) #000 no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.glyphicon{
    font-size: 20px;
}

.tab-content{
    margin-bottom: 15px;
}

.headerText{
    padding-top: 20px;
    font-size: 48px;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.headerText > p:first-child{
    color: rgba(255, 255, 255, 0.9);
    font-size: 54px;
    text-transform: none;
    margin-bottom: 0px;
    font-family: serif;
    /*text-align: center;*/
}

.headerText > p:last-child{
    margin-left: 32px;
    /*text-align: center;
    text-transform: none;*/
}

.headerText span{
    margin-left: 15px;
    /*text-transform: none;*/
}

.logo{
    text-align: left;
    padding: 10px 0px 0px 95px;
    color: rgba(255, 255, 255, 0.8);
}

.logo > p:first-child{
    font-size: 16px;
}

.img_rechts{
    margin-top: 20px;
}

.termine{
    text-align: left;
    padding-top: 10px;
    font-size: 16px;
}

.tab-content{
    margin-left: 10px;
}

.top{
    margin-bottom: 20px;
}

.bottom{
    margin-top: 20px;
    float: left;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover{
    background-color: rgba(0, 0, 0, 0.5);
    color: #ededed;
}

.img_rechts > p{
    font-family: 'Tangerine';
    font-weight: 700;
    font-size: 40px;
    clear: right;
    float: right;
    margin-top: 25px;
}

.adresse{
    font-size: 20px;
}

.telefon{
     margin-top: 1px;
     font-size: 16px;
}

.hr2{
    width: 75%;
}

.hr3{
    width: 50%;
}

.text-right{
    padding-right: 15px;
}

.has-error .form-control{
    border: 3px solid #990000;
}

.form-control:focus{
    border: 3px solid #16A9DA;
    box-shadow: ;
}

.has-error .control-label{
    color: #FF1711;
}

.has-error .form-control {
    border: 3px solid #FF1711;
}

.has-error .form-control-feedback {
    color: #FF1711;
}





/*********************************** Landscape *******************************************/
@media
    screen and ( -webkit-min-device-pixel-ratio: 3) and ( orientation: landscape),
    screen and ( min-resolution: 288dpi) and ( orientation: landscape),
    screen and ( min-resolution: 3dppx) and ( orientation: landscape){
        .full {
            background: url(../img/beach_bg.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 42px;
        letter-spacing: 2px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            padding-left: 35px;
            margin-bottom: 10px;
        }
        .glyphicon-phone::before{
            padding-left: 20px;
        }
    }
    

@media
    screen and ( -webkit-min-device-pixel-ratio: 2) and ( orientation: landscape),
    screen and ( min-resolution: 192dpi) and ( orientation: landscape),
    screen and ( min-resolution: 2dppx) and ( orientation: landscape){
        .full {
            background: url(../img/beach_bg_568.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 42px;
        letter-spacing: 2px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            padding-left: 35px;
            margin-bottom: 10px;
        }
        .glyphicon-phone::before{
            padding-left: 20px;
        }
    }
   
@media
    screen and ( -webkit-min-device-pixel-ratio: 1) and ( orientation: landscape),
    screen and ( min-resolution: 96dpi) and ( orientation: landscape),
    screen and ( min-resolution: 1dppx) and ( orientation: landscape){
        .full {
            background: url(../img/beach_bg_320_land.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 32px;
        letter-spacing: 2px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            padding-left: 35px;
            margin-bottom: 10px;
        }
        .glyphicon-phone::before{
            padding-left: 0px;
        }
    }

/*********************************** Portrait ******************************************/    
@media
    screen and ( -webkit-min-device-pixel-ratio: 3) and ( orientation: portrait),
    screen and ( min-resolution: 288dpi) and ( orientation: portrait),
    screen and ( min-resolution: 3dppx) and ( orientation: portrait){
        .full {
            background: url(../img/beach_bg_320_port.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 30px;
        letter-spacing: 2px;
        padding-left: 5px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            margin-bottom: 10px;
        }
    }


@media
    screen and ( -webkit-min-device-pixel-ratio: 2) and ( orientation: portrait),
    screen and ( min-resolution: 192dpi) and ( orientation: portrait),
    screen and ( min-resolution: 2dppx) and ( orientation: portrait){
        .full {
            background: url(../img/beach_bg_568.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 30px;
        letter-spacing: 2px;
        padding-left: 5px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            margin-bottom: 10px;
        }
    }

@media
    screen and ( -webkit-min-device-pixel-ratio: 1) and ( orientation: portrait),
    screen and ( min-resolution: 96dpi) and ( orientation: portrait),
    screen and ( min-resolution: 1dppx) and ( orientation: portrait){
        .full {
            background: url(../img/beach_bg_320_port.jpg) #000 no-repeat center center fixed;
        }
        .headerText > p:first-child{
        font-size: 32px;
        letter-spacing: 2px;
        }
        .headerText > p:last-child{
            margin-left: 0;
        }
        .logo{
            font-size: 13px;
            text-align: left;
            padding-left: 35px;
            margin-bottom: 10px;
        }
        .glyphicon-phone::before{
            padding-left: 0px;
        }
    }
Mit Zitat antworten
Sponsored Links