How to Implement style in html (col) to rails

Question

I had a problem when I want to implement my html to rails previously I've made a catalog with 3 columns on the desktop display and 2 columns on a mobile display like this

in desktop display my catalog looks like this

[1] [2] [3]
[4] [5] [6]

but when I change to mobile view, they looks like this

[1] [2]
[3] [4]
    [5]
[6]

previous syntax that I use to html exactly like the links above the question is where should I put

<div class="clearfix visible-xs-block"></div>

and

<div class="clearfix visible-md-block"></div>

do I have to add "IF" or something else in the loop to add the code? this is my view syntax

<div class="row-store">
    <% @games.each do |game| %>
        <div class="con-space col-xs-6 col-md-4">

            <%= image_tag(game.image_url) %>
            <h3><%= game.title %></h3>
            <div>
              <span>Platform:  <%= game.platform.name %></span><br/>
              <span>Price: <%= game.price %> </span>
            </div>

        </div>
    <% end %>
</div>

thx

you can use media w3schools.com/cssref/css3_pr_mediaquery.asp for mobile view — Thorin
– Thorin, Commented May 5, 2016 at 9:34

Ashwin · Accepted Answer · 2016-05-05 10:25:54Z

1

First put 'row' class and inside it loop the 'col-md/sm-*' divs through rails and add class 'mg-btm' to 'col' div. I would recommend not using row-store class with floats or clear css, unless it is for some color styling!

Hope This helps!!

<style>
  .mg-btm {margin-bottom: 15px;}
</style>

<div class="row row-store">

  <% @games.each do |game| %>
    <div class="col-xs-6 col-md-4 mg-btm">
        <%= image_tag(game.image_url) %>
        <h3><%= game.title %></h3>
        <div>
          <span>Platform:  <%= game.platform.name %></span><br/>
          <span>Price: <%= game.price %> </span>
        </div>
    </div>
  <% end %>

</div>

answered May 5, 2016 at 10:25

Ashwin

5626 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaan Burak Sener · Accepted Answer · 2016-05-05 19:25:07Z

I haven't worked with rails yet but the logic should be the following:

<div class="row-store">
    <% i = 0 %>

    <% @games.each do |game| %>

        <div class="con-space col-xs-6 col-md-4">

            <%= image_tag(game.image_url) %>
            <h3><%= game.title %></h3>
            <div>
              <span>Platform:  <%= game.platform.name %></span><br/>
              <span>Price: <%= game.price %> </span>
            </div>

        </div>

        <% if i != 0 %>
            <% if i % 2 == 0 %>
                <div class="clearfix visible-xs-block"></div>
            <% elsif i % 3 == 0 %>
                <div class="clearfix visible-md-block"></div>
            <% end %>
        <% end %>

        <% i++ %>

    <% end %>
</div>

Collectives™ on Stack Overflow

How to Implement style in html (col) to rails

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related