Best way to line up a row of elements on the page

Hi, I have some images in a row they scale well responsive. But as I have two separate rows than I will have a gap when scaling them responsive because the images will not line up nice.

To be able to add images to the row (with cms) or product cards as repeating elements, I want to find out what the best way is to have them lined up.

My first thought was using

  • and add a new card or image-block as a new
  • . Lining them with float-right? Will that work?

    Or just having separate in a grid? But how would that work?
    What is the best way to achieve this?
    I,m using Foundation. 6.4.2 for this project.

    Here are my image rows in two blocks giving problems when responsive on tablet size.

I would probably use block-grid but its possible.

ALIGN LEFT
To align left add the .end class to the last column to align as so:

large-4 medium-6 small-12 columns end

ALIGN CENTER

If you add a custom class to the last column - you can align center with this css applied to your medium breakpoint:

.align-c {
   margin-left: auto;
   margin-right: auto;
   float: none;
}

Also add vertical spacing to your overlay-container div.

@iamrobert Thanks for your reply. It is interesting to se how that works. I will try how this works out when having more than 3 items in the row.
For now i found that also a good solution is to have medium-4 columns making the tiles to sit neat beside each other on tablet and mobile.

Now this “block” is a static item just having tree items. I am wondering how to get this for a repeating block element. Where I add the blocks to the row one by one?

Tried to build that using a code-pen example: https://codepen.io/jwmoreland/pen/dzLPYP
This is my codepen: which has a tiny problem as you can see :slight_smile:
https://codepen.io/mr_vespa/pen/rNVOzav

  1. Am I on the right track here? Or is there a better approach? Will try to use the block-grid here.
    this is a nice sample of how that could work: https://codepen.io/ZURBFoundation/pen/eWMOjK

  2. made me also wondering, can I use more than one Foundation "grid techniques " in a site design? I like the column approach but I see that the block-grid has also advantages in this case.
    So I will give that a try on my cards experience :slight_smile:

Convinced that the block-grid might be a nice solution for me I tried starting with it just build a copy of a codepen I found. But the strange thing is, al tough I have all settings the same, the result is not the same? Not lining up horizontal? What is my mistake?

my pen:https://codepen.io/mr_vespa/pen/NWrWoJB
the one a used as a sample to start: https://codepen.io/dovidweisz/pen/VeRzJv

Any one who can see why this is not working on the codepen I created? Need some input so I can finish this :slight_smile:

Ok made some progress decided to try it in the webdesign to see how it works out. the result is promising. At least a large screen it is ok.

Some things to find out: how to get the space between the rows smaller?
What is the best way to make it all fit nicer on mobile and tablet screen?

Because the codepen zurb foundation css is 6.5:
https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css

Block Grids are disabled by default from 6.4:

Here’s how to implement:

adjust the margins in your:

.sh_video_card {
margin: 20px;
}

.sh_video_card_content
remove
max-height: 97px;

as the first box is cut off.

Thanks for the info about the version. For this site I use a downloaded version I think that has the float grid right?

I used the max-height to prevent editors having more than allowed text and also make sure that the box stay the same height. If I do not have that they will vary in height which is not desired.

How to get the space between the rows less high? Can that be done with some css as well?

For fitting better on smaller screens can I adapt this css as well? Or will that cause other problems?:

.small-collapse > .column, .small-> .columns {
padding-right: 0;
padding-left: 22px;
}

Might have them in a @media as well and just for this sh_video_card div class to prevent it will be applied to other columns as well. Or is this not the way to achieve this?

Before and after applying this on mobile screen:

I answered a part my own question. I now discovered I had a margin-top at 50px (and bottom) which made the gap :slight_smile: So taking that out made it much better :slight_smile:

I probably wouldn’t adjust the global padding/margin unless you want to do it sitewide. Plus it shrinks the scroll area on mobile.

Then you would be best to adjust it in scss and output.

You can also make a custom class based on your parent div .sh_video_card_wrap - then it applies only to this:

.sh_video_card_wrap .small-collapse > .column, 
.sh_video_card_wrap .small-> .columns {

    }

To adjust for mobile - you could add a margin around:

.sh_video_card_wrap {
margin: 0 20px;
}

Thanks. Will try that. Getting better every step. I’m not using scss just old fashion css :slight_smile: