Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: Reposition arrow?  (Read 6582 times)

0 Members and 1 Guest are viewing this topic.

High1

    Topic Starter


    Apprentice

    Thanked: 2
    Reposition arrow?
    « on: December 11, 2018, 01:43:46 PM »
    Hello

    I have a full-screen movie in a Web page that looks like this (please see attached).

    I am trying to relocate the downward facing arrow now above the Play button to where I have painted on the yellow star, but
    it's proving a bit difficult.

    I have the downward pointing arrow in a footer below 'class content' and 'class content_heading':

    Code: [Select]
    <body>
     

    <div class="content">
     
         <h1 class="content__heading">Welcome To Home Flix</h1>


     
      <footer>

       <a href="#one" class="button style2 down">More</a>

              </footer>
     
     
                       </div>
    </body>

    The CSS for the above properties is:

    Code: [Select]
    html, body, div, h1, p, a, video {
        margin: 0;
        padding: 0;
    }

    html, body {
        height: 100%;
    }

    .content {
        position: relative;
        top: 30%;
        z-index: 2;
        max-width: 720px;
        text-align: center;
        margin: 0 auto;
    }

    .content__heading {
        margin-top: -18%;
        color: #94e8e3;
        font-size: 44px;
    }

    I have stripped some styling aspects of the footer/arrow to make for easier reading:

    Code: [Select]
    footer {

    margin-top: 2em;
    }


    Thanks for any suggestions.