7

Hola tengo problemas con mi web en dispositivos móviles, la cosa que el botón de enlaces en una pagina me sale a la izquierda y en otra sale a la derecha. Pero el texto que se muestra al pulsar el botón de los enlaces es apenas reconocible, Tengo el siguiente código y no consigo que se vean las palabras de enlace negras. ¿ Que debo cambiar para conseguir que los enlaces el texto sea negro y poder distinguirlos en los móviles ? Gracias.

*{
	padding:0;
	margin:0;
}

.container{
      overflow: hidden;
}

html nav.navbar.navbar-custom{
  padding: 0;
  margin:0;
}

html {
  
    width: 100%;
    height: 100%;
}

a {
    color: #666;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    text-decoration: none;
}

.light {
    font-weight: 400;
}

/* ------- Navigation ------------ */
#navigation {
	background: #fff;
	z-index: 9999;
	width:100%;
    box-sizing:border-box;
	border-bottom: 1px solid #eee;
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1);
	
}

/* codigo de Alvaro Montoro  */
div#navigation-sticky-wrapper {
    position: relative;
    z-index: 121;
}

.navbar {
	margin-bottom: 0;
	padding-right: 0% !important;
}

.navbar-brand {
    font-weight: 700;
}


.navbar-brand:focus {
    outline: 0;
}

.nav.navbar-nav {
    background-color: rgba(255,255,255,.6);
}

.navbar-custom.top-nav-collapse .nav.navbar-nav {
    background-color: rgba(0,0,0,0);
}


.navbar-custom ul.nav li a {
	font-size: 16px;
	letter-spacing: 1px;
    color: #444;
	text-transform: uppercase;
	font-weight: 700;
}

.navbar-custom.top-nav-collapse ul.nav li a {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	color: #fff;
}

.navbar-custom ul.nav ul.dropdown-menu {
	  border-radius: 0;	
	margin-top: 21px;
	border-top: none;
}

.navbar-custom ul.nav li a:hover ul.dropdown-menu {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


.navbar-custom ul.nav ul.dropdown-menu li {
	border-bottom: 1px solid #f5f5f5;

}

.navbar-custom ul.nav ul.dropdown-menu li:last-child{
	border-bottom: none;
}

.navbar-custom ul.nav ul.dropdown-menu li a {
	padding: 10px 20px;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
	background: #fefefe;
}

.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
	color: #666;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 14px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}


.home-section.nopadd-bot {
    padding-bottom: 0;
}


.color-light blockquote,.color-light p {
	color: #fefefe;
}

.bg-white {
	background: #fff;
}

.bg-gray {
	background: #f9f9f9;
}


.bg-dark {
	background: #404040;
}

.text-light {
	color: #fff;
}

.brand-heading {
    font-size: 40px;
}

.intro-text {
    font-size: 18px;
}

.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
    color: #fff;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}

.btn-theme {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    margin-right: 15px;
}

.btn-theme:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.btn-lg,
.btn-group-lg > .btn {
  border-radius: 2px;
}

.input-group-addon {
  background-color: #fefefe;
  border: 1px solid #eee;
}

/* --- button --- */
.btn {
	border-radius: 2px;
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;	
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 14px;
}

.btn.btn-noradius {
	border-radius: 0;
}

a.btn:focus{
	outline: 0;
}

.btn-red {
  color: #fff;
  background-color: #c83539;
  border-color: #c83539;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}
.btn-red:active {
  background-image: none;
}


.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}


.btn-default:hover,
.btn-default:focus {
    border: 1px solid #28c3ab;
    outline: 0;
    color: #000;
    background-color: #28c3ab;
}

.btn-huge {
    padding: 25px;
    font-size: 26px;
}

.banner-social-buttons {
    margin-top: 0;
}

/* Media queries */

@media(min-width:767px) {

    .navbar {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }

    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
	
    .intro {
        height: 100%;
        padding: 0;
    }

    .brand-heading {
        font-size: 100px;
    }
	

    .intro-text {
        font-size: 25px;
    }


}
@media (max-width:768px) {
	#navigation {
		padding: 20px 0;
	}
	.site-logo{
		margin: 0 0 0 30px;
		float:none;
	}
	.navbar-custom ul.nav li a {
		color: #eee;
	}
	.navbar-custom ul.nav ul.dropdown-menu li {
		border-bottom: 1px solid #aaa;

	}
	.navbar-header {
		margin-top:-40px;
		padding:0;
	}
	.navbar-header button {
		background: #111;
	}
	
	.navbar-header button.navbar-toggle {
		padding: 4px 15px;
		font-size: 14px;
		color: #fff;
		
	}
	
	.navbar-custom .nav {
		background: #444;
	}
	
	.service-box {
		margin-bottom: 50px;
	}
	
	.team-wrap {
		margin-bottom: 30px;
	}

	.xs-marginbot-20 {
		margin-bottom: 20px;
	}

}

