I’m having a problem at a service

Asked

Viewed 61 times

1

I’m having a problem leaving a Section with the icons horizontal, they’re vertical and I can’t fix it ..

full html code:

@import url('https://fonts.googleapis.com/css?family=Paytone+One');
*{
	margin: 0;
	padding: 0;
	font-family: helvetica;
}



header{
	z-index: 5;
	position: fixed;
	width: 100%;
	height: 70px;
	background-color: #fff;
	-webkit-transition: background-color .5s;
}

nav{
	display: table;
	margin: auto;
	margin-top: 15px;
	height: 40px;
	-webkit-transition: margin-left .5s;
}

ul{
	margin-right: 850px;
	display: block;
	float: right;
	list-style: none;
}

ul li{
	float: left;
	margin: 10px;

}

ul a{
	color: #000;
	text-decoration: none;
	-webkit-transition: color .1s;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    background-color: #3F51B5;
    color: #fff;
}
.center{
    text-align: center;
}

.parallax-targeta{
    height: 700px;
    background: transparent center fixed;

}


.parallax-targetb{
    height: 300px;
    background: transparent center fixed;

}


.middle{
    min-height: 400px;
	background: transparent;
}
.slide{
	background-image: url(../img/2853636-firewatch-wallpapers.png);
    background-repeat: no-repeat;
	background-size: 100% auto;
	width: 100%;
	height: 700px;
}

iframe{
   position: absolute;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
}

    .sec-services {
    background: #14B97D;
    padding-top:70px;
    padding-bottom:70px;
    color:#fff;
    }
    #services h3{
    padding-bottom:100px;
    }
    .sec-services h2,
    .sec-services p {
    font-weight: 300;
    text-align: center;
    }
    .sec-services{
    font-size:1.1em;
    }
    .sec-services i {
    display: block;
    margin: auto;
    width: 45px;
    }

    .sec-services .fa-paint-brush {
    width: 64px;
    }

    .sec-services .fa-code {
    width: 68px
    }

    .sec-services h2 {
    margin: 1em 0;
    }

    p 
{
    word-wrap: break-word;
    }

.container-fluid {
  padding: 0 1em;
}


.intro .container, .features .container, .portfolio .container, .contact .container {
  padding: 5em 0;
}

.intro, .features, .portfolio, .contact {
  text-align: center;
}

.intro {
  background-color: #E74C3C;
  color: #fff;
}

.intro a, .intro a:hover, .intro a:focus, .intro a:active, .intro a:visited {
  color: #fff;
}

.features img {
  display: block;
  margin: 0 auto 1em;
  max-width: 200px;
}

