- increase clarity and readability- separate sections for better

I'm working on a code snippet to showcase 4 buttons:

#buttons {
  text-align: center;
  padding-top: 4%;
}

#buttons img {
  display: inline-block;
  list-style: none;
  padding: 10px;
}

#buttons p {
  color: #fff;
  font-family: ;
  font-weight: 600;
  font-size:19px;
}

#buttons li {
  display: inline-block;
}
<div class="row" id="buttons">
    
    <div class="large-3 small-12 columns">
<span id="bullets"></span>
      <a href="#was_ist" id="was_ist_anchor"><img src="images/icons/question_icon.png"><p>Was ist Schnittchen</p></a>
    </div>

    <div class="large-3 small-12 columns">
<span id="bullets">&bull;</span>
      <a href="#wo" id="wo_anchor"><img src="images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p></a>
    </div>

    <div class="large-3 small-12 columns">
<span id="bullets">&bull;</span>
      <a href="#philosophie" id="#philosophie"><img src="images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p></a>
    </div>

    <div class="large-3 small-12 columns">
<span id="bullets">&bull;</span>
      <a href="#was_erwartet" id="#was_erwartet"><img src="images/icons/kiss_icon.png"><p>Was erwartet Sie</p></a>
    </div>

    </div>

The final result can be viewed at:

Now, I would like to add bullet points between these divs like: https://i.sstatic.net/Zw5sp.png

It is crucial that the result is responsive and that the bullet points are not visible on a mobile phone. Does anyone have an idea on how to achieve this?

javascriptjqueryhtmlcss

Answer №1

To achieve a responsive layout, you can utilize flexbox and media queries. example

#buttons {
  display:flex;
  text-align:center;
  flex-wrap:wrap;
}
#buttons:before,
#buttons:after {/* you may use also justify-content ... */
  content:'';
  flex:1;/* will use as much space as possible pushing content into middle */
}
.dots {/* style these as you wish, made simple for demo */
  border-top:dotted 6px #AD1616;
  width:1.5em;
  height:3em;/* to set at middle's height of icon*/
  margin:auto 2em;/* vertical centering and keep some room around */
}
@media ( max-width : 950px ) {/* set here your breaking point demo is at 950px */
  .dots {
    display:none;/* hide dots */
  }
  #buttons {
  display:block;/* back to regular display  to pile icone/links */
  }
}
<div id="button_bg" class="hide-for-small">
  <div class="row" id="buttons">
    
    <div class="large-3 small-12 columns">
      <a href="#was_ist" id="was_ist_anchor"><img src="http://www.be-virtual.org/schnittchen/images/icons/question_icon.png"><p>Was ist Schnittchen</p></a>
    </div>
    <div class="dots"></div>
    <div class="large-3 small-12 columns">
      <a href="#wo" id="wo_anchor"><img src="http://www.be-virtual.org/schnittchen/images/icons/location_icon.png"><p>Wo finden Sie Schnittchen</p></a>
    </div>

    <div class="dots"></div>
    <div class="large-3 small-12 columns">
      <a href="#philosophie" id="#philosophie"><img src="http://www.be-virtual.org/schnittchen/images/icons/sandwich_icon.png"><p>Schnittchen Philosophie</p></a>
    </div>

    <div class="dots"></div>
    <div class="large-3 small-12 columns">
      <a href="#was_erwartet" id="#was_erwartet"><img src="http://www.be-virtual.org/schnittchen/images/icons/kiss_icon.png"><p>Was erwartet Sie</p></a>
    </div>

    </div>
  </div>

To observe the behavior, run the snippet in full-page mode and adjust the window size

Answer №2

Insert "&bull;&bull;&bull;" into every button, with the exception of the initial one, as shown below:

<div class="large-3 small-12 columns">
<span id="bullets1"></span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>

<div class="large-3 small-12 columns">
<span id="bullets2">&bull;&bull;&bull;</span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>

<div class="large-3 small-12 columns">
<span id="bullets3">&bull;&bull;&bull;</span>
<a href="#was_ist" id="was_ist_anchor">
<img src="images/icons/question_icon.png">
<p>Was ist Schnittchen</p>
</a>
</div>

Based on the setup of your responsive layout JavaScript, you may need to toggle the span element's display between "inline" and "none" depending on whether the site is being viewed on a mobile browser:

if(ismobile){
document.getElementById("buttons1").style.display = "none";
document.getElementById("buttons2").style.display = "none";
document.getElementById("buttons3").style.display = "none";
}
else{
document.getElementById("buttons1").style.display = "inline";
document.getElementById("buttons2").style.display = "inline";
document.getElementById("buttons3").style.display = "inline";
}

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

Sitelinks and a brief description appear beneath the website name when it is displayed in search

Is there a way to incorporate "metadata" (green and red lines in the image below) into a website? I might not have the correct term for it, so my apologies in advance. I attempted changing the following tag in the index.html file, but I am uncertain if thi ...

htmlmeta-tags

