Menu icon Foundation
Changing button group alignment on different sized screens

Hi, complete newbie here so apologies for a potentially basic question!

Is there anyway i can centre align a button group on a small and medium screen that is right aligned on a big screen?

I've tried a fair few things and google lots but not come up with a working solution!

Any help much appreciated!

All the best

Danny

<div class="row">
    <div class="large-4 columns">
      <h1 align="center"><a href="index.html"><img src="http://dummyimage.com/400x100/000/fff" /><a></h1>
    </div>
    <div class="large-8 columns">
      <ul class="right button-group">
           <li><a href="index.html" class="button">aaaa</a></li>
      <li><a href="about.html" class="button">bbbbb</a></li>
      <li><a href="panels.html" class="button">cccccc</a></li>
      <li><a href="courses.html" class="button">ddddd</a></li>
      <li><a href="artinashes.html" class="button">eeeee</a></li>
      <li><a href="contact.html" class="button">fffff</a></li>
      </ul>
  </div>
  </div>
            

         

aligning button-group

Hi, complete newbie here so apologies for a potentially basic question!

Is there anyway i can centre align a button group on a small and medium screen that is right aligned on a big screen?

I've tried a fair few things and google lots but not come up with a working solution!

Any help much appreciated!

All the best

Danny

<div class="row">
    <div class="large-4 columns">
      <h1 align="center"><a href="index.html"><img src="http://dummyimage.com/400x100/000/fff" /><a></h1>
    </div>
    <div class="large-8 columns">
      <ul class="right button-group">
           <li><a href="index.html" class="button">aaaa</a></li>
      <li><a href="about.html" class="button">bbbbb</a></li>
      <li><a href="panels.html" class="button">cccccc</a></li>
      <li><a href="courses.html" class="button">ddddd</a></li>
      <li><a href="artinashes.html" class="button">eeeee</a></li>
      <li><a href="contact.html" class="button">fffff</a></li>
      </ul>
  </div>
  </div>
            

         
Vanessa Kestering over 5 years ago

Maybe you could better use the grid-columns to center or uncenter your button group. Do you already tried this?

There you can use code like this

<div class="row">
    <div class="large-4 columns">
      <h1 align="center"><a href="index.html"><img src="http://dummyimage.com/400x100/000/fff" /><a></h1>
    </div>
    <div class="large-8 columns">
    <div class="row">
      <div class="small-12 large-8 small-centered large-uncentered columns">
          <ul class="button-group">
               <li><a href="index.html" class="button">aaaa</a></li>
               <li><a href="about.html" class="button">bbbbb</a></li>
               <li><a href="panels.html" class="button">cccccc</a></li>
               <li><a href="courses.html" class="button">ddddd</a></li>
               <li><a href="artinashes.html" class="button">eeeee</a></li>
               <li><a href="contact.html" class="button">fffff</a></li>
          </ul>
      </div>
  </div>
  </div>

Danny Boy over 5 years ago

Hi Vanessa

thanks that is really helpful and super useful!

Kind Regards

Danny