Div placement

[OBXKH]

my goal is to have 4 divs beneath every h2

says "Button" that goes no where #

see

Home

.button {
border: 5px solid;
margin: auto;
width: 50%;
padding: 10px;
background-color: #e70c68;
text-align: center;
width: 12rem;
font-size:18px;
position: relative;
bottom:3rem;
}

i want the divs evenly spaced out and fully responsive

4 "Button" divs under every h2 in Home

i was having trouble spacing the divs out evenly on all devices

... please help me

 

[Infinityhost]

I'm not fully understand what You want to achieve but maybe let's start from this point

<script src="EBSetupEx.js"></script>
<script src="EBScrollableElementList.js" ></script>
<script defer>
    class myApp{
        constructor(){
            ElementBuilder.setWorkplace();
              
                       this.tmp_set_container = new SetContainer(this, document.body ,0,"display:flex;flex-direction:column;position:absolute;position:absolute;justify-content:center;align-items:center;","4%","3%");

                       this.style_list = ["display:flex;align-items:center;justify-content:center;height:15%;padding:1%;overflow:auto;width:65%;background-color:white;color:black;font:18px italic arial,serif;margin-bottom:4px;border:0px solid white;","display:flex;align-items:center;justify-content:center;height:7%;width:10%;background-color:white;color:black;font:18px italic arial,serif;margin-bottom:6px;border:0px solid white;"];

                       this.tmp_set_container.add_item(`<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, non. Voluptas consequuntur nobis deleniti quibusdam! Sapiente cumque soluta odio tenetur libero eum officiis excepturi? Esse ut deserunt voluptas necessitatibus similique.</div><div>Button</div>`,this.style_list);
      
      
                       this.tmp_set_container.add_item(`<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ratione tempora officia velit beatae eos veritatis unde labore eius optio eligendi perferendis ipsa ad provident cumque quos quam, voluptas eaque?</div><div>Button</div>`,this.style_list);
      
                       this.tmp_set_container.add_item(`<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque provident beatae delectus culpa quas a ipsum quo sequi, similique magni quibusdam placeat, corrupti omnis sint maiores laboriosam commodi vel.</div><div>Button</div>`,this.style_list);
          

                       this.tmp_set_container.add_item(`<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, non. Voluptas consequuntur nobis deleniti quibusdam! Sapiente cumque soluta odio tenetur libero eum officiis excepturi? Esse ut deserunt voluptas necessitatibus similique.</div><div>Button</div>`,this.style_list);
      


}}
setTimeout(function(){my_new_shining_app = new myApp();},300);
</script>

You can paste it and check here http://infinityhost.ct8.pl/ (compiler button)

By changing these values ","4%","3%");" in very first line, You can modify placement of all elements. One of them is used for seeting top position of all object (set_container) and the other is for setting distanse between objects.

"margin-bottom:4px;" let You decide where this div? button? is to be.

Finally i.e it can look this way

When You want to handle this button?div? action - You use i.e
"this.tmp_set_container.ItemList[0].querySelectorAll("DIV")[1].setAttribute('onClick','alert();');" but it is possible to set it directly without writing new line.

0 - means first object (here objects are 4)
DIV - element in object (1 means green button)

If You need complete structure please let me know, it takes a second to create such application.

You can change creation process of every one object by modifing style array ( You add new object with " this.tmp_set_container.add_item" then modify one/any/all property of "this.style_list" and add another with changed look).

All this buttons at the top You can replace with single (actually 2 - since one item of menu is expandable) ButtonBar element.
Quick simple method.

Oh I see there is another set of items at the bottom, so it would required another ButtonBar (content of this object may be diffirent - pictures, videos - anything)

Please take a look at http://infinityhost.ct8.pl/ - "records" ButtonBar example 1.

 

[VBService]

Take a look of this part of your html ... is a little bit "messy"

<article>

  <div class="none">
    <h2>Lorem ipsum ...</h2>
  </div>

  <div class="button"><a href="#">Button</a></div>

  <h2>Lorem ipsum ...?</h2>
  <div class="none">
    <div class="button"><a href="#">Button</a></div>
  </div>
 
  <h2>Lorem ipsum ...</h2>
  <div class="button"><a href="#">Button</a></div>

  <h2>Lorem ipsum ...</h2>
  <div class="button"><a href="#">Button</a></div>
 
</article>

... try to put in that way e.g

<article>

  <h2>Lorem ipsum ...?</h2>
  <div class="button"><a href="#">Button</a></div>

  <h2>Lorem ipsum ...?</h2>
  <div class="button"><a href="#">Button</a></div>

  <h2>Lorem ipsum ...?</h2>
  <div class="button"><a href="#">Button</a></div>

  <h2>Lorem ipsum ...?</h2>
  <div class="button"><a href="#">Button</a></div>

</article>

try .button set in css like this

.button {
  border: 5px solid;
  margin: auto;
  width: 50%;
  background-color: #e70c68;
  text-align: center;
  width: 12rem;
  font-size: 18px;
  position: relative;
  bottom: 40px;
}
.button a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
}