What's the best way to create responsive columns - that work with cells

Hi

I need to create a page that looks like the attached mockup.

Note that the first row has 3 shoes, the second row has 1 shoe, the next row has 4 shoes

There will never be more than 4 shoes in a row.

When the browser narrows I would like the images to be adjusted accordingly.

For example when the browser is viewed on a tablet in Portrait mode, the row with 4 shoes would split into two rows, etc, etc.

Finally with just 1 shoe per row when it  is viewed on a cell phone.

Any suggestions?

Thanks,

Rowby
shopping-layout.pdf
LVL 9
Rowby GorenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You will want to use a responsive grid like bootstrap or foundation. I have preferred bootstrap myself http://getbootstrap.com/css/

<div class="row">
     <div class="col-sm-4">shoe</div>
      <div class="col-sm-4">shoe</div>
     <div class="col-sm-4">shoe</div>
</div> 
<div class="row">
     <div class="col-xs-12">shoe</div>
</div> 
<div class="row">
     <div class="col-sm-4">shoe</div>
      <div class="col-sm-4">shoe</div>
     <div class="col-sm-4">shoe</div>
</div> 

Open in new window


You can see this in action http://jsbin.com/befifabaya/edit?output.  

Notice the rows all collapse to 1 column as you narrow the browser simulating your phone.

You can also add a class to your image, "img-responsive" which will auto size the image as needed. http://getbootstrap.com/css/#images

The grid is 12 columns so a 3 column row would be "4" col-sm-4.  The middle is either xs, sm, md or lg for the viewport or built in media queries http://getbootstrap.com/css/#grid.

If you have the class, "col-sm-4 col-md-3" then for the medium or larger viewport, you will get 4 columns and for small viewport you will get 3 columns and extra small will go to 1 column.
Rowby GorenAuthor Commented:
Hi Scott

The page is on a Shopify CMS and uses this template

Template

It's responsive but I can't tell what system it's using.  I checked the source code but what's it's doing to be responsive eludes me.  I don't see anything that refers to bootstrap for instance.

Can you figure it out?

Thanks
Rowby
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Viewing the source, I looked at the styelsheet and search for @media and found .gridlock. It looks like they used something called gridlock https://formstone.it/components/grid/ which is like bootstrap and made it somewhat their own.  

Except
@media screen and (max-width: 499px) {
  .gridlock .row .min-1 {
    width: 31.25%;
  }
  .gridlock .row .min-2 {
    width: 64.58333333%;
  }
  .gridlock .row .min-3 {
    width: 97.91666667%;
  }
  .gridlock .row .min-push-1 {
    margin-left: 34.375%;
  }

Open in new window


In the html code they have
<div id="product-265645957" class="product-index desktop-3 tablet-half mobile-half" data-alpha="DIRECTION WOMENS TEE" data-price="7540">    

Open in new window


It's the classes like, "desktop-3 tablet-half mobile-half" that control how many columns to use for each of desktop, mobile and tablet.  Where you only want one column, change that to -full as in, "desktop-full tablet-full mobile-full" for one column.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Rowby GorenAuthor Commented:
Thanks Scott

I'll dig into this and report back.

Rowby
Rowby GorenAuthor Commented:
Hi Scott

I adapted what I found on the link to the following code:
<div class="fs-grid">
<div class="fs-row">
<div class="fs-cell fs-sm-3 fs-md-2 fs-lg-4">Shoe</div>
<div class="fs-cell fs-sm-3 fs-md-2 fs-lg-4">Shoe</div>
<div class="fs-cell fs-sm-3 fs-md-2 fs-lg-4">Shoe</div>
<div class="fs-cell fs-sm-3 fs-md-2 fs-lg-4">Shoe</div>
</div>
</div>

Open in new window


Here is the result on my test page.  Could you take a look?    I'm not getting four across on fs

Test page

Thanks!

Rowby
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think some of what I thought I posted did not go through.  Look at the html example and notice the classes

"product-index desktop-3 tablet-half mobile-half".  Looking at the original example, view in console to find the css, then go to that line in the css file, you can see they have their own classes
.gridlock .row [class*="all-"].contained,
.gridlock .row [class*="min-"].contained,
.gridlock .row [class*="mobile-"].contained,
.gridlock .row [class*="tablet-"].contained,
.gridlock .row [class*="desktop-"].contained,
.gridlock .row [class*="max-"].contained {

Open in new window


If you look at stylesheet.css at about row 40 and below you can see the classes.  Is there any instructions for this theme?

It looks like you are going to use tablet-, mobile-, desktop- coupled with fifth, fourth, third, half  So desktop-fourth.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Hi Scott,

I'm fine tuning it with the template developer.  Give me a day and I'll award you the points.

Thanks

Rowby
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Sounds good.  Make sure to post whatever the developer told you and if it is different than mine to accept your answer as well.  That way others will benefit.
Rowby GorenAuthor Commented:
It'll be a few more days before I get feedback fro. Client.
Rowby GorenAuthor Commented:
Hi Scott,

I haven't forgotten this question, but am getting more and more educated (with some other questions here on EE)  on the best way to do this with the Grid system.

I'll finally close it when I have something more intelligent -- and useful to others -- to present.

Thanks

Rowby
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
> best way to do this with the Grid system

Yes, and would suggest to stick with bootstrap http://getbootstrap.com/ or foundation http://foundation.zurb.com/.  If you are using themes for a cms site, look at the code, if they are using their own media queries or something else, stay away, it will be trouble.  

Foundation has a much better site for  learning, but I find more sites actually use bootstrap to the point many options are written for it more than I see for foundation.  VHS/Beta kind of thing.  

Using bootstrap for me has become second nature.   For me the best way to learn is to use it.  Look at the docs http://getbootstrap.com/ and pay attention to the css section first. Also play with some of the examples by loading one on a blank page and start manipulating to make something your own http://getbootstrap.com/getting-started/#examples.    If you go over to http://jsbin.com/, you can click on Add Library and just add bootstrap latest.  Then start adding code (just the body) and get instant results.

You can also check out https://www.codecademy.com/courses/web-beginner-en-yjvdd/0/1 or http://www.w3schools.com/bootstrap/
Rowby GorenAuthor Commented:
Hello Scott -- I have not forgotten this question.  Still dealing with other website issues.  Stay tuned.  Should return in a day or so or sooner!

Rowby
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
No worries, I am just as busy... :)
Rowby GorenAuthor Commented:
I think I will be able to close this next week with my updates.

Rowby
Rowby GorenAuthor Commented:
Hi Scott,

Thanks for all the information about grids etc etc.   I'm better informed now!

Your below comment was especially helpful:

.gridlock .row [class*="all-"].contained,
.gridlock .row [class*="min-"].contained,
.gridlock .row [class*="mobile-"].contained,
.gridlock .row [class*="tablet-"].contained,
.gridlock .row [class*="desktop-"].contained,
.gridlock .row [class*="max-"].contained {
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.