Struggling with resizing text and buttons on a website built from a template for class. Looking to ensure that the text remains visible even when the window size changes.
Ideally, I want the page content to stay anchored so the focus remains on the text/buttons as the window is resized, specifically keeping the bottom right corner of an image in view.
This is the HTML code being used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- This tells mobile devices not to zoom out the page, start with scale=1 -->
<link rel="stylesheet", type="text/css", href="Vendors/css/normalize.css">
<link rel="stylesheet", type="text/css", href="Vendors/css/grid.css">
<link rel="stylesheet", type="text/css", href="Vendors/css/ionicons.min.css">
<link rel="stylesheet", type="text/css", href="Resources/css/style.css">
<link rel="stylesheet", type="text/css", href="Resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Whitetail Acres Tree Farm</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li><a href="#features">Food Delivery</a></li>
<li><a href="#meals">How it Works</a></li>
<li><a href="#steps">Our Cities</a></li>
<li><a href="#cities">Sign up</a></li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
<div class="hero-text-box">
<h1>Schedule <br> Your Visit!</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
And here is the CSS code:
/* Universal Reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html
{
background-color: #ffffff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.clearfix {zoom: 1}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
header{
background-image: url(img/hero.jpg);
background-size: cover;
background-position:bottom, right;
height: 100vh;
background-attachment:inherit;
}
.hero-text-box{
position: absolute;
width:1080px;
top:80%;
left:55%;
text-align: right;
transform: translate(-50%, -50%);
}
.row{
max-width: 1140px;
margin:0 auto;
}
section{
padding: 80px 0;
}
.box{
padding: 1%;