Search code examples
bootstrap-4media-queries

Media queries bootstrap4

I have this setup and I'm trying to learn media queries but i don't really understand how to make them bigger on smaller devices. when i try out different media queries with the columns everything gets messed up. As it is on desktop i have 3 rows with 4 columns and i would like it, on mobile to be displayed one row below the other. As it is in my browser it gets resized the way i want it to but on my phone, it doesn't.

<div class="container mt-4">
<% @ads.in_groups_of(4, false).each do |group| %>
  <div class='row'>
    <% group.each do |ad| %>
      <div class='col-md-3'>
      <div class="card-deck">
      <div class="card mt-3">
      <img class="card-img-top" src='<%= url_for(ad.photos[0])%>' max-width: auto alt="Card image cap"> 
      <div class="card-body ">
        <h5 class="card-title"> <%= ad.title %> </h5>
        <p class="card-text"><%= truncate(ad.description, :length => 30)%></p>
        <p class="card-text"><%= ad.area %></p>
        <a href="#" class="card-link" mb-5><%= ad.contact %></a>
        
        </div>
        <%= link_to 'Show', ad %>
        <br>
    <div class="card-footer">
        <small>Created <%= time_ago_in_words(ad.created_at) %> ago </small>
    </div>
        </div>
    </div>
      </div>
    <% end %>
  </div>
<% end %>
</div>

here is a video of whats happening hoping it could help

https://drive.google.com/file/d/1BzPAKI0i7uIilmag67s9s3o3tivPn8mQ/view?usp=sharing

Solution

  • Make a large window.Expand and shrink to your hearts content and enjoy.Point to be noted, i made it single column span when screen-size < 545px.

    body {
  overflow-x: hidden;
  background: #f5f3ef;
  margin-top: 4rem;
}

.container-custom-nav {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media(min-width:768px) {
  .container-custom-nav {
    max-width: 768px;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media(min-width:1024px) {
  .container-custom-nav {
    max-width: 1024px;
  }
}

@media(min-width:1280px) {
  .container-custom-nav {
    max-width: 1280px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.products-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75rem;
}

@media(min-width:1024px) {
  .products-grid-view {
    gap: 0.875rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.product-cards {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0.25rem;
  background: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.45s ease-in-out;
}

.product-cards::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
  opacity: 0;
  box-shadow: 0 0.0px 0.6px rgba(0, 0, 0, 0.135), 0 0.0px 1.3px rgba(0, 0, 0, 0.118), 0 0.0px 2.2px rgba(0, 0, 0, 0.103), 0 0.2px 3.3px rgba(0, 0, 0, 0.093), 0 0.8px 4.8px rgba(0, 0, 0, 0.083);
  transition: opacity 0.45s ease-in-out;
}

.product-cards:hover {
  transform: scale(1.0625, 1.0625);
  cursor: pointer;
}

.product-cards:hover::after {
  opacity: 1;
}

.product-cards .img-body {
  padding: 1rem;
}

@media(min-width:1280px) {
  .product-cards .img-body {
    padding: 1.125rem;
  }
}

.product-cards .img-body img {
  width: 100%;
  height: auto;
  border-radius: 0.125rem;
}

.product-cards .desc {
  flex: 1 1 auto;
  text-align: center;
  padding: 1rem 0.75rem 1.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.025rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.product-cards .price {
  text-align: center;
  margin-bottom: auto;
  padding: 0 0 2.5rem 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
}
    <body class="container-custom-nav">
  <div class="products-grid-view">

    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>
    <div class="product-cards">
      <div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
      <div class="desc">My Product</div>
      <div class="price">$399 USD</div>
    </div>

  </div>
</body>