Joomla Templates Club 406,261 posts

[marcos0804 Friend marcos0804Join date: October 2011Posts: 7Downloads:0Uploads:3 Thanks: 5]

#189856

Hi

My image gallery (content-top) looks like this: (view my attachments)

Thanks!

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#502809

Right now its difficult to guess the issue and give solution to you. So that I can take a look and try to assist, please provide the url of the site you’re working on

1 user says Thank You to Ninja Lead for this useful post

1. marcos0804

[marcos0804 Friend marcos0804Join date: October 2011Posts: 7Downloads:0Uploads:3 Thanks: 5]

#503127

Hi Ninja Lead,

Thanks for you interest.
This is my URL: link

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#503259

You can try with one of 2 following way to fix this problem

+ Go to Admin site -> Extensions-> Module Manager find “Nuestros proyectos” module (custom html module) -> Open it

From

<p>Donec pellentesque venenatis elit, quis aliquet mauris malesuada vel. Donec vitae libero dolor. Maecenas semper sapien sit amet tortor tempor et vulputate diam hendrerit.</p>

<div class="ourprojects-list"><span class="ourproject-item"> <img class="ourproject-img" src="/web_joomla/images/joomlart/ourprojects/log.png" alt="log"> <span class="ourproject-name"><span>Marcos Building</span></span> </span><span class="ourproject-item"> <img class="ourproject-img" src="/web_joomla/images/joomlart/ourprojects/op-2.jpg" alt=""> <span class="ourproject-name"><span>Maecenas Building</span></span> </span><span class="ourproject-item"> <img class="ourproject-img" src="/web_joomla/images/joomlart/ourprojects/op-3.jpg" alt=""> <span class="ourproject-name"><span>Maecenas Building</span></span> </span><span class="ourproject-item"> <img class="ourproject-img" src="/web_joomla/images/joomlart/ourprojects/op-4.jpg" alt=""> <span class="ourproject-name"><span>Maecenas Building</span></span> </span><span class="ourproject-item"> <img class="ourproject-img" src="/web_joomla/images/joomlart/ourprojects/op-5.jpg" alt=""> <span class="ourproject-name"><span>Maecenas Building</span></span> </span><span class="ourproject-item"> <img class="ourproject-img" src="/web_joomla/images/joomlart/ourprojects/op-6.jpg" alt=""> <span class="ourproject-name"><span>Maecenas Building</span></span> </span><span class="ourproject-item"> <img class="ourproject-img" src="/web_joomla/images/joomlart/ourprojects/op-7.jpg" alt=""> <span class="ourproject-name"><span>Maecenas Building</span></span> </span><span class="ourproject-item"> <img class="ourproject-img" src="/web_joomla/images/joomlart/ourprojects/op-8.jpg" alt=""> <span class="ourproject-name"><span>Maecenas Building</span></span> </span>
</div>

Change to

<p>Donec pellentesque venenatis elit, quis aliquet mauris malesuada vel. Donec vitae libero dolor. Maecenas semper sapien sit amet tortor tempor et vulputate diam hendrerit.</p>

<div class="photo-list"><span class="photo-item"> <img class="photo-img" src="/web_joomla/images/joomlart/ourprojects/log.png" alt="log"> <span class="ourproject-name"><span>Marcos Building</span></span> </span><span class="photo-item"> <img class="photo-img" src="/web_joomla/images/joomlart/photos/op-2.jpg" alt=""> <span class="photo-name"><span>Maecenas Building</span></span> </span><span class="photo-item"> <img class="photo-img" src="/web_joomla/images/joomlart/photos/op-3.jpg" alt=""> <span class="photo-name"><span>Maecenas Building</span></span> </span><span class="photo-item"> <img class="photo-img" src="/web_joomla/images/joomlart/photos/op-4.jpg" alt=""> <span class="photo-name"><span>Maecenas Building</span></span> </span><span class="photo-item"> <img class="photo-img" src="/web_joomla/images/joomlart/photos/op-5.jpg" alt=""> <span class="photo-name"><span>Maecenas Building</span></span> </span><span class="photo-item"> <img class="photo-img" src="/web_joomla/images/joomlart/photos/op-6.jpg" alt=""> <span class="photo-name"><span>Maecenas Building</span></span> </span><span class="photo-item"> <img class="photo-img" src="/web_joomla/images/joomlart/photos/op-7.jpg" alt=""> <span class="photo-name"><span>Maecenas Building</span></span> </span><span class="photo-item"> <img class="photo-img" src="/web_joomla/images/joomlart/photos/op-8.jpg" alt=""> <span class="photo-name"><span>Maecenas Building</span></span> </span>
</div>

+ Or another way

Create custom.css file into templates/ja_beranis/css/ folder

Add new script


.ourproject-list .ourproject-name span {
padding: 40px;
display: block;
line-height: normal;
}

.ourproject-list .ourproject-name {
left: 0;
position: absolute;
bottom: -180px;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.7);
color: #fff
font-size: 24px;
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
}

.ourproject-list .ourproject-item {
position: relative;
display: block;
float: left;
position: relative;
width: 25%;
overflow: hidden;
}

.ourproject-list {
margin-top: 40px;
}


Let me know if it helps

1 user says Thank You to Ninja Lead for this useful post

1. marcos0804

[marcos0804 Friend marcos0804Join date: October 2011Posts: 7Downloads:0Uploads:3 Thanks: 5]

#503273

Hi Ninja Lead,

I have tried both solutions but it didn´t work.
Can you help me, please.

Link

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#503444

I have checked the link custom.css file on your site. Custom.css file was missed something

Open http://cega.es/web_joomla/templates/ja_beranis/css/custom.css file

Add new script


.ourproject-list .ourproject-name span {
padding: 40px;
display: block;
line-height: normal;
}

.ourproject-list .ourproject-name {
left: 0;
position: absolute;
bottom: -180px;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.7);
color: #fff
font-size: 24px;
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
}

.ourproject-list .ourproject-item {
position: relative;
display: block;
float: left;
position: relative;
width: 25%;
overflow: hidden;
}

.ourproject-list {
margin-top: 40px;
}


instead of


. Ourproject-list. Ourproject nombre-Gen {
padding: 40px;
display: block;
line-height: normal;
}

. Ourproject-list. Ourproject nombre {
izquierda: 0;
position: absolute;
inferior:-180px;
height: 100%;
width: 100%;
fondo: rgba (0,0,0,0.7);
color: # fff
font-size: 24px;
-Webkit-transición: todos los 0s 1s facilidad a cabo;
-Moz-transition: todos 0s 1s facilidad a cabo;
-O-transición: todos los 0s 1s facilidad a cabo;
transición: todos los 0s 1s facilidad a cabo;
}

. Ourproject-list. Ourproject-item {
position: relative;
display: block;
float: left;
position: relative;
anchura: 25%;
overflow: hidden;
}

. Ourproject-list {
margin-top: 40px;
}


[Author]

Posts