.features .col-3 {
  margin: 3em auto;
  width: 100%;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>efecto scroll en menu</title>
	<link rel="stylesheet" href="style/index_style.css">
		<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/> 
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">	

	 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<script src="js/jquery-2.2.1.min.js"></script>
	<script src="dependencies/parallax.js-1.4.2/parallax.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src='js/script.js'></script>
</head>
<body>
	<header>
		<nav>
			<ul>
				<a href='http://www.keyquotes.es'><li>Inicio</li></a>
				<a href='http://www.keyquotes.es'><li>Videos</li></a>
				<a href='http://www.keyquotes.es'><li>Im&aacute;genes</li></a>

				<a href='http://www.keyquotes.es'><li>Youtube</li></a>
				<a href='http://www.keyquotes.es'><li>Nosotros</li></a>
				<a href='http://www.keyquotes.es'><li>Contacto</li></a>
			</ul>
		</nav>
	</header>

	<main class="content">
		
		<section class="slide">
			<div class="content">
<iframe src="http://www.youtube.com/embed/sVxBaRYnjgE?autoplay=1&amp;modestbranding=1&amp;nologo=1&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;wmode=opaque&amp;controls=0" width="690" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
				</div>
</section>
	<section class="services">
		 <div id="services" class="sec-services">
  <div class="container cf">
        <div class="row">
        <div class="col-xs-4 col-sm-4">
          <i class="fa fa-4x fa-paint-brush"></i>
      <h2 class="h3">1323</h2>
          <p>Cfaefaekfneiafjieajfaei.</p>
        </div>

        <div class="col-xs-4 col-sm-4">
          <i class="fa fa-4x fa-code"></i>
          <h2 class="h3">1323</h2>
          <p>Cfaefaekfneiafjieajfaei.</p>
        </div>

        <div class="col-xs-4 col-sm-4">
          <i class="fa fa-4x fa-tablet"></i>
      <h2 class="h3">1323</h2>
          <p>Cfaefaekfneiafjieajfaei.</p>
      </div>
    </div>
  </div>
		</div>
</section>
		
		
		<div class="container-fluid features" id="skills">
  <div class="container cf">
    <h2>Skills &amp; Experience</h2>
    <div class="col-XS-4">
      <img src="https://s22.postimg.org/oi5es3fkx/icon_cloud.png" alt="">
      <h3>Cloud Computing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
    </div>
    <div class="col-XS-4">
      <img src="https://s22.postimg.org/jxj8d5vvl/icon_coding.png" alt="">
      <h3>Expert Coding</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
    </div>
    <div class="col-XS-4">
      <img src="https://s22.postimg.org/citwksa01/icon_graph.png" alt="">
      <h3>Data Analysis</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
    </div>
  </div>
</div>


		
		
<div class="parallax-targeta section-0" data-parallax="scroll" data-image-src="img/4.jpeg">
				</div>
<!-- section 2 starts-->
<!-- section 3 starts-->
<div class="parallax-targetb section-1" data-parallax="scroll" data-image-src="img/3.jpeg"></div>
<!-- section 4 starts-->


</main>
<script>
$(window).on("load resize", function(e){
   var vid = $("iframe");

   if(e.type == "load"){
      var vid_w_tag = vid.attr("width");
      var vid_h_tag = vid.attr("height");
      proporcao = vid_w_tag/vid_h_tag;
      vid.attr("width","100%")
      .css('max-width', vid_w_tag+'px');
   }

   var vid_w = vid.width();
   vid.attr('height',vid_w/proporcao);
});	
	</script>
</body>
</html>

as you can see in the snippet I’m having trouble in a Section :

    <div class="container-fluid features" id="skills">
  <div class="container cf">
    <h2>Skills &amp; Experience</h2>
    <div class="col-XS-4">
      <img src="https://s22.postimg.org/oi5es3fkx/icon_cloud.png" alt="">
      <h3>Cloud Computing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
    </div>
    <div class="col-XS-4">
      <img src="https://s22.postimg.org/jxj8d5vvl/icon_coding.png" alt="">
      <h3>Expert Coding</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
    </div>
    <div class="col-XS-4">
      <img src="https://s22.postimg.org/citwksa01/icon_graph.png" alt="">
      <h3>Data Analysis</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
    </div>
  </div>
</div>

her style:

.intro .container, .features .container, .portfolio .container, .contact .container {
  padding: 5em 0;
}

.intro, .features, .portfolio, .contact {
  text-align: center;
}

.intro {
  background-color: #E74C3C;
  color: #fff;
}

.intro a, .intro a:hover, .intro a:focus, .intro a:active, .intro a:visited {
  color: #fff;
}

.features img {
  display: block;
  margin: 0 auto 1em;
  max-width: 200px;
}

.features .col-3 {
  margin: 3em auto;
  width: 100%;
}
html css
  • 1

    Can you make a Jsfiddle or plunker to simulate? It doesn’t seem wrong to me... And of course, if you’re accessing from a tablet/phone, it will respect the col-sm and it’s going to be vertical.

  • @Jackson opa bro https://jsfiddle.net/n787z9fv/

  • https://jsfiddle.net/7hvhcm9t/ this aq tb came in handy :(

  • Face put the <head> of your site, or preferably the whole HTML! I think it may be the CDN version of Bootstrap that you are using.

  • https://jsfiddle.net/77vf582f/ ta ai mano the full html.

  • Gabriel edited my answer with the part of Skill right at the beginning you will see, just copy to your page. but due to the size of the images on small screens can break the layout, ai is better to play each one for a same line...

  • And then young man worked out now?

  • gave Certissimo Broo, agr I understood with the examples q vc passed me man!

Show 3 more comments
No answers

Browser other questions tagged html css

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