Menu icon Foundation
Why small-6 is not working in this Foundation 6.4 Code?

I was working on a layout using Zurb Foundation 6.4 Framework where I have 3 Cards having 3 images of 320x180 px each in each column. I want when it will viewed in small screen then there will be two cards in each row.

It is working as expected for large view- 3 columns. But in small view it should have 2 columns or cards but it is showing 1 card or 1 column.

Codepen : https://codepen.io/coolsaint/pen/LzbpOy

I am not being able to figure out what is happening. Can anyone tell me how to solve the problem?

<div class="grid-container">
  <div class="grid-x small-6 large-4 align-center">


    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    


  </div>
</div>

gridbreakpointsResponsive

I was working on a layout using Zurb Foundation 6.4 Framework where I have 3 Cards having 3 images of 320x180 px each in each column. I want when it will viewed in small screen then there will be two cards in each row.

It is working as expected for large view- 3 columns. But in small view it should have 2 columns or cards but it is showing 1 card or 1 column.

Codepen : https://codepen.io/coolsaint/pen/LzbpOy

I am not being able to figure out what is happening. Can anyone tell me how to solve the problem?

<div class="grid-container">
  <div class="grid-x small-6 large-4 align-center">


    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    


  </div>
</div>
Rafi Benkual almost 2 years ago

I think that the markup is i bit more complex than needed. You can use the block grid to do this easily https://foundation.zurb.com/sites/docs/xy-grid.html#block-grids

Example https://codepen.io/rafibomb/pen/wreYaR?editors=1000

Suman Haldar almost 2 years ago

Thank you very much Rafi for your kind reply and solution. It almost fixed my problem. I had no idea about block grid. Now I have started using it. I have noticed you have used margin auto to centrally align the image element inside the card.

.card image 
{
margin:auto;
}

But after solving the stretching problem I have decided ad some content to the card so I have used card-section under the card image. Also I have wrapped the image with a link element. It works fine on small and large breakpoints I mean till 1024x 820 px but after that you can see the card-section's alignment changes and the image or cards are wrapped by more margin. 

I don't want more than 3px margin around the cards or images. But I don't mind as much as margin needed around grid-x or grid-container to keep the cards centrally aligned. 

Here you can view the current Codepen : https://codepen.io/coolsaint/pen/wrybVp/

 

 

Nik Sol almost 2 years ago

Hello Suman,

I think your problem with alignment comes from adding <a> tag to the image which breaks the img alignment. To solve this you can do 2 things:

  1. Add <a> tag to the whole card div (this will preserve the original formatting, but will make the whole card a link
  2. Add in css 
    .card a {text-align: center;}

    this will center the image

Also I would recommend you cleaning your code a bit:

  • You do not need large-up-3 when you already have medium-up-3 as medium-up-3 would apply the rule to any screen from medium breakpoint and larger.
  • If you would like to align .card section to center too, you could use this:
    .card > a, card-section {text-align: center;}

     

Hope this helps you!

Axa Berry almost 2 years ago

I have faced same problem and while searching on the internet, I came across few assignment services provider including GoAssignmentHelp. But, of course they seemed to have the most positive reviews. So, I reached out to them for (Keyword). Today, I am so happy after going through the assignment, that I have actually taken time out to share this review. They have done utmost justice to the assignment, imparting everything that I wanted…in a thorough professional manner.

Professional Business Assignment Help

 

Suman Haldar almost 2 years ago

There should be a way to report a reply as a spam. For some days Foundation is getting spammed by the spammers and they are not taken care of seriously. I strongly suggest a way to spam report option with every reply. Now there is an option to report spam for post which is also not taken care of regularly I believe. One more thing when you report a post as spam it redirects you to the first page of the forum. I believe redirecting to the same forum page where I was would be a better option for usability. 

Some Spams and Spammers : 

https://foundation.zurb.com/forum/posts/54525-quick-resolve-spamming-issue-by-att-customer-service-email (Reported Today)

https://foundation.zurb.com/forum/posts/54575-do-you-want-to-increase-writing-skills (Reported Today)

Spams in the Reply :

https://foundation.zurb.com/forum/posts/53732-newsletter-outlook-compability (Mass link spamming in the reply by shakti singh but there is no way to flag that reply)

https://foundation.zurb.com/forum/posts/54292-animate-hamburger-menu-add-close-icon (The last reply by sidd yadav no way to flat that reply that as spam)

I wish moderators will take care of the spamming issues in the board. 

jenifer connorsmk 12 months ago

Assignment writing task given by the professors is certainly an uphill battle for many. Students often look for reliable assignment help Sydney to free themselves from the stress of academic writing. This is the reason, we, at Assignment Prime, have arrived with the best assignment writing service Sydney to help Aussie scholars with their academic errands.

Dissertation Editing Services