Help with responsive image positioning

HTML & CSS
1

I have made this one page responsive layout.

http://www.openrangeimaging.com/Test/ewald/index.html

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.

2

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.

3

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.

4

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;
5

Ralph,

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!!

6

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

media="all"
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.

7

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

8

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