| MisterX75 |
30.06.2016 11:02 |
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. :lol:
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öhnung durch Hypnose: Richtig rauchfrei - mit Daniel Deutsch</title>
<meta name="description" content="Daniel Deutsch Hypnose: Richtig rauchfrei mit Daniel Deutsch - Raucherentwöhnung durch Hypnose in Lübeck. Tel: 0451 - 604414 oder 0176 - 84744045." />
<meta name="keywords" content="Hypnose, Raucherentwöhnung, Daniel Deutsch" />
<meta name="page-topic" content="Gesundheit, Raucherentwö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 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ä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">Ü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ünschen Sie sich Veränderungen in Ihrem Leben und möchten Sie dabei meine gezielte Unterstützung erhalten?
<br /><br />
Erzählen Sie mir, worum es geht ...
</p>
<ul>
<li><h2>Raucherentwöhnung</h2></li>
<li><h2>Gewichtsoptimierung</h2></li>
<li><h2>Kinder-/Elternhypnose</h2></li>
<li><h2>Selbstwertgefühl</h2></li>
<li><h2>Selbstbewusstsein</h2></li>
<li><h2>Blockadenlösung</h2></li>
<li><h2>Konfliktbewältigung</h2></li>
<li><h2>Ängste/Furcht (nicht patholog.)</h2></li>
<li><h2>Allergien</h2></li>
<li><h2>Entspannung bei Prüfungen</h2></li>
<li><h2>Schüchternheit</h2></li>
<li><h2>Entscheidungsfindung</h2></li>
<li><h2>Aktivieren von Selbstheilungskrä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änderung durch Hypnose zu helfen.
<br /><br />
Ich bin ausgebildeter Hypnose-Coach und IntuTrance®-Master auch für Eltern und Kinder. Als Physiotherapeut betreibe ich eine weitere Praxis in Lübeck-Eichholz (<a href="http://www.physiotherapie-eichholz.de" target="_top" title="www.physiotherapie-eichholz.de">physiotherapie-eichholz.de</a>). Auch hier finden regelmäßig Hypnose-Sitzungen statt.
<br /><br />
Meine Arbeit mit Hypnose bezeichne ich als gezielte Hilfe für Menschen mit unterschiedlichen Problemen - dem Wunsch nach Veränderung, Aufklärung, Beratung und Entspannung.
<br /><br />
Sind Sie zufrieden? Wünschen Sie sich Veränderung?
<br />
Vertrauen Sie Ihrem Bauchgefü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ählige Möglichkeiten für Erkenntnisse und Lösungen befinden. Hierbei sind Sie in Trance. Es gibt verschiedene Trance-Zustände, von denen Sie sogar einige kennen, ohne dass es Ihnen vielleicht bewusst ist.
<br /><br />
Ich freue mich darüber, dass die Ergebnisse meiner Sitzungen als aufklärend, richtig und auch als wohltuend bezeichnet werden.
<br /><br />
Gerne erkläre ich Ihnen ausführlich alles über Hypnose, was Sie wissen wollen, in einem persönlichen Gespräch.
<br />
Selbstverständlich kostenlos. Hier entscheiden wir, ob das entsprechende Vertrauen und Bauchgefühl für eine Zusammenarbeit gegeben ist. Hierzu zählt auch eine einfache Hypnose-Übung, um zu erkennen, ob Sie zu einer Hypnose-Sitzung bereit sind.
<br /><br />
Für Fragen und Antworten stehe ich Ihnen gerne kostenfrei zur Verfü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ährlich?</b></h2>
Für Menschen ohne bestimmte Erkrankungen nicht. Mögliche Kontraindikationen werden im Vorgespräch erfasst.
<br /><br />
<h2><b>Weiß ich in Trance überhaupt, was um mich herum passiert?</b></h2>
Selbstverständlich, und Sie kö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ötig?</b></h2>
Eine durchschnittlich 90 minütige Daniel-Deutsch-Hypnose-Sitzung ist normalerweise ausreichend, um das gewünschte Ziel zu erreichen. Mein Honorar hierfür beträgt 150,- € und kann mit EC-Karte oder bar bezahlt werden. <!-- Meine Leistung berechne ich mit € 150,- -->
Sollte eine weitere oder mehrere Sitzung(en) bezüglich eines Themas (Hypnose, Beratung, Coaching) gewünscht oder ggf. nötig sein, berechne ich diese mit 80,- € pro Sitzung.
<br /><br />
<h2><b>Ich bin unsicher. Darf ich eine Begleitperson mitbringen?</b></h2>
Sie dürfen gerne eine Begleitperson mitbringen, die wä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ü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änderungen, die sich nicht sofort, sondern erst in der Folgezeit entsprechend entwickeln können.
<br /><br />
<h2><b>Wo findet die Hypnosesitzung statt?</b></h2>
In der Luisenstraße 1, 23568 Lübeck
<br />
HYPNOSE-Praxis Daniel Deutsch
<br />
und
<br />
Im Brandenbaumer Feld 9, 23564 Lübeck
<br />
<a href="http://www.physiotherapie-eichholz.de" target="_top" title="www.physiotherapie-eichholz.de">Praxis fü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ö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ße 1
<br />
23568 Lübeck
</p>
<hr class="hr2" />
<p class="adresse">
Im Brandenbaumer Feld 9
<br />
23564 Lübeck
</p>
<hr class="hr3" />
<p>
Parkplä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;
}
}
|
