Inline display does not work

Asked

Viewed 692 times

2

I’d like to leave mine section same as this page here notice that just below the header a 3 circular objects with title and text and when you redeem the screen one goes down the other I want to do something like this only instead of using images I use the font-awelsome that it is easier however I can not leave the text right as the image and the effect of redemption ta half bugged

#sessao-1 {
  text-align: center;
  color: #000;
  font-family: Gabriola;
  margin-top: 750px;
}
#sessao-1 h1 {
  font-size: 3em;
}
#sessao-1 #texto-sessao {
  width: 550px;
  max-width: 85%;
  margin: -30px auto;
  font-size: 1.1em;
}
.info {
  margin: 70px auto;
  text-align: center;
}
.info p {
  width: 350px;
  max-width: 85%;
  margin: -20px auto;
  text-align: center;
  font-size: 1.1em;
}
.info li {
  display: inline-block;
}
.info li i {
  color: #222;
  margin: 30px;
  font-size: 2em;
  width: 5px;
  text-align: center;
  border: 2px solid #222;
  border-radius: 50%;
}
<section id="sessao-1">
  <h1>Porque nos escolher</h1>
  <p id="texto-sessao">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <ul class="info">
    <li>
      <a href="#">
        <i class="fa fa-code"></i>
        <br/>Codigo Semantico</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>

    <li>
      <a href="#"><i class="fa fa-heart"></i><br/>Layout responsivo</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>

    <li>
      <a href="#"><i class="fa fa-plus"></i>Otima qualidade</a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>
  </ul>
</section>

here on my screen gets bad follow the screenshot: inserir a descrição da imagem aqui

What am I doing wrong?

Note: In mozila for example one is on top of the other not understand why

html css

3 answers

3

The example site you quoted uses the foundation.css. CSS was missing. See: 

    #sessao-1 {
      text-align: center;
      color: #000;
      font-family: Gabriola;
      margin-top: 750px;
    }
    #sessao-1 h1 {
      font-size: 3em;
    }
    #sessao-1 #texto-sessao {
      width: 550px;
      max-width: 85%;
      margin: -30px auto;
      font-size: 1.1em;
    }
    .info {
      margin: 70px auto;
      text-align: center;
    }
    .info p {
      width: 350px;
      max-width: 85%;
      margin: -20px auto;
      text-align: center;
      font-size: 1.1em;
    }
    .info li {
      display: inline-block;
    }
    .info li i {
      color: #222;
      margin: 30px;
      font-size: 2em;
      width: 5px;
      text-align: center;
      border: 2px solid #222;
      border-radius: 50%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://www.egrappler.com/responsive-app-landing-page/css/foundation.min.css" rel="stylesheet"/>
    <section id="sessao-1">
      <h1>Porque nos escolher</h1>
      <p id="texto-sessao">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <ul class="info">
                <li>
                    <a href="#">
                        <i class="fa fa-code"></i>
                        <br/>Codigo Semantico</a> <br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                </li>

                <li>
                    <a href="#"><i class="fa fa-heart"></i>
                        <br/>Layout responsivo</a><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                </li>

                <li>
                    <a href="#"><i class="fa fa-plus"></i>
                        <br>Otima qualidade</a><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </li>
            </ul>
        </section>

  • so friend saw here your example however you know these "titles" they do not descend stand next to the icon in case I only quoted that site as an example of how I wanted to stay in the end that was what I was trying there I tested your code and it worked however not all

  • Do you want the icons to always be above the title, or just when resizing the page? This shape you are using, with the icon inside the list, causes a distortion on the image side, because of the list marker. Is that really what you want? I’m seeing here if I can find a solution, but if you wanted something like this, but with the Bootstrap, would be much simpler to do with divs, by the system of grid.

  • 1

    I edited the answer code, doing what I think you wanted (using <br>), but the way @Chun posted below is much more than just more elegant, it’s the right one to do. ;)

3


This is because it is necessary to use also media queries in order to achieve the intended:

.info li {
    display: inline-block;
    width: 180px;
    vertical-align:top;
}
/* Isto aplica o CSS desejado para telas com a resolução menor ou igual a - 600px */
@media only screen and (max-width: 600px) {
    .info li {
        width: 100%;
        margin:10px 0;
    }
}

Here’s a Online Example in Jsfiddle. Drag the results dialog to see the media queries in action. I changed and fixed some other parameters in HTML and CSS as well.

1

One thing is fact, if you try to change the dimension characteristics of an inline component, it will not accept. In your case, the tag that serves to put the font-awesome is inline. If put display: inline-block, the background will get round... Notice that your circle takes up space of a letter...

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.