@media (max-width:480px) {
	.nav a{
		color: black;
	}

	.navbar-custom .nav.navbar-nav {
    background-color: rgba(255,255,255,.4);
	}
	
	.navbar.navbar-custom.navbar-fixed-top {
		margin-bottom: 30px;
	}
}

.navbar .navbar-custom {
	padding: 0;
}

/*  OTROS ESTILOS  */

/* Añadido por Checho parrado  */
* {
    -webkit-text-size-adjust: none;
    -webkit-box-sizing:border-box; box-sizing: border-box; 
}

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;
}
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
	<div class="loader">

	</div>
	<img src="http://i42.tinypic.com/212ct3s.jpg"
	 width="100%" height="650" frameborder="0" style="border:0" allowfullscreen>
	<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" alt="Imagen de agrochema" />
						</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">
			<div class="container_12">
				<div class="row">
					<div class="col-md-4 col-sm-12 col-xs-12">
						<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. ...</p>
						<ul class="list2">
							<li>
								<div class="prod">
									<a>Mantenimiento mensual</a>
								</div>
								<div class="price">Desde 50€</div>
							</li>

						</ul>
					</div>
          </div>
          </div>
          </div>
          </div>
          </section>
          <footer>       
          <p>JAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
          </footer>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
  </html>

2
  • 1
    Por favor, lee cómo crear un ejemplo mínimo verificable. No tiene sentido que para un problema con el color de un enlace (un problema bastante sencillo) haya que compartir/mirar cientos de líneas de código.
    – Alvaro Montoro
    Commented el 15 mar. 2018 a las 22:42
  • De acuerdo, edite quitando código, aunque seguro que se puede quitar más. Mil perdones. Commented el 15 mar. 2018 a las 22:50

2 respuestas 2

9

Tu problema está en el media query, ya que le estás indicando que tenga el color #eee. Simplemente ponle el color negro o el que desees a la regla que aplica a los enlaces en el media query y listo.

@media (max-width:768px) {

    .navbar-custom ul.nav li a {
        color: black;
    }
}

Tu ejemplo modificado:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
@import url('https://fonts.googleapis.com/css?family=Ek+Mukta:400,600,700');
*{
	padding:0;
	margin:0;
}

.container{
      overflow: hidden;
}

html nav.navbar.navbar-custom{
  padding: 0;
  margin:0;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Ek Mukta', sans-serif;
	font-weight: 300;
    color: #666;
    background-color: #fff;
	font-size: 16px;
    line-height: 1.6em;
	font-weight: 400;
	overflow-x: hidden;
}

html {
  
    width: 100%;
    height: 100%;
}

.big-heading {
	font-size: 48px;
	font-weight: 700;
}

p {
    margin: 0 0 10px;

}

.text-center{
	font-size: 20px;
	
}

.service-desc p{
	font-size: 16px;
}

p.lead {
	font-weight: 600;
}

.highlight-light {
	background-color: rgba(255,255,255,.5);
	padding: 20px;
	display: inline-block;
	color: #111;
}

.highlight-dark {
	background-color: rgba(0,0,0,.5);
	padding: 20px;
	display: inline-block;
	color: #fff;
}

.highlight-color {
	padding: 20px;
	display: inline-block;
}

a {
    color: #666;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    text-decoration: none;
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 24px;
	line-height: 1.5em;
  font-weight: 300;
  color: #999;
}

