Any CSS Wizards?

Rexxar

Rexxar

Rexxar

Associate
Joined
13 May 2010
Posts
1,615
Do we have any CSS Wizards here ? I've gotten so far in something I'm working on and have hit something of a brick wall. Anyone up for giving some advice?
 
So this is what i'm trying to achieve..... Each of the smaller boxes is a button.

KmEVLs8.jpg

However when i place another row within the first column, it all "offsets" like this....

83V0Dnj.jpg

And i can't figure out how to stop it, I don't know much CSS and am using the bootstrap (with bootswatch) framework.

Any advice appreciated!
 
Rexxar said:
So this is what i'm trying to achieve..... Each of the smaller boxes is a button.



And i can't figure out how to stop it, I don't know much CSS and am using the bootstrap (with bootswatch) framework.

Any advice appreciated!
Click to expand...


If it were me. I would create 5 columns and put the buttons inside each column. I think your problem comes from thinking you needs rows inside columns, Rows use negative margin and columns use positive padding. (don't ask me why) It probably throwing out your buttons.

Just stick all your buttons inside the column like below and control the distance between them with margin-bottom: 10px 20px whatever....

Code: 
<div class="container">
  <div class="row">
   <div class="col-12 col-md-2">
     <button class="small"></button> x 8
   </div>
   <div class="col-12 col-md-2">
     <button class="small"></button> x 8
   </div>
   <div class="col-12 col-md-2">
     <button class="small"></button> x 8
   </div>
   <div class="col-12 col-md-2">
     <button class="small"></button> x 8
   </div>
   <div class="col-12 col-md-4">
     <iframe></iframe>
     <ul></ul>
   </div>
 </div>
</div>

The problem with this, is that one mobile, reading left to right, 1 2 3 4 will become 1 5 9 13 etc when your first column breaks into a full width mobile column...
If the button order is important, then you could also do it this way.
Make a single container column say like this,
Code: 
<div class="container">
 <div class="row">
  <div class="col-12 col-md-8 main-container">
      <div class="button-container">
         <button></button> x 32
    </div>
    <div class="col-12 col-md-4 sidebar">
       sidebar stuff
    </div>
 </div>
</div>

then set your button container to display flex and then use media queries to control the width of the buttons on screens sizes.

Code: 
.button-container {
display: flex
flex-wrap: wrap;
justify-content: space-evenly
}

.button-container button {
flex-basis: 100%;
}

@media(min-width: 768px)
  .button-container button {
   flex-basis: 40%;
  }
}

@media(min-width: 1024px)
  .button-container button {
   flex-basis: 20%;
  }
}
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom