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

When the button is clicked, the JavaScript function is not being executed

I'm having a strange issue with my second button not working as expected. Despite appearing to be straightforward, the "Reset" button does not seem to be triggering the clear() function. Within the HTML code, I have two buttons set up to interact wit ...

javascriptphphtml

What could be causing my widget to not function properly with Django and Bootstrap?

I am currently working with the following Boostrap code in my HTML: <div class="input-group date col-2" id="datetimepicker1" data-target-input="nearest"> {{form.data_contabile|as_crispy_field}} <div class="input-group-append" data-target="# ...

htmldjangobootstrap-4django-formsdjango-templates

What is the best way to make tooltips track a specific data point they are connected to in D3?

I am working with a figure created using D3 that includes tooltips appearing near a data point when hovered over and can be pinned by clicking on the point. I have implemented the functionality to change the plotted values for the points by clicking on spe ...

javascripthtmlcssd3.js

Explore the world of HTML by uncovering both the tags and

I am currently focused on enhancing a table I created to allow sorting rows in both ascending and descending order, as well as the ability to rearrange columns through click-and-drag functionality. While the basic structure is working, I am seeking to refi ...

jqueryhtml

Ways to declare a function within the events onMouseOver and onMouseOut

<div align="right" style="border:1 #FF0 solid; background-color:#999" onMouseOver="javascript: function(){this.style.backgroundColor = '#DDD';}" onMouseOut="javascript: function(){this.style.backgroundColor = '#999';}"> Register & ...

javascripthtmlcss

Guide: Previewing uploaded images with HTML and jQuery, including file names

Any constructive criticism and alternative methods for accomplishing this task are welcomed. I am currently working on writing jQuery code that will allow users to preview file(s) without reloading the DOM. To achieve this, I have been using .append() to ...

javascriptjqueryhtmlcss

``A problem with the background image of the left panel in Framework 7

After setting a background image for the side panel and blurring it using CSS, I encountered an issue where the text and icons within the side panel also became blurred. Despite attempting to isolate the background image in a separate class, the problem ...

csshtml-framework-7

Adjust the size and color of text in Chart.js using Angular 5

Why does the font color in chartjs appear as light gray and not print when you want to do so from the page? I tried changing the font color of chartjs in the options attribute, but it didn't work. How can I change the font color in chartjs angular? ...

cssangulartypescriptchart.js

How do I effectively replace content with a banner or alert message for users experiencing issues with the website on Internet Explorer?

mysite seems to be struggling with displaying 3D content on Internet Explorer compared to Chrome. Is there a way I can replace the content with a banner or alert informing users that they will have a better experience using Chrome or other supported browse ...

phpjqueryhtmlinternet-explorer

The background failed to display (potentially due to a hovering function)

I encountered an issue with a div that has a background image. Upon loading the page, the background image fails to display initially. However, when I hover over the div and then move my mouse elsewhere (due to a specific function described below), the bac ...

javascriptjqueryhtmlcssfrontend

Extracting IDs, classes, and elements from a DOM node and converting it into a string format

Can someone please guide me on how to extract the DOM tree string from an element? Let's consider this HTML structure: <div> <ul id="unordered"> <li class="list item">Some Content</li> </u ...

javascripthtml

Creating a table using Jade/Express.js that displays various elements in each row

Looking to create a dynamic table layout using Jade for an array of objects where three objects are displayed on each row. <table> <thead>...</thead> <tbody> <tr> <td>obj0</td> <td>obj1 ...

htmlnode.jsexpresshtml-tablepug

The gap separating the three columns in the DIVs structure

Here is an example that I need The images are being loaded from a MySQL while loop, and I want the spacing between them to be such that the left column and right column touch each side with the middle image centered. Just like in the picture :D This is m ...

htmlcsscss-float

bottom of the page contains the solution

I am currently working on creating a print stylesheet for my website. On each page, there is a footer that needs to be positioned at the bottom of the printed page, but only if there is a spacing of 30pt between the main content and the footer. In cases wh ...

cssprinting

Content from ajax request is invalid

Currently, I am facing an issue with loading a comment list and replacing the existing list on my HTML page with the new one. Previously, I used to load a simple XML list, iterate over its elements, and generate content. Although this method worked fine, i ...

jqueryhtmlajax

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Is there a way to send information back to my database when a user prints a specific webpage, without relying on browser-specific functions like onbeforeprint() and onafterprint()? I'm open to using any combination of technologies (PHP, MySQL, JavaScr ...

phpjavascriptmysqlhtmlonbeforeprint

What is the reason behind modern browsers continuing to add spaces between inline blocks when there is whitespace present?

Consider the following HTML markup: <div class="inlineblock">one</div> <div class="inlineblock">two</div> <div class="inlineblock">three</div> Accompanied by this CSS style: .inlineblock{ display: inline-block; } ...

css

Discover the best method for transferring MySQL data between pages

Can anyone help guide me in the right direction on how to allow a user to click a link within a PHP While Loop generated MySQL table and pass that data to another page? I've searched through similar questions but haven't found a solution that fit ...

javascriptphpjqueryhtmlmysql

Why won't the main bar column in Bootstrap extend to the entire width of the page?

I've set up a basic row with two child columns: the sidebar column with className='col-md-2' and the mainbar column with className='col-md-10'. The parent row has a display:flex property to position the two children side by side. & ...

htmlcssbootstrap-5

Ending Current Tab using angularJS Controller

Is there a way to automatically close the current browser tab after a successful action in AngularJS? ...

angularjshtml