andy ashwin
Estoy tratando de armar un sitio para un amigo usando un tema premium de WordPress realmente agradable. He pagado por el tema, pero el diseñador no me ayudará con la personalización.
El sitio está actualmente en www.zerocarbonfood.co.uk/test/. Originalmente, el tema tenía un logotipo pequeño alineado a la izquierda, pero mi amigo prefiere este grande de ancho completo, que creo que funciona mejor. El problema es que ahora que lo miro en un iPad o iPhone (retrato) el logo es demasiado grande y lo jode. En las opciones del tema, se define como 922 px de ancho y 168 px de alto. No puedo poner un valor porcentual allí. ¿Puedo anular esto en CSS en alguna parte?
Cualquier ayuda sería recibida con gratitud ya que estoy un poco fuera de mi alcance.
La forma más sencilla de solucionarlo es insertar la imagen del logotipo en línea en lugar de como imagen de fondo. De esa manera, puede aplicar CSS al elemento img en sí;
HTML
<div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>
CSS
#logo-container img {
width: 100%;
height: auto;
}
-
¡Gracias McNab! Eso tiene mucho sentido incluso para mí. El problema es que este es un WordPress, así que no puedo editar el html. Creo que son todas esas horribles cosas de php, aunque puedo editar style.css
–Andy Ashwin
18 de julio de 2013 a las 14:41
-
Solo ve al tema y edita
header.php. El código para el logotipo está ahí, reemplácelo con lo que puse arriba y elimine el estilo en línea para el #logo-container una imagen de fondo#logo-container a{background:url('http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png') no-repeat;}– McNab
18 de julio de 2013 a las 15:49
-
Estoy bastante seguro de que he hecho todo eso, pero no hay alegría. Muchas gracias por tus esfuerzos. Estoy seguro de que tienes razón y de alguna manera lo estoy arruinando en este extremo. Todo se ve bien en todas partes, pero la imagen es demasiado grande en modo retrato en mi iPad. Maldita sea.
–Andy Ashwin
18 de julio de 2013 a las 16:27
intenta usar max-width: 100%; height: auto; esto debería cambiar el tamaño de la imagen correctamente.
-
No puedo encontrar dónde cambiar esto, excepto en el panel de control del tema, y allí solo acepta valores px, no %. No puedo encontrar el valor de tamaño de fondo de 922px en el archivo style.css, así que supongo que tiene que estar en php y no sé NADA sobre php… ¡gracias por intentarlo!
–Andy Ashwin
18 de julio de 2013 a las 12:07
-
Lo habría hecho, pero es una imagen de fondo, no en línea.
– McNab
18/07/2013 a las 14:00
Puede usar la siguiente condición de medios en css
/* Resize Background*/
@media only screen and (max-width: 800px) {
#header{
width: 100%;
height: auto;
background-size: 100% auto !important;
}
}
-
Gracias, pero todavía no hay alegría! Lo probé exactamente como lo tienes allí y también con #logo-container en lugar de #header. Lo pegué en la parte inferior de style.css.
–Andy Ashwin
18 de julio de 2013 a las 12:53
Intenta diseñar la imagen, no el enlace.
logo-container img {
width: 100%;
height:auto;
}
Intente usar % en lugar de px. De esta manera, su imagen se escalará con el tamaño de la página.
En tu HTML, podrías intentar algo como
<img src="https://stackoverflow.com/questions/17722132/logo.png" width="80%" height="80%"/>
Esto escalaría con el ancho de la pantalla. Por supuesto, también desea escalar la altura para preservar la relación de aspecto.
Para su información, el sitio se ve bien en mi teléfono Android cuando lo alejo por completo.
-
He cambiado el ancho y el alto al 100% en cada instancia de “logo-container a” que puedo encontrar. No hace ninguna diferencia. Creo que la referencia al archivo .png real está enterrada en php en alguna parte. Difícil.
–Andy Ashwin
18 de julio de 2013 a las 11:57
hasan zubairi
Probar
#logo-container img {
width: 100%; !important
height: auto; !important
}
Sobrescribirá los valores anteriores.
-
He cambiado el ancho y el alto al 100% en cada instancia de “logo-container a” que puedo encontrar. No hace ninguna diferencia. Creo que la referencia al archivo .png real está enterrada en php en alguna parte. Difícil.
–Andy Ashwin
18 de julio de 2013 a las 11:57
marc_s
¿Cómo se amplía la imagen al pasar el mouse?
Aquí está el html de muestra:
<footer>
<!-- Main Footer -->
<section class="section background-dark">
<div class="line">
<div class="margin">
<!-- Column 1 -->
<div class="s-12 m-12 l-4 margin-m-bottom-2x">
<h4 class="text-uppercase text-strong">Our Philosophy</h4>
<p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>
<div class="line">
<h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="https://stackoverflow.com/"><img src="img/blog-04.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8 margin-m-bottom">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="https://stackoverflow.com/">Read more</a>
</div>
</div>
</div>
</div>
<!-- Column 2 -->
<div class="s-12 m-12 l-4 margin-m-bottom-2x">
<h4 class="text-uppercase text-strong">Contact Us</h4>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-placepin text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><b>Adress:</b> Responsive Street 7, London, UK</p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-mail text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><a href="https://stackoverflow.com/" class="text-primary-hover"><b>E-mail:</b> contact@sampledomain.com</a></p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-smartphone text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><b>Phone:</b> 0700 000 987</p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-twitter text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><a href="https://stackoverflow.com/" class="text-primary-hover"><b>Twitter</b></a></p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-facebook text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11">
<p><a href="https://stackoverflow.com/" class="text-primary-hover"><b>Facebook</b></a></p>
</div>
</div>
</div>
<!-- Column 3 -->
<div class="s-12 m-12 l-4">
<h4 class="text-uppercase text-strong">Leave a Message</h4>
<form class="customform text-white">
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-6">
<input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
</div>
<div class="s-12 m-12 l-6">
<input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
</div>
</div>
</div>
<div class="s-12">
<textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
</div>
<div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div>
</form>
</div>
</div>
</div>
</section>
<hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">
<!-- Bottom Footer -->
<section class="padding background-dark">
<div class="line">
<div class="s-12 l-6">
<p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
<p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
</div>
<div class="s-12 l-6">
<a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
</div>
</div>
</section>
</footer>
Aquí hay parte de css:
a, a:link, a:visited, a:hover, a:active {
color: #777;
}
.text-primary, .text-primary *, .primary-color-primary .text-primary, .primary-color-primary .text-primary * {
color: #49BF4C !important;
}
.text-primary-hover:hover, .primary-color-primary .text-primary-hover:hover {
color: #49BF4C !important;
}
.text-white, .text-white *, .primary-color-white .text-primary, .primary-color-white .text-primary * {
color: #fff !important;
}
.background-primary, .primary-color-primary .background-primary {
background-color: #49BF4C !important;
}
.margin-bottom-10 {
margin-bottom: 10px !important;
display: block;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #000;
margin-bottom: 15px;
margin-top: 0;
}
h4, .h4 {
font-size: 1.1rem;
}
@media screen and (max-width: 768px) {
.margin-m-bottom {
margin-bottom: 1.25rem !important;
display: block;
}
}
.image-hover-zoom:hover img {
transform: scale(1.1);
}
/*SAmple*/
.section {
padding: 6rem 1.25rem;
}
.background-dark, .primary-color-dark .background-primary {
background-color: #002633 !important;
}
.background-dark, .background-dark p, a.background-dark, a.background-dark:visited, a.background-dark:link, .background-dark a, .background-dark a:link, .background-dark a:visited, .background-dark a:hover, .background-dark a:active, .primary-color-dark .background-primary, .primary-color-dark .background-primary p, .primary-color-dark a.background-primary, .primary-color-dark a.background-primary:visited, .primary-color-dark a.background-primary:link, .primary-color-dark a.background-primary:visited, .primary-color-dark .background-primary a, .primary-color-dark .background-primary a:link, .primary-color-dark .background-primary a:visited, .primary-color-dark .background-primary a:hover, .primary-color-dark .background-primary a:active {
color: #7697A2;
}
hr.break {
border: 0;
border-top: 1px solid #e5e5e5;
display: block;
margin: 40px 0;
}
.margin-top-bottom-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block;
}
hr.break:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.text-size-12, .text-l-size-12 {
font-size: 12px !important;
line-height: 1.4;
}
p {
color: #777;
font-size: 0.85rem;
line-height: 1.6rem;
}
.background-dark h1, .background-dark h2, .background-dark h3, .background-dark h4, .background-dark h5, .background-dark h6, .background-dark .h1, .background-dark .h2, .background-dark .h3, .background-dark .h4, .background-dark .h5, .background-dark .h6, .primary-color-dark .background-primary h1, .primary-color-dark .background-primary h2, .primary-color-dark .background-primary h3, .primary-color-dark .background-primary h4, .primary-color-dark .background-primary h5, .primary-color-dark .background-primary h6, .primary-color-dark .background-primary .h1, .primary-color-dark .background-primary .h2, .primary-color-dark .background-primary .h3, .primary-color-dark .background-primary .h4, .primary-color-dark .background-primary .h5, .primary-color-dark .background-primary .h6, .background-primary h1, .background-primary h2, .background-primary h3, .background-primary h4, .background-primary h5, .background-primary h6, .background-primary .h1, .background-primary .h2, .background-primary .h3, .background-primary .h4, .background-primary .h5, .background-primary .h6, .primary-color-primary .background-primary h1, .primary-color-primary .background-primary h2, .primary-color-primary .background-primary h3, .primary-color-primary .background-primary h4, .primary-color-primary .background-primary h5, .primary-color-primary .background-primary h6, .primary-color-primary .background-primary .h1, .primary-color-primary .background-primary .h2, .primary-color-primary .background-primary .h3, .primary-color-primary .background-primary .h4, .primary-color-primary .background-primary .h5, .primary-color-primary .background-primary .h6 {
color: #fff;
}
.text-uppercase {
text-transform: uppercase;
line-height: 1;
}
b, strong, .text-strong {
font-weight: 700;
}
h4, .h4 {
font-size: 1.1rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #000;
margin-bottom: 15px;
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #152732;
font-weight: normal;
line-height: 1.3;
margin: 0.5rem 0;
}
h4 {
font-size: 1.4rem;
}
.text-size-20, .text-l-size-20 {
font-size: 20px !important;
line-height: 1.4;
}
.margin-top-30 {
margin-top: 30px !important;
display: block;
}
a.text-more-info:after {
content: "\f006";
font-family: mfg;
font-size: 0.8rem;
margin-left: 0.625rem;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
a.text-more-info {
display: block;
font-size: 0.85rem;
margin-top: 0.625rem;
}
.text-white-hover, .text-primary-hover, .text-dark-hover {
transition: color 0.20s linear 0s;
-o-transition: color 0.20s linear 0s;
-ms-transition: color 0.20s linear 0s;
-moz-transition: color 0.20s linear 0s;
-webkit-transition: color 0.20s linear 0s;
}
.image-hover-zoom {
display: block;
overflow: hidden;
}
.image-hover-zoom img {
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}