Struggling with implementing responsive mobile buttons that stack in a column? Here's the solution

My content is nearly responsive on all screen sizes, but I'm having trouble getting the buttons to stack neatly in a column. Can anyone provide suggestions on how to fix this issue? You can view the current progress below. Thank you in advance for any assistance.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>New Layout for CW work</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="menu-buttons.css">
  <link rel="stylesheet" href="dropdown-menu.css">

  <style>
    /* CSS styles */
  </style>

</head>

<body>

  <div class="header">
    <a href="" class="logo"><img src="images/cw_logo.png"> </a>
    <div class="header-right">
      <a class="active" href="#home">Home</a>
      <a href="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c69616d65604c69616d6560756379226f6361">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a5ada1a9ac80a5ada1a9acb9afb5eea3afad">[email protected]</a></a>
      <a href="#about">
        <p>1234567890</p>
      </a>
      <button class="button" onclick="goBack()">Go Back</button>
    </div>
  </div>

  <div class="header-dropdown-menu">
    <!-- Dropdown menu content -->
  </div>

  <div id="main">
    <nav>image in here</nav>
    <aside>image in here</aside>

    <article>
      <div class="row">
        <div class="column">
          <a class="menu-button" href="../Wood-Type/woodtype.html" role="button">Wood type</a>
          <a class="menu-button" href="../Wood-Type/.html" role="button">Specification</a>
          <a class="menu-button" href="../Wood-Type/.html" role="button">Pricing</a>
        </div>
        <div class="column">
          <a class="menu-button" href="../news/news.html" role="button">News</a>
          <a class="menu-button" href="../Wood-Type/.html" role="button">FAQ</a>
          <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Images</a>
        </div>
      </div>
    </article>
  </div>

  <footer>
    Footer
  </footer>
  
  <!-- End of HTML -->
</body>
</html>
htmlcssresponsivescreen-sizedevice-width

Answer №1

Upon seeing your inquiry, I crafted a response tailored to address it.

Below is the code for creating a stylish drop-down list and button:

HTML Code

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">wood type</a>
  <a href="#">news</a>
  <a href="#">specification</a>
    <a href="#">pricing</a>
    <a href="#">images</a>
    <a href="#">faqs</a>
  </div>
</div>

CSS Code

.dropdown {
  position: relative;
  display: inline;

}

.dropbtn {
  background-color: yellow;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
      width: 17.82%;
      margin: 0px 4px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 620px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: inline;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: inline;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

Answer №2

It seems that implementing the @media all was necessary to enable responsive functionality for the buttons by utilizing this CSS.

@media all and (max-width: 800px) {
    #main>.row,
    #main.article {
        /* Revert them back to their original order in the document */
        -webkit-order: 0;
        order: 0;
        display: flex;
    }
}

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

Guide on using JavaScript to implement the universal CSS selector

One technique I frequently employ is using the CSS universal selector to reset the dimensions in my HTML document: * { border: 0; margin: 0; padding: 0; } I wonder if a similar approach can be achieved with JavaScript as well? When it come ...

javascriptcsscss-selectors

The fixed table header is misaligned with the body columns' width

I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...

htmlcsshtml-table

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

javascripthtmlcss

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...

javascripthtmlcssscroll

What are some ways to ensure that text can adapt to the size of a

I am looking to create dynamic text that adjusts based on the size of its parent container. As the parent container's size changes, I want the text to automatically adjust accordingly. Specifically, I want the text in a widget to resize when the widg ...

javascriptjqueryhtmlcssfrontend

Matching stroke-dashoffset in SVG between two distinct paths

I am currently working on animating stroke-dashoffset for two different paths to create a drawing effect. There are buttons provided to adjust the stroke-dashoffset values. My goal is to ensure that the filled paths align vertically as they progress. Is t ...

javascripthtmlcsssvg

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

The image spills out of its confines

Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without over ...

htmlcsstailwind-css

Declaring an array that holds Angular components in Angular 11: What's the best approach?

I'm trying to implement a feature in my Angular component where I can create a list that displays content from other components. My current approach involves declaring an array that contains references to different Angular components: import { Compone ...

htmlangulartypescript

Which CSS 3 transition prefixes are recommended for optimal performance?

I'm curious about the CSS vendor prefixes needed for transitions. One source mentions that "you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-)". Another page only displays the -webkit- and -moz- pre ...

csscss-transitionstransition

How can I generate a hyperlink for a specific directory on Github Pages?

If I have a repository with one file and one folder, as listed below: index.html folder The folder contains another file named: work.html My goal is to access the folder website using only the link: username.github.io/repositoryname/folder Instead ...

javascripthtmlcssgithubgithub-pages

What is the best way to format each <li> element onto a separate line?

Creating a review section for an item on my website required me to organize the reviews and comments. I utilized the following code structure: <ul> <li> Comment code </li> <li> Comment code </li> </ul> Within the ...

htmlcss

Prevent the link from stretching to cover the entire width of the page

I'm looking for a solution that can consistently restrict the clickable link area to just the text within my h2 element. The problem arises when the space to the right of the text is mistakenly included in the clickable region. Here's an example ...

htmlcss

When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...

javascripthtmlcssapache.htaccess

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

javascripthtmlcssmenusticky

Tips for aligning inline elements in the center of a webpage

My goal is to center the title in the middle of the page, taking into account its alignment with the search bar. However, I want it to be centered independently and not affected by the search bar's position. Is there a way to achieve this? To better ...

htmlcss

What is the best way to retrieve the innerHTML content of an anchor tag with Cheerio?

Looking to extract data from an HTML page, a simplified example is provided below. Upon running the code, I anticipate the output to be [ "foo", "baz", "quux", ] but instead encounter an error message stating "TypeError: anch ...

javascripthtmljquerycheerio

The Bootstrap row does not display divs in a stacked formation when viewed on smaller screens

My layout is using bootstrap rows for two divs. I want them to be side by side on large devices, but stacked on small devices. However, Bootstrap is not stacking them on small devices and they are still both sitting at 50%. The specific divs I am talking ...

htmlcsstwitter-bootstrap

How to Align Navigation Bar Items to the Right in Bootstrap 4

I need some help with bootstrap. I've looked at various discussions on this topic and tried numerous solutions, but I still can't get it right. I want the logo to be on the left and the navigation links aligned to the right. Here's what I&ap ...

htmlcssbootstrap-4navbar

Moving through divisions that share a common class name using jquery

I am experimenting with a plugin that allows me to attach popups to images. My goal is to enable navigation between all popups using previous and next buttons upon clicking on a popup. Below is the element when it's displayed: <div class="imp-too ...

javascriptjqueryhtmlcss