blockquote.bg-light {
	background-color: rgba(255,255,255,.8);
	padding: 20px;
	color: #222;
}

blockquote.bg-dark {
	background-color: rgba(0,0,0,.8);
	padding: 20px;
}

blockquote strong {
  font-weight: 700;
}
.light {
    font-weight: 400;
}

.site-logo {
	display: flex;
}
.site-logo a.brand {
	color: #111;
	text-transform: uppercase;
	font-size: 32px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	margin-top: 20px;
}


/* ------- Navigation ------------ */
#navigation {
	background: #fff;
	z-index: 9999;
	width:100%;
    box-sizing:border-box;
	border-bottom: 1px solid #eee;
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1);
	
}

/* codigo de Alvaro Montoro  */
div#navigation-sticky-wrapper {
    position: relative;
    z-index: 121;
}

.navbar {
	margin-bottom: 0;
	padding-right: 0% !important;
}

.navbar-brand {
    font-weight: 700;
}


.navbar-brand:focus {
    outline: 0;
}

.nav.navbar-nav {
    background-color: rgba(255,255,255,.6);
}

.navbar-custom.top-nav-collapse .nav.navbar-nav {
    background-color: rgba(0,0,0,0);
}


.navbar-custom ul.nav li a {
	font-size: 16px;
	letter-spacing: 1px;
    color: #444;
	text-transform: uppercase;
	font-weight: 700;
}

.navbar-custom.top-nav-collapse ul.nav li a {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	color: #fff;
}

.navbar-custom ul.nav ul.dropdown-menu {
	  border-radius: 0;	
	margin-top: 21px;
	border-top: none;
}

.navbar-custom ul.nav li a:hover ul.dropdown-menu {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


.navbar-custom ul.nav ul.dropdown-menu li {
	border-bottom: 1px solid #f5f5f5;

}

.navbar-custom ul.nav ul.dropdown-menu li:last-child{
	border-bottom: none;
}

.navbar-custom ul.nav ul.dropdown-menu li a {
	padding: 10px 20px;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
	background: #fefefe;
}

.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
	color: #666;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 14px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}

hr {
  margin-top: 10px;
}

hr.bold {
  border-top: 3px solid #eee;
}

.divider-header {
	display: block;
	width: 40px;
	height: 2px;
	margin: 0 auto;
	margin-bottom: 10px;
}

.divider-short {
	display: block;
	width: 60px;
	height: 5px;
	margin: 0 auto;
	margin-bottom: 10px;
}
.marginbot-0{margin-bottom:0 !important;}
.marginbot-10{margin-bottom:10px !important;}
.marginbot-20{margin-bottom:20px !important;}
.marginbot-30{margin-bottom:30px !important;}
.marginbot-40{margin-bottom:40px !important;}
.marginbot-50{margin-bottom:50px !important;}
.marginbot-60{margin-bottom:60px !important;}
.marginbot-70{margin-bottom:70px !important;}
.marginbot-80{margin-bottom:80px !important;}
.marginbot-90{margin-bottom:90px !important;}
.marginbot-100{margin-bottom:100px !important;}

.margintop-0{margin-top:0 !important;}
.margintop-10{margin-top:10px !important;}
.margintop-20{margin-top:20px !important;}
.margintop-30{margin-top:30px !important;}
.margintop-40{margin-top:40px !important;}
.margintop-45{margin-top:45px !important;}
.margintop-50{margin-top:50px !important;}

#container-2{
	background-color: #EBB250;
}
.home-section {
    padding-top: 20px;
    padding-bottom: 20px;
	display:block;
    position:relative;
	z-index:120;
	
}
.home-section2 {
    padding-top: 0px;
    padding-bottom: 20px;
	display:block;
    position:relative;
    z-index:120;
}

.inner-section {
    padding-top: 110px;
    padding-bottom: 110px;
}


.home-section.nopadd-bot {
    padding-bottom: 0;
}


.color-light blockquote,.color-light p {
	color: #fefefe;
}

.bg-white {
	background: #fff;
}

.bg-gray {
	background: #f9f9f9;
}


