CODEWITHSUNDEEP
htmlcsswindow
J Pop
J Pop

Reputation: 11

Text is Hidden When Window Resizes

I'm building a website for class, based on a provided template, and I'm struggling to make it so that my text will move as the window gets resized (right now, resizing the window obscures the text and associated buttons).

Ideally, I'd like for the page to be anchored in such a way that the focus remains on the text/buttons - and by extension, the bottom right corner of the image - as the window is resized.

Here is my HTML:

<!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 my CSS:

/* 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%;

Upvotes: 1

Views: 67

Answers (3)

pjones235
pjones235

Reputation: 540

When setting an exact width to an absolutely positioned element, you should expect that it will stay at that width, regardless of browser size.

.hero-text-box{
    position: absolute;
    top:80%;
    left: 49%;
    text-align: right;
    transform: translate(-50%, -50%);
    max-width: 1080px;
    width: 100%;
}

Also, the left value should be less than 50% because of the transform rule that moves it off screen.

Upvotes: 0

Mr Nellinger
Mr Nellinger

Reputation: 108

When I do web applications I love to use bootstrap. It gives me a bunch of css classes out of the box that help me create a responsive frontend that will do what I need it to on any screen size. Long story short, I would use media queries, the bootstrap layout grid, or a combination of both.

There are many tutorials on youtube. This guy shows how the basics work for the bootstrap layout grid. https://youtu.be/GDwWmrpCa30

Media queries are useful when you need your UI to do something different based on the current device screen size. This can be used without the need for bootstrap, but can also be used with bootstrap to make really responsive apps. There are also countless tutorials on youtube for that also, but here is a good one to check out. https://youtu.be/2KL-z9A56SQ

Media Query Example:

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE:  max-width : 1000px) {   
  //css goes here with whatever css you want to fire at this threshold
}

Let me know if I can be of further assistance. Good luck.

Upvotes: 0

k.cornett
k.cornett

Reputation: 189

Looks like you havent defined a width for the row. Try something like:

.row{
max-width: 1140px;
width: 100%;
margin:0 auto;
}

Upvotes: 1

Related Questions