Please help me better understand the concept of responsive grid

Hello

I'm not taking advantage of the responsive grid that my website is using.  It's called the Formstone Grid.

 Part of the reason is the Formstone website that supports the grid has very sparse information and no forum.  However for an EE CSS Expert I'm sure you can see exactly what to do.

First of all here's the site that supports the grid.  Formstone Grid web site

Formstone uses "12" as the overall divisions of the page. That much I know :)

And here's the page on my site that I want to format better using the Formstone Grid system.  It's already using Formstone, but I am not taking advantage of it.

Page that needs to take more advantage of the Formstone Grid

There is one main issue on my page:

 There is a big image of a product (a high heel shoe).  And below it are 4 thumbnails.  However after the 3rd thumbnail the image wraps and the 4th thumbnail is all by itself.  I want the 4 thumbnails to line up in a row, and not wrap. There will never be more than 4 thumbnails.

I think I should use Formstone's Asymmetrical layout taking advantage of fs-lg  ????   But am not sure how to make that happen on my page.

Looking forward to your suggestions and better educate for me on the Formstone Grid system.

Thanks

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
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.

Julian HansenCommented:
You should probably take a look at the Bootstrap docs. Not a suggestion that you convert to Bootstrap - although it is something you should give consideration to - but the Bootstrap documentation is quite comprehensive and the concept of grid layouts is similar irrespective of implementation - so you should get a good grounding in what it is all about - which you can then adapt to your framework.

Having had a quick glance at your site I suspect you are looking for something like this
<div class="row">
  <div class="desktop-3">
      <!-- Image 1 here -->
  </div>
  <div class="desktop-3">
      <!-- Image 2 here -->
  </div>
  <div class="desktop-3">
      <!-- Image 3 here -->
  </div>
  <div class="desktop-3">
      <!-- Image 4 here -->
  </div>
</div>

Open in new window

