Forums

Get help. Give help. A Web Design and Development Community.

Magazine Inspired Photo Layout

  • # November 29, 2014 at 8:31 am

    Hi, I’m trying to get this layout to work:

    All the image styles should have the same width (including the padding) at all times and end up at 1200px max-width. And I want the vertical images (.left and .right) to stay together with no spacing.

    It works up to a certain point, but the ones with padding does not stop scaling and the vertical images slips away from each other.

    Any tips? :)

    # November 29, 2014 at 9:10 am

    This reply has been reported for inappropriate content.

    You want the “vertical images” combined to be the same width as the other images? Maybe this fork of your demo gives you some ideas, not claiming that I solved your problem.

    # November 29, 2014 at 9:59 am

    It was a lot of help! Thank you so much, the outline code is such a helpfull tool to use when building layout! And the box-sizing css rule is what I was looking for I guess. What I need now is to force the verticals to stay on the same line.

    Yes, I want the vertical images to be the same width as the horizontal ones combined.

    Did some edits on your fork and increased the max-width of the .full class to 1200px again because of the box-sizing.

    # November 29, 2014 at 10:38 am

    This reply has been reported for inappropriate content.

    … force the verticals to stay on the same line.

    edited my fork of your demo, you can do:

    
    .left,
    .right { 
      ...
      width: 50%;
    

    BTW On very small screens, those big values for padding are causing images to shrink beyond recognition, no?

    # November 29, 2014 at 11:48 am

    Yes! Perfect Atelierbram!

    I updated my demo with your new edits, but I changed the padding to percentage.

    How can I center all the content now? If I remove the float: left; from .left, .right classes, I get a gap between them..

    I want all the images to be centered on the page. Like I have on my website now.

    # November 29, 2014 at 12:07 pm

    This reply has been reported for inappropriate content.

    Since your biggest image is 1200px wide, why not set the .content-container to max-width: 1200px? Then you basically can get rid of the .super and .full classes as well, when having img { max-width: 100%;} Updated my fork of your demo with this:

    
    .content {
      /* width: 100%; */ 
      max-width: 1200px;
      margin: 0 auto;
      overflow: auto;
    }
    
    # November 29, 2014 at 2:47 pm

    That sounds good! I updated my demo with your code now. I also combined .left and .right to .vertical to simplify the code.

    Thank you so much for all your help Atelierbram!

    # November 29, 2014 at 6:54 pm

    I’m not sure what’s happening.. But when I try to implement it in my wordpress theme, the verticals doesn’t line up properly..?

    http://itsnwa.com/photo/

    # November 30, 2014 at 2:33 am

    This reply has been reported for inappropriate content.

    Two things to prevent this from happening:

    1. Be sure to be in the code tab , and not the WYSIWYG tab of WordPress editor and remove all the white-space and line-breaks between your image-tags, making those angle brackets touch each other: <img src="img-1.jpg" alt=""/><img src="img-2.jpg" alt=""/>
      • this is to prevent WordPress from automatically inserting <p>-tags with every line-break (now all your floating images are inside those <p>-tags; which besides being unsemantic, is’t helping the layout either)
    2. Floats needs to be cleared, there are a couple of ways to achieve this, one of the first things you can try is to set the value of the overflow property on the container to auto or hidden:
    .fiftymm {
      ...
      overflow: auto;
    }
    
    # December 1, 2014 at 11:27 am

    Yes! that did the trick! :)

    Thanks for all your help Atelierbram!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.