0

Buenas Tardes amigos les comento, estoy desarrollando un catalogo de articulo en c#, entonces tengo la sección de "Destacados", en el controlador es una simple consulta.

public ActionResult getDestacados() {

        var productos = db.MtoProductos.Where(x => x.Destacado == true)
                                       .OrderByDescending(f=>f.Fecha).Take(13).ToList();

        return View(productos);
    }

hasta ahí sin problemas, el problema viene en la view cuando diseño con css

introducir la descripción de la imagen aquí

este es el css que estoy ocupando

.snip1423 {
    font-family: 'Oswald', Arial, sans-serif;
    position: relative;
    float: left;
    margin: 20px 1%;
    min-width: 230px;
    max-width: 300px;
    width: 100%;
    background: #ffffff;
    text-align: center;
    color: #000000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    font-size: 16px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;   
}

    .snip1423 * {
        -webkit-box-sizing: padding-box;
        box-sizing: padding-box;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

    .snip1423 img {
        max-width: 100%;
        vertical-align: top;
        position: relative;
    }

    .snip1423 figcaption {
        padding: 20px 15px;
    }

    .snip1423 h3,
    .snip1423 p {
        margin: 0;
    }

    .snip1423 h3 {
        font-size: 1.3em;
        font-weight: 400;
        margin-bottom: 5px;
        color: #d8822f;
        /* text-transform: uppercase;*/
    }

    .snip1423 p {
        font-size: 0.9em;
        letter-spacing: 1px;
        font-weight: 300;
    }

    .snip1423 .price {
        font-weight: 500;
        font-size: 1.4em;
        line-height: 48px;
        letter-spacing: 1px;
    }

        .snip1423 .price s {
            margin-right: 5px;
            opacity: 0.5;
            font-size: 0.9em;
        }

    .snip1423 i {
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translate(-50%, 50%);
        transform: translate(-50%, 50%);
        width: 56px;
        line-height: 56px;
        text-align: center;
        border-radius: 50%;
        background-color: #666666;
        color: #ffffff;
        font-size: 1.6em;
        border: 4px solid #ffffff;
    }

    .snip1423 a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .snip1423:hover,
    .snip1423.hover {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

        .snip1423:hover i,
        .snip1423.hover i {
            background-color: #2980b9;
        }

este es el codigo de la vista `

<div class="container">

    @foreach (var item in Model)
    {
        <figure class="snip1423 wow zoomIn animated" data-wow-delay="0ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: zoomIn;">
            <img src="@Url.Content(@item.Ruta)" />
            <figcaption>
                <h3>@item.Titulo</h3>
                <p>@item.Descripcion</p>
                <div class="price">
                    $@if (@item.Oferta == true)
                    {<s>[email protected]</s>@item.PrecioOferta}
                else
                {@item.Precio}
                </div>
            </figcaption><i class="ion-android-cart"></i>
            <a href="#"></a>
        </figure>
    }
</div>

`

creen que puedan echarme una mano.

muchas gracias.

4
  • 1
    estas seguro que es un problema del css, no sera en como generas el html con los datos del producto? Commented el 19 sept. 2018 a las 19:24
  • 1
    Me imagino que estas usando un framework, por ejemplo Bootstrap, Será que es posible de otorgarnos el código de la vista (html) Commented el 19 sept. 2018 a las 19:31
  • 1
    Acá intervienen un montón de variable, por ejemplo ¿Como es el html? ¿Cada fila está anidando 3 opciones o no hay filas determinadas por etiquetas? o ¿Cada producto tiene posición absoluta? ¿Usas algún framework? Commented el 19 sept. 2018 a las 20:15
  • Hola Horacio, lee sobre cómo crear un ejemplo mínimo verificable y comparte el código html generado para que podamos reproducir el problema.
    – Alvaro Montoro
    Commented el 20 sept. 2018 a las 1:15

1 respuesta 1

0

el problema parece ser el texto que hace que cambien el tamaño los H3 y los párrafos dentro de la descripción.

Puedes intentar con algo como esto:

    .snip1423 p {
        font-size: 0.9em;
        letter-spacing: 1px;
        font-weight: 300;
        height: 50px; /*le das un alto predefinido*/
    }

    .snip1423 h3 {
        font-size: 1.3em;
        font-weight: 400;
        margin-bottom: 5px;
        color: #d8822f;
        height:50px;
        /* text-transform: uppercase;*/
    }

Espero te pueda ayudar.

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.