.bg-dark {
	background: #404040;
}

.text-light {
	color: #fff;
}

.intro {
	width:100%;
	position:relative;
	padding:0;
}
.intro-inner {
	width:100%;
	position:relative;
	padding:120px 0 20px;
}

.brand-heading {
    font-size: 40px;
}

.intro-text {
    font-size: 18px;
}

.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
    color: #fff;
}

.header-text h2 {
    font-size: 40px;
}

.header-text h2 span {
	padding: 10px;
	color: #fff;
	text-transform: uppercase;
}

.header-text h3 span {
	color: #fff;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}

.btn-theme {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    margin-right: 15px;
}

.btn-theme:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.item {
    margin: 10px;
}

.item img {
    display: block;
    width: 100%;
    height: auto;
}	

.btn-lg,
.btn-group-lg > .btn {
  border-radius: 2px;
}

.input-group-addon {
  background-color: #fefefe;
  border: 1px solid #eee;
}

.widget-contact {
	text-align: left;
}

.boxcol-25 {
	width: 100%;
}

.box-social {
	list-style: none;
}
.sidebar .widget h5 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.sidebar .widget {
	margin-bottom: 50px;
}

.widget ul {
	list-style: none;
	margin-left:0;
	padding-left:0;
}
.sidebar .widget ul li {
	margin-left:0;
	padding-left:0;
	margin-bottom: 10px;
}
.sidebar .widget ul li a {
	color: #666;
}


.widget.widget_categories ul li:before {
	display: inline-block;
	font-family: 'Pe-icon-7-stroke';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e684";
	margin-right: 10px;
}


.widget.widget_recent_post ul li figure {
	float: left;
	margin: 0 20px 0 0;
}

.widget.widget_recent_post ul li {
	margin-bottom: 25px;
}

.widget.widget_recent_post ul li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.widget.widget_recent_post ul li h6 {
	margin-bottom: 10px;
}
.widget.widget_recent_post ul li span {
	font-size: 14px;
}

.widget .tagcloud a {
	padding: 4px 10px;
	color: #fff;
	display:inline-block;
	margin: 0 10px 10px 0;
	font-size: 14px;
	border-radius: 2px;
}

.widget .tagcloud a:hover {
	color: #fff;
	background: #333;
}
/* --- button --- */
.btn {
	border-radius: 2px;
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;	
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 14px;
}

.btn.btn-noradius {
	border-radius: 0;
}

a.btn:focus{
	outline: 0;
}

.btn-red {
  color: #fff;
  background-color: #c83539;
  border-color: #c83539;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}
.btn-red:active {
  background-image: none;
}


.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}


.btn-default:hover,
.btn-default:focus {
    border: 1px solid #28c3ab;
    outline: 0;
    color: #000;
    background-color: #28c3ab;
}

.btn-huge {
    padding: 25px;
    font-size: 26px;
}

.banner-social-buttons {
    margin-top: 0;
}

/* --- progress --- */
.progress {
  height: 40px;

}
.progress-bar {
  font-size: 14px;
  line-height: 40px;
}

/* Media queries */

@media(min-width:767px) {

    .navbar {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }

    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
	
    .intro {
        height: 100%;
        padding: 0;
    }

    .brand-heading {
        font-size: 100px;
    }
	

    .intro-text {
        font-size: 25px;
    }


}
@media (max-width:768px) {
	#navigation {
		padding: 20px 0;
	}
	.site-logo{
		margin: 0 0 0 30px;
		float:none;
	}
	.navbar-custom ul.nav li a {
		color: black;
	}
	.navbar-custom ul.nav ul.dropdown-menu li {
		border-bottom: 1px solid #aaa;

	}
	.navbar-header {
		margin-top:-40px;
		padding:0;
	}
	.navbar-header button {
		background: #111;
	}
	
	.navbar-header button.navbar-toggle {
		padding: 4px 15px;
		font-size: 14px;
		color: #fff;
		
	}
	
	.navbar-custom .nav {
		background: #444;
	}
	
	.service-box {
		margin-bottom: 50px;
	}
	
	.team-wrap {
		margin-bottom: 30px;
	}
	
	form#contact-form {
		margin-bottom: 50px;
	}
	
	.xs-marginbot-20 {
		margin-bottom: 20px;
	}

}

