SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with responsive image positioning

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    O, I see: you want them stacked. OK, what I would suggest is that you set the containing <a>s to

    Code:
    display: block;
    text-align: center;
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Once the browser window reduces to 1000px width, this rule kicks in:

    Code:
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep that's what was needed. Thank you very much for taking the time to help me with this. Very much appreciated!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Great, glad that helped. Thanks for the feedback.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •