Grid of icons in Index

phansant / 2015-06-16 03:20:20   

I am stuck on how to position 6 small social icons in a 3x2 grid below my section titles in my index.

I tried to write CSS rules to display the two rows of three as seperate divs inline, but that didnt work.

I guessed something in the style.css was over riding anything I could do via the Admin panel, so I tried doing the same thing in that file, to no avail.

I found Oley's forum post about changing the CSS to display the Index nav horizontally, but I don't know how to make that only apply to my icons without making the section links horizontal as well.

My site is here: noelkalmus.com

I'd like to have an even grid like so:
tumblr | insta | etsy
facebook | twitter| pinterest

Thanks in advance, I hope someone can help me :)

phansant / 2015-06-16 18:38:36   

In the Post-Nav text area, I have the six images/links defined as a div id called icons1.

In main.css, I have tried a lot of different things, floating them to the left, display inline and inline:block.

This is so frustrating, please someone help!

phansant / 2015-07-07 21:23:02   

Right now I had the code pasted in index.php in between

  1. <div class='top'>{{obj_itop}}</div>
  2. <plugin:index:load_index />
  3. <div class='bot'>{{obj_ibot}}</div>

and

  1. <last:page:append_index />
  2. </div>
  3. </div>
  1. <div id='exhibit'>
  2. <div class='container'>

This places the icons where I want them to be (I decided I'm happy with them all in a line instead of in a grid) but I know this isn't the best way to do this, because now I can't enter anything into my "post nav" section. It won't show up.

This would be so much easier if I had a index.html file to work with...when I open the page in Chrome's dev tools, it shows a html doc that I wish I could access. Please explain this to me.

Thanks in advance.

This thread has been closed, thank you.