@media (max-width:480px) {
	.nav a{
		color: black;
	}

	.navbar-custom .nav.navbar-nav {
    background-color: rgba(255,255,255,.4);
	}
	
	.navbar.navbar-custom.navbar-fixed-top {
		margin-bottom: 30px;
	}
}

.navbar .navbar-custom {
	padding: 0;
}

/*  OTROS ESTILOS  */

/* Añadido por Checho parrado  */
* {
    -webkit-text-size-adjust: none;
    -webkit-box-sizing:border-box; box-sizing: border-box; 
}

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;
}
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
	<div class="loader">

	</div>
	<img src="http://i42.tinypic.com/212ct3s.jpg"
	 width="100%" height="650" frameborder="0" style="border:0" allowfullscreen>
	<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" alt="Imagen de agrochema" />
						</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>
								<!--buscador de google-->
								<li>
									<form class="pull-right" method=GET action="https://www.google.com/search">
										<a href="https://www.google.com/">
											<img src="https://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle">
										</a>
										<input type=text name=q maxlength=255 placeholder="Busqueda Google">
										<input Type=hidden name=hl value="es">
										<input type=submit name=btnG VALUE="Buscar...">
									</form>
								</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">
			<div class="container_12">
				<div class="row">
					<div class="col-md-4 col-sm-12 col-xs-12">
						<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. ...</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>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,.</a>
								</div>	
							</li>
						</ul>
					</div>
          </div>
          </div>
          </div>
          </div>
          </section>
          <footer>       
          <p>JAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
          </footer>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
  </html>

7
  • Gracias, por mas que lo busque no lo encontraba Commented el 15 mar. 2018 a las 22:39
  • 4
    @MiguelEspeso Te recomiendo para ocasiones futuras darle botón derecho con el ratón al elemento afectado y seleccionar Inspeccionar elemento (En Google Chrome, pero en el resto se llama parecido). De esta manera, podrás ver que estilos están aplicando sobre cada elemento y es mucho más fácil detectar los errores y las clases que se están aplicando en cada momento. Un saludo :) Commented el 15 mar. 2018 a las 22:41
  • 1
    @MiguelEspeso No, las líneas tachadas significan que están siendo sobreescritas por otras. ¡¡Pero no las borres de tu código!! Que sean sobreescritas no es malo, simplemente es que hay otros estilos que se están aplicando bien porque están más abajo en el CSS (efecto en cascada) o tienen una mayor especificidad. Por ejemplo, si aplicas una media query los estilos originales aparecerán tachados. Los que se están aplicando en cada momento aparecen sin tachar. Commented el 15 mar. 2018 a las 23:17
  • 1
    @MiguelEspeso Por lo tanto, para saber que estilos se están aplicando en cada momento y ver los conflictos que se producen puedes utilizar el Inspector de elementos y ver que elementos están sin tachar y cuales tachados. También Google Chrome (entre otros) te permite "jugar" y hacer las modificaciones en caliente sobre los estilos que están a la derecha para ver como va a quedar el resultado final en caso de que los modificaras. Commented el 15 mar. 2018 a las 23:19
  • 1
    @MiguelEspeso Los estilos que están sin tachar son los que se están aplicando en cada momento. Por lo tanto, si quieres hacer los cambios en caliente para no tener que cambiarlos en el código cada vez puedes cambiar los valores si pulsas sobre ellos y te dejará editarlos o incluso quitarlos deseleccionando el tick que hay a la izqda de ellos. De esta manera, puedes ir quitando/poniendo estilos en caliente hasta ver cuales son los que te generan conflicto. Una vez tengas claro cual es el problema, simplemente es trasladarlo a tu código. Commented el 15 mar. 2018 a las 23:25
3
a {
    color: #666;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

Cambia la propiedad color de los enlaces(a) a 'black' o '#000'

a {
        color: #000;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
1
  • Gracias, ya aplique lo del compañero @Francisco Romero Commented el 15 mar. 2018 a las 22:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.