How do I solve the error created by overflow-x: hidden ;?

Question

How do I solve the error created by overflow-x: hidden ;?

Navigation

#1 by (2 votes)

2

Good morning @ Alvaro Montoro solved the problem I had with my website on mobile devices, as you will see in highlighted questions . Well, I was so happy, but today I saw that by adding overflow-x: hidden; , solve the mobile theme, but it broke down on the pc. This page should be as in this image , sorted in columns, but by adding overflow-x: hidden; to work on the mobile, it also stretches it on the pc. Would there be a way to solve this problem, and would it work on the devices well? On the other hand, I added vertical scroll bars in some areas, such as the navigation bar. I'll leave that for another question. Thank you. I hope you see the code I add, tried to reduce it to the maximum, they always have to scold me.

@import url(//fonts.googleapis.com/css?family=Dosis:400);
@import url(//fonts.googleapis.com/css?family=Dosis:700);

@import url(//fonts.googleapis.com/css?family=Denk+One);

@import url(//fonts.googleapis.com/css?family=Open+Sans:400);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300);
@import url(//fonts.googleapis.com/css?family=Open+Sans:600);
@import url(//fonts.googleapis.com/css?family=Open+Sans:700);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic);
/* Otra colavoracion mas de Alvaro Montoro*/
.container{
      overflow-x: hidden;
}


html {

    width: 100%;

}

a[href^="tel:"] {
 color: inherit;
 text-decoration: none;
}

* {
    -webkit-text-size-adjust: none;
}

#navigation{
    display:flex;
    flex-flow:row wrap;
    display: -webkit-flex;
}

body {
    position: relative;
    background-color: #fff;
    color: #908e8e;
    font: 14px/20px 'Open Sans', sans-serif;
}

#container .column {

    padding-top: 0px !important ;
  }


#works{
	background-color: #A4EB8F;
	padding-top: 10px ;
	padding-bottom: 30px ;
	
}
#works p{
	font-size: 20px ;
}

#informacion h2{
    padding-top: 10px ;
}




.ic {
	border:0;
	float:right;
	background:#fff;
	color:#f00;
	width:50%;
	line-height:10px;
	font-size:10px;
	margin:-220% 0 0 0;
	overflow:hidden;
	padding:0
}

strong {
    font-weight: 700;
}

address {
    font-style: normal;
}

p {
    margin-bottom: 20px;
}

.p1 {
    margin-bottom: 24px;
}

input {
    border-radius: 0 !important;
    outline: none !important;
}


img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: #474343;
    font-weight: normal;
    font-family: 'Denk One', sans-serif;
}

h2 {
    font-size: 60px;
    line-height: 60px;
    padding-top: 83px;
    margin-bottom: 40px;
    text-align: center;
}

h2.head1 {
    font-size: 48px;
    padding-top: 99px;
}

h3  {
    padding-top: 69px;
    margin-bottom: 30px;
    font: 30px/43px 'Dosis', sans-serif;
}

.page1 h3 {
    padding-top: 98px;
    margin-bottom: 15px;
}

h4 {
    font-size: 24px;
    line-height: 40px;
    padding-top: 70px;
    margin-bottom: 34px;
}

h4.head1 {
    padding-bottom: 0px;
    margin-bottom: 30px;
}

h4.head2 {
    padding-bottom: 0px;
    margin-bottom: 14px;
}


ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.list .count {
    margin-top: 4px;
    color: #fff;
    font: 30px/48px 'Dosis', sans-serif;
    width: 49px;
    float: left;
    margin-right: 11px;
    text-align: center;
    height: 49px;
    border-radius: 500px;
    background-color: #25952a/*#3da9b6*/;
}

.list li {
    overflow: hidden;
}

.list li+li {
    margin-top: 35px;
}

.list1 {
    margin-top: -3px;
}

.list1 li {
    position: relative;
}

.list1 li+li {
    margin-top: 10px;
}

.list1 li a:after {
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    background-color: #c7c6c6;
    height: 1px;
}

