When I add text,to display over the header image, it moves the image in the viewport.
On my desktop screen it looks fine, but when I make the text bigger, or more font weight, the part of the header image that I want displaying, in the iPhone view, moves out of frame to the right. Should I have two images, one for desktop view and one for iPhone view? Or is there an easier way?
Here’s my current code (regarding the text in box-9):
.box-9
{
margin:10% 0 0 0;
color:#fff;
opacity: 0.7;
font-size:55px;
font-weight: 500;
font-family:arial;
}
.box-9 span{
font-weight: 800;
display:block;
line-height: 95%;
}
@media screen and (max-width:600px) {
.box-9
{
margin:0;
color:#fff;
opacity: 0.7;
font-size:34px;
font-family:arial;
}
.box-9 span
{
font-weight: bold;
display:block;
line-height: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="" />
<title></title>
<link rel="shortcut icon" href="assets/images/gt_favicon.png">
<link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Custom styles for our template -->
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen" >
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="css/main-page.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<style>
.url{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function submitForm() {
document.getElementById('go').click();
}
</script>
</head>
<body class="home">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top headroom" >
<div class="container">
<div class="navbar-header">
<!-- Button for smallest screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href=""><img src="/images/Header.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a href="../mobile.html"></a></li>
<li><a href=""></a></li>
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="sidebar-left.html">Left Sidebar</a></li>
<li class="active"><a href="sidebar-right.html">Right Sidebar</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Header -->
<header id="head">
<div class="box-9">
<div class="container text-left">
<span>TEXT text</span>
<span>text TEXT</span>
<span>text text</span>
<!--</div>-->
</div>
<div class="sbox1">
<span style="color:#000000;">"</span>
<span style="color:#ff0000;font-weight: 300;"></span>
</div>
</div>
</header>
<!-- /Header -->
<div class="jumbotron-1">
<h3 class="thin4">
<span></span>
<span></span>
<span></span>
<img src="../images/chevron1.png" alt="">
</h3>
</div>
<div class="jumbotron-0">
<div class="container text-center">
<span style="color:#ffd88c;"><br></span>
<span style="color:#ffffff;"></span>
<span style="color:#ff8a8a; font-size:24px;"></span>
</div>
</div>
<!-- Intro -->
<div class="j90">
<div class="nowrap1">
<div class="box1 left">
<span style="color:#282828; font-weight:800;"></span>
</div>
<div class="box1 right">
<h3 class="thin"><br></h3>
</div>
</div>
<div class="header90">
<span><br>
</span>
<div id="jumbo">
<div class="container text-center">
<h3 class="thin06">
</div>
</div>
</div>
<div class="contact">
<div class="container">
<!--<div class="row">-->
<!-- Article main content -->
<article class="col-sm-9 maincontent">
<header class="page-header">
<h3 class="page-title"></h3>
</header>
<p>
</p>
<br>
<form action='../ad/submit.php' method='post' name='myform' onSubmit="return checkemail()">
<div class="row">
<div class="col-sm-4">
<input class="form-control" type="text" id="name" name='name' placeholder="Name">
</div>
<div class="col-sm-4">
<input class="form-control" type="email" id="email" name='email' placeholder="Email">
</div>
</div>
<div>
<input name="url" type="text" id="url" class="url">
</div>
<br>
<div class="row">
<div class="col-sm-12">
<textarea name='message' placeholder="" class="form-control" rows="9"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<br>
<input class="btn btn-action" type='submit' value="Send">
<br><br><br>
</div>
</div>
<!--</div>-->
</form>
</article>
<!-- /Article -->
</div>
</div>
<!-- Social links. @TODO: replace by link/instructions in template -->
<section id="social">
<div class="container">
<div class="wrapper clearfix">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_linkedin_counter"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
</section>
<!-- /social links -->
<footer id="footer">
<div class="footer1">
<div class="container">
<div class="row">
<div class="col-md-3 widget">
<div class="widget-body">
</div>
</div>
<div class="col-md-3 widget">
<h3 class="widget-title">Follow us</h3>
<div class="widget-body">
<p class="follow-me-icons">
<a href="https://www.twitter.com"><i class="fa fa-twitter fa-2"></i></a>
<a href="https://www.instagram.com"><i class="fa fa-instagram fa-2"></i></a>
<a href="https://www.facebook.com"><i class="fa fa-facebook fa-2"></i></a>
</p>
</div>
</div>
<div class="col-md-6 widget">
<h3 class="widget-title"></h3>
<div class="widget-body">
<p></p>
<p></p>
</div>
</div>
</div> <!-- /row of widgets -->
</div>
</div>
<div class="footer2">
<div class="container">
<div class="row">
<div class="col-md-6 widget">
</div>
<div class="col-md-6 widget">
<div class="widget-body">
</div>
</div>
</div> <!-- /row of widgets -->
</div>
</div>
</footer>
<!-- JavaScript libs are placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="assets/js/headroom.min.js"></script>
<script src="assets/js/jQuery.headroom.min.js"></script>
</body>
</html>