Why isn't the alert box showing up when I use this Jquery function?

It has come to my attention that when I include the ready event, the function works properly. However, upon removing it, the function ceases to work. Functionality with Ready Event: <script type="text/javascript"> $(document).ready( functi ...

jquery

Ways to manage the gap among flex items

I'm currently going through some educational material on Codeacademy, and I'm curious about how I can control the spacing between the "locations" text and the three divs below it. The task requires me to create a 15px gap between them, but I am u ...

cssflexbox

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

javascripthtmlcssreactjs

What is the best way to incorporate padding into an Angular mat tooltip?

I've been attempting to enhance the appearance of the tooltip dialog window by adding padding. While adjusting the width and background color was successful, I'm encountering difficulties when it comes to styling the padding: https://i.sstatic.ne ...

javascripthtmlcssangularangular-material

Non-responsive behavior triggered by a button click event (JavaScript)

Help needed with displaying results on the same page for an online calculator I'm creating. Why are the results not showing up as expected? I want users to input 4 pieces of information, have the logic executed, and then display the answers below th ...

javascripthtmlcss

Error Encountered: RSA Key Pairs Invalid Signature for JSON Web Token (JWT)

I am facing an issue with my Node.js application (version 20.5.1) regarding the verification of JSON Web Tokens (JWT) using RSA key pairs. The specific error message I am encountering is: [16:39:56.959] FATAL (26460): invalid signature err: { "type& ...

javascriptnode.jstypescriptjwt

The shopping cart is unable to display the name property as it is undefined

I'm currently working on creating a basic shopping cart using JavaScript. $('.addToCart').click(function(event) { event.preventDefault(); var name = $(this).data('name'); var price = Number($(this).data('price')); ...

javascriptjqueryhtml

Storing Array Using a FOR Loop

Good day! I am currently working on saving the numbers generated by a FOR loop. The initial number and final number are entered, and the result is a range of numbers that we have selected. For example: Initial Number: 1 Final Number: 5 Result: 1 2 3 4 5 ...

javascriptphpmysql

The significance of my values fluctuates within the datepicker, at times acknowledged and other times

Here's the situation in a nutshell: <script> //I decided to make things easier for myself by hard coding these values var startDate = '01-01-2013'; var endDate = '01-31-2013'; $(document).ready(function() { $('#R ...

javascriptjqueryvisibility

Creating PHP functions that return a JSON string when invoked - a simple guide

I have created a script that contains various functionalities, including fetching data from a database and encoding it into JSON. However, I want to be able to call different functions to execute these scripts separately. When I attempted to define and c ...

javascriptphpjson

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

javascriptjqueryhtml

Card columns with dropdown extending into adjacent column

Encountering a strange problem with the card-columns layout in Bootstrap when using dropdown menus within the cards. The issue arises when the dropdown-menu divs of the lower cards bleed into the next column, despite appearing in the correct position. Thi ...

htmlcsstwitter-bootstrapbootstrap-4

jQuery AJAX call: The specified endpoint was not found

Utilizing jQuery, I am fetching a JSON package to update my display. In an effort to implement global ajax handlers for a universal "AJAX failed" handler, I encountered an issue. Even when I halt the back end (ASP.NET), the request does not technically "fa ...

jqueryasp.netajaxjson

How can we create a flexible item that can be resized along with another item set to a fixed length?

Is there a way to create an element with a fixed height and width of 40px, while having another element next to it that takes up the remaining space of the parent element's width? I want the second element to shrink when resizing, while the first one ...

htmlcssresponsive-designflexbox

Generating a fresh array by filtering out elements with specific properties using the .map() method

Within my React application, there exists an array containing key value pairs where each pair corresponds to a checkbox. Upon checking the checkbox, the value of the corresponding key switches between true and false. The structure of the data retrieved is ...

javascriptreactjs

The outcome varies between PHP Local Host and server environments

I have developed a script for searching lk domains. Below is the code: <form action="" method="GET"> <input type="text" name="dm" placeholder="Enter Domain Name"> </form> <?php if (isset($_GET["dm"])) { $domain = $_GET["dm ...

javascriptphphtmlarrayserror-handling

Creating default values for MongoDB databases using bdhash in Express.js and mongoose asynchronously

What is the best way to set a default value (like bdhash which is async) for a field in my mongoose schema? Currently, I am only seeing a promise inside. I'm using async/await correctly, but why does it seem like I'm getting just a promise? I als ...

javascriptnode.jsexpressmongoose

Unable to initiate the server generated by the express.js generator

Currently, I am trying to set up an Express.js server using their generator. Following the documentation, I was able to successfully create the basic structure. However, when attempting to run the prescribed command (SET DEBUG=transcriptverificationserver: ...

javascriptnode.jsexpress

Avoid losing any entered form information when leaving the page

As I work on creating a datagrid with hundreds of rows, each row features a checkbox that allows users to select items from the grid. I've noticed that users might spend considerable time filtering and searching through the grid, ticking checkboxes a ...

javascriptjqueryforms