.list1 li a:hover:after {
    background-color: #25952a;/*#3da9b6;*/
    width: 0;
}

.list2  {
    margin-top: -4px;
}

.list2 li {
    background: url(../img/dots.png) 0 72% repeat-x;
    overflow: hidden;
}

.list2 li+li {
    margin-top: 16px;
}

.list2 .prod {
    float: left;
    padding-right: 3px;
    background-color: #fff;
}

.list2 .price {
    padding-left: 3px;
    float: right;
    background-color: #fff;
}

.list2  {
    overflow: hidden;
}

a{
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.btn  {
    margin-top: 73px;
    color: #fff;
    display: inline-block;
    padding: 22px 62px 24px;
    background-color: #25952a /*#3da9b6*/;
    font: bold 30px/40px 'Dosis', sans-serif;
}

.btn:hover {
    background-color: #1d1d1d;
}

.link1 {
    display: inline-block;
    margin-top: 16px;
    font: 24px/26px 'Dosis', sans-serif;
    color: #3b3a3a;
}

.paeg1 .link1 {
    margin-top: 14px;
}


.mb__0 {
    margin-bottom: 0px !important;
}
.m0 {
    margin: 0 !important;
}
.pad0 {
    padding: 0 !important;
}
.img_inner {
    max-width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 25px;
}



.fleft {
    float: left;
    width: auto !important;
    margin-right: 30px;
    margin-bottom: 0px;
    margin-top: 4px;
}

.page1 .fleft {
    margin-top: 8px;
}

.rel {
    position: relative;
}


.oh {
    overflow: hidden;
}
.fright {
    float: right !important;
}
.upp {
    text-transform: uppercase;
}

.alright {
    text-align: right;
}
.center {
    text-align: center;
}
.wrapper, .extra_wrapper {
    overflow: hidden;
}
.clear {
    float: none !important;
    clear: both;
}

.oh {
    overflow: hidden;
}

.nowrap {
    white-space: nowrap;
}


.page1 header h1{
    padding-bottom: 45px;
}
.content {
    padding-bottom: 10px;
    padding-top: 0%;
    margin-top: 0%;
}

.page1 .content {
    padding-bottom: 36px;
}

.text1 {
    color: #6a6a6a;
    margin-top: -21px;
    font: 20px/22px 'Dosis', sans-serif;
    margin-bottom: 26px;
}

.ban_img {
    margin-bottom: 39px;
}
.link22{
    color: #844007;
}

.links a {
    text-decoration: underline;
}

.links li+li {
    margin-top: 10px;
}

/*Blocks*/

.box {
    color: #fff;
    text-align: center;
    display: block;
    background-color: #79c4ca;
    font: 36px/43px 'Dosis', sans-serif;
    margin-bottom: 25px;
}

.box:hover {
    background-color: #1d1d1d;
}

.box_bot  {
    padding-top: 63px;
    padding-bottom: 69px;
}

.box_bot span {
    margin-top: 3px;
    display: block;
    font-size: 30px;
}

.block1 {
    overflow: hidden;
}

.block1+.block1 {
    padding-top: 40px;
}

/**Seps**/
.sep__1 {
    border-top: 1px solid #d9d9d9;
}

.sep__2 {
    padding-top: 77px;
    border-bottom: 1px solid #d9d9d9;
}

.sep__3 {
    height: 92px;
}
.color1 {
    color: #25952a/*#3da9b6*/;
    font-size: 15px;
}

.color1 a:hover, a.color1:hover {
    color: #474343;
}

.color2 {
    color: #474343;
}

.td_und {
    text-decoration: underline;
}


.top {
    margin-bottom: 61px;
    display: inline-block;
    background: url(../images/totop.png) 0 0 no-repeat;
    width: 82px;
    height: 82px;
    transition: 0s ease;
    -o-transition: 0s ease;
    -webkit-transition: 0s ease;
}

.top:hover {
    background-position: right 0;
}



.copy {
    font-size: 12px;
    line-height: 18px;
}

.sub_copy {
    margin-top: -4px;
}


body {
    min-width: 1200px;
  }
  
  /* Containers*/
  .container_12 {
        overflow-x: hidden;
      margin-left: auto;
      margin-right: auto;
      width: 1200px;
  }

  .grid_4 li{
      font-size: 16px;
  }

  .grid_4 p{
    font-size: 16px;
}

  
  .push_1, .pull_1,
  .push_2, .pull_2,
  .push_3, .pull_3,
  .push_4, .pull_4,
  .push_5, .pull_5,
  .push_6, .pull_6,
  .push_7, .pull_7,
  .push_8, .pull_8,
  .push_9, .pull_9,
  .push_10, .pull_10,
  .push_11, .pull_11,
  .push_12, .pull_12 {
      position:relative;
  }
  
  .alpha {
      margin-left: 0;
  }
  
  .omega {
      margin-right: 0;
  }
   
  .container_12 .grid_4 {
      width:370px;
  }
  
  .container_12 .grid_8 {
      width:770px;
  }

  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  
  .clearfix:before,
  .clearfix:after {
    content: '<!DOCTYPE html>
  <!--Esta pagina esta funcionando gracias a la colaboracion de ALVARO Montoro en varias partes de la misma. En ella tambien me ayudo Edgar Gutièrrez -->
<html lang="en">
<head>
	<link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
	<div class="loader">
	</div>
	<div id="navigation">
		<nav class="navbar navbar-custom" role="navigation">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="site-logo">
							<img id="logo" src="../img/logo.png" />
						</div>
					</div>
					<div class="col-md-10">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
								<i class="fa fa-bars"></i>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="menu">
							<ul class="nav navbar-nav navbar-right">
								<li class="active">
									<a href="../index.html">Casa</a>
								</li>
								<li>
									<a href="../galerias.html#about">Sobre mi</a>
								</li>
								<li>
									<a href="../galerias.html">Servicios</a>
								</li>
								<li>
									<a href="../galerias.html">Trabajos</a>
								</li>

								<li>
									<a href="#works">Contacto</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</div>
	<section id="about" class="home-section color-dark bg-white">
		<div class="container marginbot-50">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2">
					<div class="animatedParent">
						<div class="section-heading text-center animated bounceInDown">
							<h2 class="h-bold">Nuestros precios...</h2>
							<div class="divider-header"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--<div class="container">-->
		<section class="content">
			<div class="ic"></div>
			<div class="container_12">
				<div class="grid_8">
					<h4 class="head1">Revise nuestros precios</h4>
					<div class="grid_4 alpha">
						<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. La mayor calidad, al menor precio...</p>
						<ul class="list2">
							<li>
								<div class="prod">
									<a>Mantenimiento mensual</a>
								</div>
								<div class="price">Desde 50€</div>
							</li>
							<li>
								<div class="prod">
									<a>Mantenimiento de comunidades</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de cesped *</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cesped artificial</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de setos</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de rosales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantas ornamentales </a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Diseño de jardines</a>
								</div>
								<div class="price">Variable...</div>
							</li>

							<li>
								<div class="prod">
									<a>(*)En la plantación de césped natural, le ofrecemos un mes de mantenimiento gratuito, y asegurar su agarre y proliferación.</a>
								</div>
								<!--<div class="price">$80,22</div>-->
							</li>

						</ul>
					</div>
					<div class="grid_4 omega">
						<p class="color1">Limpieza y desbroce de fincas. Trabajos de campo, especialistas en huerta ecologica.</p>
						<ul class="list2">
							<br>
							<li>
								<div class="prod">
									<a>Sembramos su huerta</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidamos su huerta</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Arado de fincas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Rotulamos las fincas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de viñedos</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Siembras ecologicas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de frutales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>

						</ul>
					</div>
					<div class="clear"></div>
				</div>



				<div class="grid_4">

					<p class="color1">
						<a href="#">Venta de leña, amplia variedad...</a>
					</p>
					<br>
					<p class="p1">En Agrochema ponemos a su disposición venta de leña a todo el Valle del Tietar: cerezo desde 70€ / 750 kg aprox.; fresnodesde 100€ 850kg aprox. Contamos con màs variedad
						<a href="#" class="link22">Aquì tiene una muestra.</a>
					</p>
					<p class="color1">
						<a href="#">Servicio de portes </a>
					</p>
					<p class="p1">En Agrochema ponemos a su disposición servicio de porte con remolque para todo el Valle del Tietar: portes de aceitunaa la almazara; portes de toda clase escombs</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="sep__2"></div>
			<div class="container_12">
				<div class="grid_4">
					<h3>Trabajos en madera</h3>
					<ul class="list2">
						<li>
							<div class="prod">
								<a>Vallados en madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>

						<li>
							<div class="prod">
								<a>Porches de madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Pèrgolas de madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Cabañas para herramienta</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Casetas de animales</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>(*)Toda la madera que utilizamos es de primera calidad, tratada para aguantar el paso de los años y las </a>
							</div>
						</li>
					</ul>
				</div>
				<div class="grid_4">
					<h3>Nuestro compromiso</h3>
					<ul>
						<li>
							<a>Fiabilidad, innovación y determinación son los valores sobre los que se fundamenta nuestra empresa, el trabajo diario,las relaciones con los clientes y en la forma de hacer nuestro trabajo. Los equipos de trabajo nos unen, garantizandosí que conocimientos y experiencias se compartan y se apliquen en</a>
						</li>
					</ul>
				</div>
				<div class="grid_4">
					<h3>Nuestros objetivos</h3>
					<p>Nuestro objetivo es ofrecer cada día el mejor servicio posible,Ante todo, nos gusta trabajar cuidando el medio ambiente y tanto en limpieza como en jardinería somos</p>
					<br>
				</div>
				<div class="clear"></div>
			</div>
		</section>
	</section>
  
 </body>
 </html>20';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  
  .clearfix:after {
    clear: both;
  }
  
  .clearfix {
    zoom: 1;
  }
  footer {
	text-align: center;
	padding: 30px 0 30px ;
	
}

@import url(//fonts.googleapis.com/css?family=Dosis:400);
@import url(//fonts.googleapis.com/css?family=Dosis:700);

@import url(//fonts.googleapis.com/css?family=Denk+One);

@import url(//fonts.googleapis.com/css?family=Open+Sans:400);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300);
@import url(//fonts.googleapis.com/css?family=Open+Sans:600);
@import url(//fonts.googleapis.com/css?family=Open+Sans:700);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic);
/* Otra colavoracion mas de Alvaro Montoro*/
.container{
      overflow-x: hidden;
}


html {

    width: 100%;

}

a[href^="tel:"] {
 color: inherit;
 text-decoration: none;
}

* {
    -webkit-text-size-adjust: none;
}

#navigation{
    display:flex;
    flex-flow:row wrap;
    display: -webkit-flex;
}

body {
    position: relative;
    background-color: #fff;
    color: #908e8e;
    font: 14px/20px 'Open Sans', sans-serif;
}

#container .column {

    padding-top: 0px !important ;
  }


#works{
	background-color: #A4EB8F;
	padding-top: 10px ;
	padding-bottom: 30px ;
	
}
#works p{
	font-size: 20px ;
}

#informacion h2{
    padding-top: 10px ;
}




.ic {
	border:0;
	float:right;
	background:#fff;
	color:#f00;
	width:50%;
	line-height:10px;
	font-size:10px;
	margin:-220% 0 0 0;
	overflow:hidden;
	padding:0
}

strong {
    font-weight: 700;
}

address {
    font-style: normal;
}

p {
    margin-bottom: 20px;
}

.p1 {
    margin-bottom: 24px;
}

input {
    border-radius: 0 !important;
    outline: none !important;
}


img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: #474343;
    font-weight: normal;
    font-family: 'Denk One', sans-serif;
}

h2 {
    font-size: 60px;
    line-height: 60px;
    padding-top: 83px;
    margin-bottom: 40px;
    text-align: center;
}

h2.head1 {
    font-size: 48px;
    padding-top: 99px;
}

h3  {
    padding-top: 69px;
    margin-bottom: 30px;
    font: 30px/43px 'Dosis', sans-serif;
}

.page1 h3 {
    padding-top: 98px;
    margin-bottom: 15px;
}

h4 {
    font-size: 24px;
    line-height: 40px;
    padding-top: 70px;
    margin-bottom: 34px;
}

h4.head1 {
    padding-bottom: 0px;
    margin-bottom: 30px;
}

h4.head2 {
    padding-bottom: 0px;
    margin-bottom: 14px;
}


ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.list .count {
    margin-top: 4px;
    color: #fff;
    font: 30px/48px 'Dosis', sans-serif;
    width: 49px;
    float: left;
    margin-right: 11px;
    text-align: center;
    height: 49px;
    border-radius: 500px;
    background-color: #25952a/*#3da9b6*/;
}

.list li {
    overflow: hidden;
}

.list li+li {
    margin-top: 35px;
}

.list1 {
    margin-top: -3px;
}

.list1 li {
    position: relative;
}

.list1 li+li {
    margin-top: 10px;
}

.list1 li a:after {
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    background-color: #c7c6c6;
    height: 1px;
}

.list1 li a:hover:after {
    background-color: #25952a;/*#3da9b6;*/
    width: 0;
}

.list2  {
    margin-top: -4px;
}

.list2 li {
    background: url(../img/dots.png) 0 72% repeat-x;
    overflow: hidden;
}

.list2 li+li {
    margin-top: 16px;
}

.list2 .prod {
    float: left;
    padding-right: 3px;
    background-color: #fff;
}

.list2 .price {
    padding-left: 3px;
    float: right;
    background-color: #fff;
}

.list2  {
    overflow: hidden;
}

a{
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.btn  {
    margin-top: 73px;
    color: #fff;
    display: inline-block;
    padding: 22px 62px 24px;
    background-color: #25952a /*#3da9b6*/;
    font: bold 30px/40px 'Dosis', sans-serif;
}

.btn:hover {
    background-color: #1d1d1d;
}

.link1 {
    display: inline-block;
    margin-top: 16px;
    font: 24px/26px 'Dosis', sans-serif;
    color: #3b3a3a;
}

.paeg1 .link1 {
    margin-top: 14px;
}


.mb__0 {
    margin-bottom: 0px !important;
}
.m0 {
    margin: 0 !important;
}
.pad0 {
    padding: 0 !important;
}
.img_inner {
    max-width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 25px;
}



.fleft {
    float: left;
    width: auto !important;
    margin-right: 30px;
    margin-bottom: 0px;
    margin-top: 4px;
}

.page1 .fleft {
    margin-top: 8px;
}

.rel {
    position: relative;
}


.oh {
    overflow: hidden;
}
.fright {
    float: right !important;
}
.upp {
    text-transform: uppercase;
}

.alright {
    text-align: right;
}
.center {
    text-align: center;
}
.wrapper, .extra_wrapper {
    overflow: hidden;
}
.clear {
    float: none !important;
    clear: both;
}

.oh {
    overflow: hidden;
}

.nowrap {
    white-space: nowrap;
}


.page1 header h1{
    padding-bottom: 45px;
}
.content {
    padding-bottom: 10px;
    padding-top: 0%;
    margin-top: 0%;
}

.page1 .content {
    padding-bottom: 36px;
}

.text1 {
    color: #6a6a6a;
    margin-top: -21px;
    font: 20px/22px 'Dosis', sans-serif;
    margin-bottom: 26px;
}

.ban_img {
    margin-bottom: 39px;
}
.link22{
    color: #844007;
}

.links a {
    text-decoration: underline;
}

.links li+li {
    margin-top: 10px;
}

/*Blocks*/

.box {
    color: #fff;
    text-align: center;
    display: block;
    background-color: #79c4ca;
    font: 36px/43px 'Dosis', sans-serif;
    margin-bottom: 25px;
}

.box:hover {
    background-color: #1d1d1d;
}

.box_bot  {
    padding-top: 63px;
    padding-bottom: 69px;
}

.box_bot span {
    margin-top: 3px;
    display: block;
    font-size: 30px;
}

.block1 {
    overflow: hidden;
}

.block1+.block1 {
    padding-top: 40px;
}

/**Seps**/
.sep__1 {
    border-top: 1px solid #d9d9d9;
}

.sep__2 {
    padding-top: 77px;
    border-bottom: 1px solid #d9d9d9;
}

.sep__3 {
    height: 92px;
}
.color1 {
    color: #25952a/*#3da9b6*/;
    font-size: 15px;
}

.color1 a:hover, a.color1:hover {
    color: #474343;
}

.color2 {
    color: #474343;
}

.td_und {
    text-decoration: underline;
}


.top {
    margin-bottom: 61px;
    display: inline-block;
    background: url(../images/totop.png) 0 0 no-repeat;
    width: 82px;
    height: 82px;
    transition: 0s ease;
    -o-transition: 0s ease;
    -webkit-transition: 0s ease;
}

.top:hover {
    background-position: right 0;
}



.copy {
    font-size: 12px;
    line-height: 18px;
}

.sub_copy {
    margin-top: -4px;
}


body {
    min-width: 1200px;
  }
  
  /* Containers*/
  .container_12 {
        overflow-x: hidden;
      margin-left: auto;
      margin-right: auto;
      width: 1200px;
  }

  .grid_4 li{
      font-size: 16px;
  }

  .grid_4 p{
    font-size: 16px;
}

  
  .push_1, .pull_1,
  .push_2, .pull_2,
  .push_3, .pull_3,
  .push_4, .pull_4,
  .push_5, .pull_5,
  .push_6, .pull_6,
  .push_7, .pull_7,
  .push_8, .pull_8,
  .push_9, .pull_9,
  .push_10, .pull_10,
  .push_11, .pull_11,
  .push_12, .pull_12 {
      position:relative;
  }
  
  .alpha {
      margin-left: 0;
  }
  
  .omega {
      margin-right: 0;
  }
   
  .container_12 .grid_4 {
      width:370px;
  }
  
  .container_12 .grid_8 {
      width:770px;
  }

  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  
  .clearfix:before,
  .clearfix:after {
    content: '<!DOCTYPE html>
  <!--Esta pagina esta funcionando gracias a la colaboracion de ALVARO Montoro en varias partes de la misma. En ella tambien me ayudo Edgar Gutièrrez -->
<html lang="en">
<head>
	<link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
	<div class="loader">
	</div>
	<div id="navigation">
		<nav class="navbar navbar-custom" role="navigation">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="site-logo">
							<img id="logo" src="../img/logo.png" />
						</div>
					</div>
					<div class="col-md-10">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
								<i class="fa fa-bars"></i>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="menu">
							<ul class="nav navbar-nav navbar-right">
								<li class="active">
									<a href="../index.html">Casa</a>
								</li>
								<li>
									<a href="../galerias.html#about">Sobre mi</a>
								</li>
								<li>
									<a href="../galerias.html">Servicios</a>
								</li>
								<li>
									<a href="../galerias.html">Trabajos</a>
								</li>

								<li>
									<a href="#works">Contacto</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</div>
	<section id="about" class="home-section color-dark bg-white">
		<div class="container marginbot-50">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2">
					<div class="animatedParent">
						<div class="section-heading text-center animated bounceInDown">
							<h2 class="h-bold">Nuestros precios...</h2>
							<div class="divider-header"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--<div class="container">-->
		<section class="content">
			<div class="ic"></div>
			<div class="container_12">
				<div class="grid_8">
					<h4 class="head1">Revise nuestros precios</h4>
					<div class="grid_4 alpha">
						<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. La mayor calidad, al menor precio...</p>
						<ul class="list2">
							<li>
								<div class="prod">
									<a>Mantenimiento mensual</a>
								</div>
								<div class="price">Desde 50€</div>
							</li>
							<li>
								<div class="prod">
									<a>Mantenimiento de comunidades</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de cesped *</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cesped artificial</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de setos</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de rosales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantas ornamentales </a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Diseño de jardines</a>
								</div>
								<div class="price">Variable...</div>
							</li>

							<li>
								<div class="prod">
									<a>(*)En la plantación de césped natural, le ofrecemos un mes de mantenimiento gratuito, y asegurar su agarre y proliferación.</a>
								</div>
								<!--<div class="price">$80,22</div>-->
							</li>

						</ul>
					</div>
					<div class="grid_4 omega">
						<p class="color1">Limpieza y desbroce de fincas. Trabajos de campo, especialistas en huerta ecologica.</p>
						<ul class="list2">
							<br>
							<li>
								<div class="prod">
									<a>Sembramos su huerta</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidamos su huerta</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Arado de fincas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Rotulamos las fincas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de viñedos</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Siembras ecologicas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de frutales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>

						</ul>
					</div>
					<div class="clear"></div>
				</div>



				<div class="grid_4">

					<p class="color1">
						<a href="#">Venta de leña, amplia variedad...</a>
					</p>
					<br>
					<p class="p1">En Agrochema ponemos a su disposición venta de leña a todo el Valle del Tietar: cerezo desde 70€ / 750 kg aprox.; fresnodesde 100€ 850kg aprox. Contamos con màs variedad
						<a href="#" class="link22">Aquì tiene una muestra.</a>
					</p>
					<p class="color1">
						<a href="#">Servicio de portes </a>
					</p>
					<p class="p1">En Agrochema ponemos a su disposición servicio de porte con remolque para todo el Valle del Tietar: portes de aceitunaa la almazara; portes de toda clase escombs</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="sep__2"></div>
			<div class="container_12">
				<div class="grid_4">
					<h3>Trabajos en madera</h3>
					<ul class="list2">
						<li>
							<div class="prod">
								<a>Vallados en madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>

						<li>
							<div class="prod">
								<a>Porches de madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Pèrgolas de madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Cabañas para herramienta</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Casetas de animales</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>(*)Toda la madera que utilizamos es de primera calidad, tratada para aguantar el paso de los años y las </a>
							</div>
						</li>
					</ul>
				</div>
				<div class="grid_4">
					<h3>Nuestro compromiso</h3>
					<ul>
						<li>
							<a>Fiabilidad, innovación y determinación son los valores sobre los que se fundamenta nuestra empresa, el trabajo diario,las relaciones con los clientes y en la forma de hacer nuestro trabajo. Los equipos de trabajo nos unen, garantizandosí que conocimientos y experiencias se compartan y se apliquen en</a>
						</li>
					</ul>
				</div>
				<div class="grid_4">
					<h3>Nuestros objetivos</h3>
					<p>Nuestro objetivo es ofrecer cada día el mejor servicio posible,Ante todo, nos gusta trabajar cuidando el medio ambiente y tanto en limpieza como en jardinería somos</p>
					<br>
				</div>
				<div class="clear"></div>
			</div>
		</section>
	</section>
  
 </body>
 </html>20';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  
  .clearfix:after {
    clear: both;
  }
  
  .clearfix {
    zoom: 1;
  }
  footer {
	text-align: center;
	padding: 30px 0 30px ;
	
}

html css bootstrap nav

asked by Miguel Espeso 13.03.2018 в 11:26

source

1 answer

Extract data without using extra variables Stop a CSS animation in a certain degree of rotation

score 2 · Answer 1

To solve the problem with scroll bars, try using overflow: hidden instead of just on the X axis.

On the other hand to solve your problem as easy and fast as possible I recommend using a media

@media screen and (max-width: 425px){
  .container{
      overflow-x: hidden;
  }
}

This will only affect the overflow to the LOWER devices in this case to 425 pixels wide screen, which is usually the size of the phones with more screen.