Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Dawn Foster
1,899 PointsCentering Contact Button on Sidebar?
I am just following the video turorial ("How to Add Bootstrap Modal Windows to Your WordPress Theme").. and everything works fine.
But I wanted to center the button in the sidebar, so I thought that would be an easy thing to do.
I added a class "im-centered" to the top div of the model (in the footer.php), and added the class definition to my style.css.
It didn't work.. it is still aligned to the left. (When I inspect the element, I can see that the class definition listed, without any cross-out.. so not sure why it isn't working).
Can any one suggest a better way to do this?
Here is the top div with the class added:
<div class="modal fade im-centered" id="contactform">
and the style sheet entry:
.im-centered {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
I also tryed just surrounding the entire model code with a
<div class="im-centered">
and it didn't work either.
Any suggestions will be appreciated.
Thanks!
1 Answer
Zac Gordon
Treehouse Guest TeacherIn order for left and right auto margins to work you need to give the button a set width.
Dawn Foster
1,899 PointsSo, if I gave the button a width.. won't that break the responsive aspect of the item.
Maybe that isn't much of a problem when working with a button, (because the button appears not to change its size even when the sidebar collapses.). But what if I had an image in the sidebar instead, and wanted it centered. If I had to give it a width, then when the sidebar collapses to display under the main page content, the image would be restricted to the original size that was required for the smaller sidebar width.. and not be responsive to display a larger image when it has the space after the sidebar collapses?
Is there a common way people code sidebar items (whether they are buttons or images) to allow them to be centered, but also responsive to the screen size?.
Zac Gordon
Treehouse Guest TeacherFor responsiveness you would just use media queries to change the width as needed.
Auto margins don't work in css without a width set tho.
And definitely don't use align=center!!!
Dawn Foster
1,899 PointsThanks Zac. I have edited my previous comment with my solution to use the class for centering.
Dawn Foster
1,899 PointsDawn Foster
1,899 PointsGoing back and revisiting what I wrote, I realised that when I put the "im-centered" class into the footer here:
<div class="modal fade im-centered" id="contactform">It actually broke WP (not sure why).
And when I used the surrounding div class="im-centered" instead (still in the footer), it didn't center the button, but instead centered the contents of the model when it popped-up... not what I wanted at all!
Now it appears to me, that the centering action needs to be taken in the actual sidebar text widget where the model button is created.
So I just ended up surrounding the code in the widget area with this:
<div class="im-centered">...</div>And it worked. (I think it is only working because the class has the "text-align: center" declaration. As Zac indicated, the attempt at centering with zero margins won't work without a width defined for the button, which I didn't want to do.).
Editor's note: I originally had the above div with align="center" listed in this post as the solution (done for testing purposes), but Zac's comment about not using that property prompted me to come in and edit the above to show the better way to get the button centered through a class. ;D