What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute positioning with left in pixels or percentages, while others recommend using margins - although that seems to space out all the other buttons. Any ideas on how to achieve this? I hope I've explained the issue clearly.

<head>
<title>MorganaWhite|About Me</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="about.css">
<style>
body {
    background-color: #e3e3e3;
    margin: 0 auto;
    padding: 0;
    font-family: Arial;
}
.header {
    background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    border: 1px solid #000;
    text-align: center;
    height: 700px;
    }

.mobilelinks {display: none;}

.wrapper {
    margin: 50px;
}

#footer {
    text-align: center;
}

#footer a {
    color: #666;
    margin-left: 8px;
}

#footer a:hover {
    color: #222;
    text-decoration: underline;
}

h1 {
    color: white;
    font-family: Arial;
    font-size: 72px;
    letter-spacing: 1px;
}
h2 {
    color: #525252;
    font-size: 36px;
    letter-spacing: 1px;
    text-align: center;

}
p {
    font-family: Gill Sans, sans-serif;
    color:#696969;
    font-size: 17px;
    text-align: center;
    line-height: 150%;
}
a {
    color: white;
    text-decoration:none;
}

ul li {
    text-align: center;
    line-height: 40px;
    display: inline-block;
    letter-spacing: 1px;
    background-color: rgba(5, 4, 2, 0.1);
    border: 2px solid white;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 90%;
    width: 150px;
    height: 40px;
        margin-left: 11%;
        margin-top: 12%;
}

ul li:hover {
    background-color: white;
}
ul li:hover > a {
    color: #000;
}

@media screen and (max-width: 750px) {
    .header {height: 300px;}
        ul li {margin-top: 0%;}
    ul li { }
}
@media screen and (max-width: 500px) {
    h1 {
        font-size: 52px;
    }
    ul li {margin-top: 0%;}
        .links {display: none;}
    .mobilelinks {display: inline-block;}
}

@media screen and (max-width: 750px) {
    .header {height: 300px;}
    ul li {margin-top: 0%;}
}
@media screen and (max-width: 500px) {
    h1 {
        font-size: 52px;
    }
    .links {display: none;}
    ul li {margin-top: 0%;}
    .mobilelinks {display: inline-block;}
}


  @media screen and (max-width: 400px) {
    .header {height: 200px;}
    .mobile-terms { display: none;}
    h1 {
        font-size: 36px;
    }
    h2 {
        font-size: 22px;
    }
    ul li {margin-top: 0%;}
}

</style>
</head>
<body>
    <div class="header">
        <h1>WHO I AM</h1>
                  <ul class="links">
                     <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
                     <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
                     <li><a href="#middle"><strong>RESUME</strong></a></li>
                     <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
            </ul>
            <ul class="mobilelinks">
                <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
                <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
                <li><a href="#middle"><strong>RESUME</strong></a></li>
                <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
            </ul>
    </div>
    <div id="mainwrapper">
        <div class="wrapper">
            <h2>Some Fun Facts</h2>
                <p>
                I made this website from scratch when I was 14, <br>
                I have a twin brother whose name is Pierson McNeal White, <br>
                I have a older brother and sister who are also twins, <br>
                I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
                and I watch the super bowl for the ads.
                </p>
        </div>
        <hr>
        <div class="wrapper">
            <h2>Me In A Nutshell</h2>
                <p>
                Other Crap Here.
                </p>
        </div>
    </div>
    <div id="footer">
            Copyright &copy;&nbsp;<script>document.write(new Date().getFullYear())</script>&nbsp;Morgan.
          <div>
            <a href="#">Link</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Terms<span class="mobile-terms"> of Service</span></a>
          </div>
    </div>

Answer №1

The main issue lies in the height property assigned to your .header class, specifically set to 300px. Consider adjusting this value to provide ample space for your buttons.

I recommend using auto or 100vh for better responsiveness, but ultimately the decision is yours to make.

View Working Demo

/* Your CSS styles here */
<div class="header">
  <h1>WHO I AM</h1>
  <ul class="links">
    <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
    <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
    <li><a href="#middle"><strong>RESUME</strong></a></li>
    <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
  </ul>
  <ul class="mobilelinks">
    <li><a href="www.youtube.com"><strong>MY LIFE</strong></a></li>
    <li><a href="www.youtube.com"><strong>PORTFOLIO</strong></a></li>
    <li><a href="#middle"><strong>RESUME</strong></a></li>
    <li><a href="about.html"><strong>ABOUT ME</strong></a></li>
  </ul>
</div>
<div id="mainwrapper">
  <div class="wrapper">
    <h2>Some Fun Facts</h2>
    <p>
      <!-- Some fun facts about you -->
    </p>
  </div>
  <hr>
  <div class="wrapper">
    <h2>Me In A Nutshell</h2>
    <p>
      <!-- Add content about yourself here -->
    </p>
  </div>
</div>
<div id="footer">
  Copyright &copy;&nbsp;
  <script>
    document.write(new Date().getFullYear())
  </script>&nbsp;Your Name.
  <div>
    <a href="#">Link</a>
    <a href="#">Privacy Policy</a>
    <a href="#">Terms<span class="mobile-terms"> of Service</span></a>
  </div>
</div>

Answer №2

Your CSS seems a little mixed up, it's time for some cleaning. One example is having

