4

Before posting this I saw several question, including

  1. question
  2. question
  3. question

and also the guide to flex-box of css tricks. However I don't understand how to solve a problem regarding the rendering of some cards that I made.

Problem

The behaviour of the cards is not OK:

  • The text sometimes is going outside (I tried to use word-break: keep all) the cards and I don't understand why
  • Sometimes the space between two cards is 0 pixels.

Expected behaviour

Cards with the text inside them, and that respect the space between them.

Code

.wrapper{
  min-height: 100vh;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
}

.content {
  height:auto;
  flex: 1;
  background: #FAFAFA;
  display: flex;
  color: #000;
}
.columns{
  display: flex;
  flex: 1;
}
.main{
  z-index:1;
  flex: 1;
  background: #eee;
}
.sidebar{
    overflow: auto;
    text-align: center;
    z-index: 1;
    height: 100%;
  width: 40%;
  background: white;
}
.title{
    font-size: 25;
    margin-bottom: -20px;
    width: 100%;
}

.photo{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 50%;
}

.rating{
    font-size: 20px;
}

.card {
    cursor: pointer;
    text-overflow: ellipsis;
    background-color: white;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 1px 1px 50px black;
    margin:auto;
    width: 55%;
    height: 320px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   margin-top: 50px;
   margin-bottom: 50px;
    word-break:keep-all;
    padding: 0px;
}

a{
    text-decoration: none;
    text-decoration-color: black;
    color: black;
}

.address{
    font-size: 20px;
    padding: 20px;
}
<html>
  <head>
    <title>Restosearch</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <!-- Menu down below -->
    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <!-- Menu up above -->

    <!-- Input, maps and cards down below -->
    <main>
        <div class="container">
            <div class="box">
                <div>
                    <h2 style="">Search the closest restaurant</h2>
                </div>
            </div> 
        </div>
        <div class="downBox">
                    <input id="pac-input" class="controls" type="text" placeholder="insert here: yourNation, yourCity, yourStreet">
        </div>

        <div class="divider"></div>

        <div class="wrapper">
            <section class="content">
                <div class="columns">
                    <main class="main">
                        <div id="map"></div>
                    </main>
                    <aside class="sidebar" style="background-color: gainsboro">

                    </aside>
                </div>
            </section>
        </div>

        <div class="divider"></div>

        <!-- this section will appear only when you click on a card -->

        <!-- Ricorda di settare i css per queste sezioni, il titolo deve essere circa alto 20/ 30 %  -->
        <div class="wrapperTwo detail">
           <section class="content">
                <div class="columns">
                   <aside class="sidebarTwo" style="">
                         <div class="placeInfo">

                       </div>
                    </aside>
                    <main class="mainTwo">
                      <div class="detailtitle"><h2>Titolo del ristorante qua</h2></div>
                       <hr>
                        <div class="review">

                        </div>

                    </main>
                </div>
            </section>

        </div>

        <!-- Input, maps and cards up above -->
    </main>  
  </body>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="script.js"> </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=MyApi&libraries=places&callback=initAutocomplete"
         async defer></script>
</html>

Every card is generated dynamically with this code:

  $(".sidebar").append("<div class=\"card\" id=\"" + idPlace +"\"><img src=\"" + photoMarker + " \"class=\"photo\"><div class=\"title\"><h6>" + name +"</h6></div><div class=\"rating\"><p>Rating: "  + rating + "</div class=\"address\"><p>" + address + "<div class=\"space\"></div></p></div>");

This is the resulting card in the HTML structure:

<div class="card">
    <img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="photo">
    <div class="title"><h4></h4></div>
    <div class="rating"></div>
    <p></p>
</div>

Codepen

codepen here

A note about this codepen: I don't understand why, but in Chrome the layout of the row into the div wrapper is fine, however in the codepen it is not. I'm definitely missing something, so any advice will be really appreciated.

Update

As suggested in the comments i updated the codepen, now you can see differents card in the right sidebar and as you can see the problems are:

  • the text go outside the card space
  • the cards are too closer
  • the sidebar aren't able to read the property of the overflow, in my chrome as you can see the sidebar has a vertical scrollbar.
Legeo
  • 784
  • 4
  • 20
  • 44
  • 3
    In the codepen there is "Google Maps JavaScript API error: InvalidKeyMapError" so it is a little hard to see what you card layout currently looks like in there. Since this seems to be a CSS issue maybe you could paste in some static html that is generated from your search? – robbieAreBest Oct 04 '18 at 18:20
  • I got this error in the [console of forked pen](https://s.codepen.io/Rahul_V7/debug/EdyvpV/mVMbGpgYGXar): `Uncaught SyntaxError: Unexpected token <` at `YvAgOngXbpxA:2` – vrintle Oct 05 '18 at 05:21
  • @robbieAreBest, sorry for the answer of yesterday i didn't read well your comments. Now I added some static card html, as you can see the cards aren't able to read the property of the overflow + they are too much closer. – Legeo Oct 05 '18 at 07:43

1 Answers1

5

Since your code is a mess, I can't see it properly and give you a working example, but your problem sounds simple. In order to see spaces between the cards you need 2 things:

  1. Set the container with justify-content: space-between;
  2. Give a margin to each card

Here is a simple example:

.container{
  width: 80%;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.card{
  background-color: #bada55;
  flex-grow:1;
  margin: 10px;
  height: 50px;
}
<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>
Itay Gal
  • 10,706
  • 6
  • 36
  • 75