Dierig Patrick
Dierig Patrick

Reputation: 186

Bullet Points between div

I have the following code to display 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 finally result is on: http://www.be-virtual.org/schnittchen

Now i want bullet points between this divs like: enter image description here

Its very important that the result is responsive and that the bullet points are not visible on a mobile phone. Have anyone a idea to realize that?

Upvotes: 0

Views: 908

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

You could use flex and mediaquerie. 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>

Run snippet in full page mode and resize window to see behavior

Upvotes: 2

user3163495
user3163495

Reputation: 3577

Add "&bull;&bull;&bull;" to each button, except the first one, like this:

<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>

Depending on how your responsive layout JavaScript is set up, you will need to conditionally set the span element's display to "inline" or "none" based on if the site is being loaded in a mobile browser or not:

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";
}

Upvotes: -1

Related Questions