Help with responsive image positioning

I have made this one page responsive layout.

At about the 380 pixel wide point the one large button moves under the other. I would like to have the two buttons become centered in the window at that breakpoint. I’ve tried all sorts of combinations of widths and margins. I thought that this should work:

@media only screen and (max-width: 380px) {
#button-left {
margin: 0.325em auto;
#button-right {
margin: 0.325em auto;

but it doesn’t. clearly there’s some basic thing I am not understanding. Can anyone suggest how I could get the two buttons to become centered after the 380 break point?

Thanks in advance for any help.

Seems to be working OK now. Are you happy with what you have now? Floats were a better option. Using auto margins means the element fills the horizontal space available and centers itself, so it’s not the right option.

Hi Ralph,

Thanks for your reply! I still don’t have it quite they way I want it. If you drag the browser to narrower than 380px the two large buttons are not centered. That’s why I’m trying to get the suto margin to work. I can’t seem to figure out how to achieve having the buttons centered after one moves under the other.

O, I see: you want them stacked. OK, what I would suggest is that you set the containing <a>s to

display: block;
text-align: center;


that’s exactly what I needed. Thanks!!!

I have one other minor glitch I wonder if you would mind checking out. The large image at the bottom of the page withall the shirts etc. I have that div set to 786px. When I narrow the browser right at the 1046px width the image sizes down to 720px. I’d like it to remain 768px until the window gets to 786px and then dynamically re-size. The dynamic re-sizing is working it just take that unneeded step down to 720px in advance of the re-sizing. I think I need to add another @media rule to keep this from happening but have been unable to get it right.

Thanks for you r help!!

Once the browser window reduces to 1000px width, this rule kicks in:

p7ccm-responsive.css:27@media only screen and (max-width: 1000px) and (min-width: 720px)
.p7CCM01, .p7CCM02, .p7CCM03, .p7CCM04, .p7CCM05, .p7CCM06 {
min-width: 0px !important;
max-width: 720px !important;
width: auto !important;

That sets the image’s container to a width of 720px, and because the image is set to max-width: 100%, it must reduce to that width. Maybe you could just change 720px to 786px.

Yep that’s what was needed. Thank you very much for taking the time to help me with this. Very much appreciated!

Great, glad that helped. Thanks for the feedback. :slight_smile: