Jump to content
claramontseny

Añadir espacio entre obras de portfolio

Recommended Posts

Hola a todxs,

 

Estoy construyendo mi web http://claramontseny.com y tengo una duda sobre cómo añadir verticalmente espacio en la visualización de las imágenes de mi portfolio. Los cambios me gustaría hacerlos en la index de forma que quede visualmente más estético. La web la estoy montando con WordPress.org usando el tema Olevia y desafortunadamente parece que ya no dan soporte. La web de Made4WP, el creador, ha desaparecido del mapa. Tengo unos pocos conocimientos de CSS, HTML y JavaScript, así que he podido ir haciendo algunas modificaciones sobre la plantilla y que vaya quedando como quiero.

 

He accedido a la hoja de estilos y he probado a modificar el porcentaje a mostrar de altura, pero creo que no lo estoy haciendo bien, sólo he conseguido modificar la altura de la transparencia en :hover, pero no de la imagen en sí. Estoy bastante despistada porque no sé si estoy mirando donde debería y me gustaría aprender a hacerlo. Si alguien me pudiera ayudar se lo agradecería.

 

Estos son los selectores asociados a los elementos del portfolio, que es donde estoy mirando y por ensayo y error viendo que no funciona lo que hago:

 

/*--------------------------------------------------------------

# Portfolio Items

--------------------------------------------------------------*/

.c-portfolio-items {

margin-top: 60px;

margin-top: 3.75rem;

margin-bottom: 30px;

margin-bottom: 1.875rem; }

 

.c-portfolio-items--home {

margin-top: 0; }

 

/*--------------------------------------------------------------

# Portfolio Item

--------------------------------------------------------------*/

.c-portfolio-item {

position: relative;

width: 100%;

margin-bottom: 30px;

margin-bottom: 1.875rem; }

 

.c-portfolio-item__header {

text-align: center;

margin: 60px 0; }

 

.c-portfolio-item__client {

margin: 0 0 5px;

font-size: 1.125em;

font-weight: 400; }

 

.c-portfolio-item__title {

margin: 0;

font-size: 1.5em; }

 

.c-portfolio-item__category {

display: block;

margin-top: 5px;

margin-top: 0.3125rem;

color: #aaa;

font-size: 1em; }

 

.c-portfolio-item__content {

max-width: 680px;

max-width: 42.5rem;

margin: 0 auto; }

 

 

 

También puede que la cosa vaya por aquí

 

/* Page Template: Home

--------------------------------*/

.c-portfolio-item--home {

float: left;

margin: 0;

text-align: left;

max-width: 100%;

opacity: 0;

-webkit-transition: opacity .5s ease-out;

transition: opacity .5s ease-out; }

@media screen and (min-width: 500px) and (max-width: 1024px) {

.c-portfolio-item--home {

max-width: 50%; } }

@media screen and (min-width: 1025px) {

.c-portfolio-item--home {

max-width: 33.33333333%; } }

 

.c-portfolio-item--home.is-masonry {

opacity: 1; }

 

.c-portfolio-item__client--home {

color: #fff;

font-size: 0.875em; }

 

.c-portfolio-item__title--home {

font-size: 1.125em;

color: #fff;

margin-top: 5px;

margin-top: 0.3125rem; }

 

.c-portfolio-item__category--home {

font-size: 0.875em;

color: #ccc; }

 

.c-portfolio-item__details-ct {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

background-color: rgba(0, 0, 0, 0.5);

opacity: 0;

-webkit-transition: opacity .3s ease-out;

transition: opacity .3s ease-out; }

 

.c-portfolio-item:hover .c-portfolio-item__details-ct {

opacity: 1; }

 

.c-portfolio-item__details {

padding: 30px 45px 45px;

-webkit-transition: padding .3s ease-out;

transition: padding .3s ease-out; }

 

.c-portfolio-item:hover .c-portfolio-item__details {

padding-top: 45px; }

 

.c-portfolio-item__client--home {

font-size: 1.125em; }

 

.c-portfolio-item__category--home {

margin-top: 10px;

margin-top: 0.625rem;

font-size: 1em; }

 

/* Grid layout

--------------------------------*/

.c-portfolio-item--grid {

position: relative;

width: 100%;

float: left;

margin-right: 3.75%;

margin-bottom: 30px;

margin-bottom: 1.875rem;

text-align: center; }

.c-portfolio-item--grid:nth-child(3n) {

margin-right: 0; }

@media screen and (min-width: 500px) and (max-width: 1024px) {

.c-portfolio-item--grid {

max-width: 50%;

margin: 0 auto 30px;

margin: 0 auto 1.875rem;

padding: 0 15px;

padding: 0 0.9375rem; } }

@media screen and (min-width: 1025px) {

.c-portfolio-item--grid {

max-width: 30.83333333%; } }

 

.c-portfolio-item__client--grid {

font-size: 1em; }

 

.c-portfolio-item__title--grid {

font-size: 1em; }

 

.c-portfolio-item__category--grid {

font-size: 0.875em; }

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.