You might need to add in a tablet class if you want a different layout for tables (say 2 x 2 on the images - you would then add tablet-6 next to each of the desktop-3.
Basically what the above is doing is creating 4 equal size cells using 3 columns of the 12 column grid for each cell.
The row wraps the cells to clear floats and provide corrective margins.
0
Rowby GorenAuthor Commented:
Hi

The thumbs are generated by the php, which loops through the images so whatever quantity of thumbs is available is displayed.

With that in mind, here's how it looks -- the thumbs are now vertical instead of horizontal below the main big image.

Arrangement so far

I have commented the html (visible to the browser, since there are no real visitors to the site yet)  And here's the actual php

<!-- For Desktop --> PRODUCT PHOTOS START HERE

  <div id="product-photos" class="desktop-7 tablet-3 mobile-3">
 

    {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

   FEATURED IMAGE STARTS HERE  <div class="bigimage desktop-7 tablet-5">
     <img id="{{ product.id }}" src="{{ featured_image | img_url: '1024x1024' }}" data-image-id="{{ image.id }}" data-zoom-image="{{ featured_image | img_url: 'master' }}" alt='{{ image.alt }}' title="{{ product.title }}"/>
    </div> FEATURED IMAGE ENDS HERE
THUMBS START HERE
    <div class="row">
      <div id="{{ product.id }}-gallery" class="desktop-3 tablet-1">	
      {% for image in product.images %}
      <a href="#" data-image="{{ image | product_img_url: '1024x1024' }}" data-image-id="{{ image.id }}" data-zoom-image="{{ image | product_img_url: 'master' }}">
        <img class="thumbnail" src="{{ image | product_img_url: 'compact' }}" data-image-id="{{ image.id }}" alt="{{ image.alt }}" data-image-id="{{ image.id }}" />
      </a>
      {% endfor %} 
      </div> </div></div>
    THUMBS END HERE
  </div> PRODUCT IMAGES END HERE

Open in new window

Here's what the resulting source code looks like:
 <!-- For Desktop --> PRODUCT PHOTOS START HERE

  <div id="product-photos" class="desktop-7 tablet-3 mobile-3">
 

    

   FEATURED IMAGE STARTS HERE  <div class="bigimage desktop-7 tablet-5">
     <img data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_1024x1024.jpg?v=1438906111" id="1057058948" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_1024x1024.jpg?v=1438906111" data-image-id="" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_1024x1024.jpg?v=1438906111" alt="" title="Blade Heel Glitter Pump">
    </div> FEATURED IMAGE ENDS HERE
THUMBS START HERE
    <div class="row">
      <div id="1057058948-gallery" class="desktop-3 tablet-1">	
      
      <a class="active" href="#" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_1024x1024.jpg?v=1438906111" data-image-id="2919425540" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee.jpg?v=1438906111">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_compact.jpg?v=1438906111" data-image-id="2919425540" alt="Blade Heel Glitter Pump">
      </a>
      
      <a href="#" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2_1024x1024.jpg?v=1438906111" data-image-id="2904624452" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2.jpg?v=1438906111">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2_compact.jpg?v=1438906111" data-image-id="2904624452" alt="Blade Heel Glitter Pump">
      </a>
      
      <a href="#" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-3_1024x1024.jpg?v=1438906111" data-image-id="2904624964" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-3.jpg?v=1438906111">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-3_compact.jpg?v=1438906111" data-image-id="2904624964" alt="Blade Heel Glitter Pump">
      </a>
      
      <a href="#" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-4_1024x1024.jpg?v=1438906111" data-image-id="2904625156" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-4.jpg?v=1438906111">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-4_compact.jpg?v=1438906111" data-image-id="2904625156" alt="Blade Heel Glitter Pump">
      </a>
       
      </div> </div>
    THUMBS END HERE
  </div> PRODUCT IMAGES END HERE

Open in new window


Perhaps I need to re-arrange the divs a bit?

Rowby
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
In your other post, I said the same thing about bootstrap but also foundation too. Both Bootstrap and Foundation go a little beyond just the grid and contain other helper classes, javascripts and widgets.

If you are already deep into this and too hard to switch out that may be fine.  But just add your own helper classes as needed.

One example is using images that are responsive and there are 2 parts to this.  The first is using media queries to deliver different sized images  to different size screens. You may want to load a 200px image for a small screen and a 800px image for a large screen and use some css to make adjustments in between.

For sizing images based on the container, I took a snipped right from bootstrap and made it easier to read. One class called img-responsive that will take the width of the container.

http://jsbin.com/jawayizave/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    .img-responsive{display:block;max-width:100%;height:auto}
    .a{width:100px;}
    .b{width:400px;}
    div{background-color:red;}
  </style>
  <meta charset="utf-8">
  <title>EE Q 28707852</title>
</head>
<body>
  <div class="a"><img class="img-responsive" src="https://cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2_1024x1024.jpg%3Fv=1438906111"></div>
  <div class="b"><img class="img-responsive" src="https://cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2_1024x1024.jpg%3Fv=1438906111"></div>
  <div><img class="img-responsive" src="https://cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2_1024x1024.jpg%3Fv=1438906111"></div>
</body>
</html>

Open in new window


From bootstrap's css http://getbootstrap.com/dist/css/bootstrap.min.css
.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}

Open in new window


If you can have good image that is not too large physically (the image resizing here is only visually if you have a 75K image and use css to make it tiny, it is still a 75k image) you may be able to get a way with loading just one image and use css to resize.  The gotcha is you should avoid resizing up and only resize down.  If you have an image that is 300px wide and resize it up to 600px wide via the browser it will look pixelated.  You can resize down with little issue up to a point.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
You want to put the desktop-3 div in between each thumb - not wrapping all of them - something like this
<div class="row">
      <div id="1057058948-gallery" class="desktop-3 tablet-1">	
      
      <a class="active" href="#" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_1024x1024.jpg?v=1438906111" data-image-id="2919425540" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee.jpg?v=1438906111">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_compact.jpg?v=1438906111" data-image-id="2919425540" alt="Blade Heel Glitter Pump">
      </a>
</div>      
<div id="1057058948-gallery" class="desktop-3 tablet-1">	
      <a href="#" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2_1024x1024.jpg?v=1438906111" data-image-id="2904624452" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2.jpg?v=1438906111">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-2_compact.jpg?v=1438906111" data-image-id="2904624452" alt="Blade Heel Glitter Pump">
      </a>
</div>      
<div id="1057058948-gallery" class="desktop-3 tablet-1">	
      <a href="#" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-3_1024x1024.jpg?v=1438906111" data-image-id="2904624964" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-3.jpg?v=1438906111">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-3_compact.jpg?v=1438906111" data-image-id="2904624964" alt="Blade Heel Glitter Pump">
      </a>
</div>      
<div id="1057058948-gallery" class="desktop-3 tablet-1">	
      <a href="#" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-4_1024x1024.jpg?v=1438906111" data-image-id="2904625156" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-4.jpg?v=1438906111">
        <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-4_compact.jpg?v=1438906111" data-image-id="2904625156" alt="Blade Heel Glitter Pump">
      </a>
       
      </div>
 </div>

Open in new window

Then you have put your main image in a desktop-8 cell and the thumbs next to this - not going to work. Change your main image cell to desktop-12
<div class="bigimage desktop-12 tablet-12">
     <img title="Blade Heel Glitter Pump" alt="" data-zoom-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_1024x1024.jpg?v=1438906111" data-image-id="" src="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_1024x1024.jpg?v=1438906111" id="1057058948" data-image="//cdn.shopify.com/s/files/1/0928/3584/products/casadei-ifa38c100-glitter-blade-pump-black-1_a704f50d-3614-49cb-9576-3df83440afee_1024x1024.jpg?v=1438906111">
    </div>

Open in new window

Try that and see if it is what you are looking for
0
Rowby GorenAuthor Commented:
Yes , Julian -- that is what I was looking for.

Thanks!

I moved the div within the php code to better wrap the thumb -- and crossed my fingers --and the layout is perfect.

I am still trying to get my head aoound the concept  12 not making the big image go completely across the page.

But I will look at the source code and try to check out the logic.

Rowby
0
Julian HansenCommented:
The grid system works relative to its container. The cells are % based so they always work on a % of their parent - not the page.

Therefore if you have
<div class="desktop-3">
   <div class="desktop-6"></div>
</div>

Open in new window


This has the effect of creating a cell 1/8 of the screen - assuming the first <div> is a parent of <body> or a full width element.
The desktop-3 takes 25% of the screen and the desktop-6 takes 50% of that leaving you with 50% of 25% = 12.5% or 1/8th.

Not sure if that was what you were asking.
0
Rowby GorenAuthor Commented:
work on a % of their parent - not the page

Ah hah!    Now things are starting to make sense to me!

Thanks!
0
Rowby GorenAuthor Commented:
BTW I'm keeping this question open while  the client decides if she want "vertical" or "horizontal" thumbnails.

:)

Rowby
0

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:
Lots of great info about Bootstrap / Grids here.  It helped me and hopefully wiil help others.

Rowby
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.