@media screen and (max-width: 400px)
repeated twice. Also, avoid duplicating the ul to achieve mobile style.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to automatically move text to the next line once it reaches a specific character limit using HTML/CSS/PHP?

Is there a way to handle text when it reaches the ceiling or exceeds a certain number of characters so that it goes to the next line instead of showing a scrollbar? I have a div element where I display text retrieved from a MySQL database, and sometimes th ...

Struggling to design a responsive layout as the div on the right keeps overlapping the div on the left

I recently built a React component that consists of two columns. In the left column, there's a calendar while the right column contains some text along with an input and select field. However, I noticed that when I resize the window, the elements on ...

Difficulty resizing background image on iPhone

I am having an issue with the background image resizing correctly on my website, specifically on iPhone (I have not yet checked iPad). You can view the site here. The dimensions of the image are 1393 x 1098 pixels. Below is the CSS code I am currently us ...

Ways to create a flexbox that can scroll and includes two divs that fill the entire screen

I need to create a flexbox layout with two divs that split the screen evenly. However, I want the flexbox to change direction from row to column and make each div full width and height of the screen when the viewport is smaller than 800px, creating a scrol ...

Is it possible to modify the underline color while using the transition property in CSS?

One of the challenges on my website is customizing the navigation bar to resemble the BBC navigation bar. I want to change the border bottom/underline color using transition elements. Can anyone provide guidance on modifying the code to achieve this look? ...

JavaScript Variables Lose Their Values

Similar Inquiry: How can I get the response from an AJAX call in a function? I have written a function that fetches numerical data from an online file. Although the file retrieval is successful (verified by the alert message), I encounter an issue whe ...

Implement a Loop that Generates Buttons with Popups Using jQuery Mobile

Within the context of XML parsing, I have utilized this code to generate buttons dynamically using a loop: $('#button' + counter + paramcounter).click(function(){ sendData(escape(parameterarray[cnt2] + $('#textinput' + cnt + cnt2).v ...

Retrieving the hidden field value using JavaScript on the server side

I'm encountering an issue with asp:hiddenfield where, after changing its value on the client side and trying to retrieve it on the server side, it returns null. Here is my client-side code: function pageLoad() { var gV = $('#<%=Hidden ...

Creating a custom blockquote style for a WordPress Twenty Fifteen child theme

Currently, I am creating a new child theme for Twenty Fifteen completely from scratch. The one area I am struggling with is customizing the appearance of the blockquote using CSS. Here is an example of the custom CSS I have added to the blockquotes within ...

Stop automatic resizing on mobile device after postback

Encountered an issue with a website I'm currently developing. It's not causing any problems, but I want to enhance the user experience. My aim is to maintain the zoom levels of mobile devices after a postback. To provide more context, there is a ...

Empower the user with the ability to interact through touch on dynamically

I am trying to make a div touchable and draggable. I have dynamically created 1 to 10 divs within another div. Currently, these divs can only be dragged using the mouse or cursor. However, I want to enable dragging through touch as well. Can anyone provi ...

Initiate an AJAX request to validate and verify

Is it possible to use Ajax to first check for results, ask for confirmation if any result is found, and then proceed with an action? $(".btn-delete").click(function(){ var url = "index.php?route=catalog/product/delete&user_token={{user_token}}"; var i ...

"Implementing a full page refresh when interacting with a map using

Here is an example of how I display a map on the entire page: <div id="map_canvas"> </div> UPDATE 2: I have successfully displayed a menu on the map, but there is a problem. When I click on the button, the menu appears briefly and then disapp ...

Solving Addition and Subtraction Errors in Javascript/Jquery

Upon running the script below, it aims to calculate the height of the browser, as well as the heights of both the header and footer, subtracting them from the initial browser height: var a = $(window).height(); alert (a); var b = $('#header').cs ...

Utilize jQuery/ajax to efficiently manage 500 error responses

I have implemented a jQuery method that takes parameters for an SSH session, waits for the output, and then displays it in a text area. Everything works perfectly fine except for one issue - when a user enters an incorrect password, I only receive a 500 er ...

Could you please provide me with the option to send a list of the

Is there a way to send output via email instead of displaying it in the following div: <div id="fullCalendar" ></div> After spending a whole night searching online, I couldn't find a solution. As I'm not very familiar with jQuery pr ...

The functionality of jQuery on hover is not compatible with Bootstrap tree view

My issue arises when the jQuery onhover function does not trigger the anonymous function as expected. Here is my current HTML structure: $(document).ready(function () { $.ajax({ url: "fetch.php", method: "POST", ...

Tips for maintaining the cleanliness of PHP-generated HTML output in the 'View Source' option

I've been noticing a problem today while examining the source code on a website. I typically use PHP output in my templates to generate dynamic content. Initially, the templates are written in HTML only, with clean indentation and formatting. The PHP ...

Wordpress fails to produce results when using Ajax and Jquery

I have encountered an issue with my code. It works perfectly fine outside of WordPress, but when I try to integrate it into a WordPress environment, the Ajax part fails consistently. Below is how I include jQuery and Ajax in WordPress: function transtatus ...

The function "getElementsByClassName" in Javascript is malfunctioning

I have redesigned my website by implementing an interactive feature where users can click on a tree image to remove it and replace it with a number using JavaScript. Initially, I targeted the specific tree with the following code: document.getElementById( ...