centering bottom widgets in Mog Theme
-
Hello! I’m using Mog Theme on a site that is in the alpha stage right now, and I would like to make sure the bottom widgets remain centered on any monitor size or zoom level. If anyone tell me how to do this, I would appreciate it very much. I have beginner level experience in CSS.
Here is my site: http://www.therenaissancemind.com/
Here is the current css from main.css:
/* Secondary area */ #secondary{ margin: auto 23%; padding: 2em 0; border-top: 0px solid #AAA; } #search{ text-align: center; float: none; width: auto; margin-bottom: 1.5em; } aside.widget{ float: left; margin: 0 1em 0 0; width: 13em; padding: 5px; }
-
Hello! After tweaking some CSS setting, I found I could center the element by changing to “margin: 0 auto;”
However, I still haven’t been able to get the three widgest side-by-side and centered.
It seems that “float: left;” makes them line up side-by-side but also pushes the element to the left of the page. Changing it to “float: none” makes it center, but doesn’t line the widgets up side-by-side.
Here is my current CSS from main.css:
/* Secondary area */ #secondary{ margin: 0 auto; padding: 2em 0; border-top: 0px solid #AAA; } #search{ text-align: center; float: none; width: auto; margin-bottom: 1.5em; } aside.widget{ float: none; margin: 0 auto; width: 13em; padding: 5px; }
If anyone could help I’d really appreciate it!
Hello! I solved the problem thanks to the help of a user on the CSS Tricks forums . If anyone’s interested (and for future reference), here is my current code:
/* Secondary area */ #secondary{ margin: 0px auto; padding: 2em 0; border-top: 0px rgb(170, 170, 170); width: 100%; max-width: 720px; } #search{ text-align: center; float: none; width: auto; margin-bottom: 1.5em; } aside.widget{ float: left; margin: 0px auto; width: 33.33%; height: auto; }
- The topic ‘centering bottom widgets in Mog Theme’ is closed to new replies.