header 1 slideshow

I'm trying to add hyperlink to the images at header 1 slideshow. As you can see at http://astar-awards.com/
After added hyperlink, the hyperlink image become smaller, it difference from original image size.

Below is the code I use. Can you please tell me how to salve this?
I just want all my 3 images link to http://astar-awards.com/wedding/2014

<div>
<h1 data-scrollreveal="enter top and move 100px wait 0.2s">ASTAR AWARDS</h1>
<p data-scrollreveal="enter top and move 150px wait 0.4s">This one of a kind event will help propel Small and Medium Businesses (SMBs/SMEs) into Fame and Recognition through the use of the Internet &amp; Social Media.</p><a href="wedding/2014/" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>
<div class="gk-tablet" data-slides="3" data-scrollreveal="enter bottom and move 50px wait 0.5s">
<div>
<div><a href="http://astar-awards.com/wedding/2014"><img src="images/home_header_slide/astar-awards-wedding-bridal.jpg" alt="Astar Awards Bridal" border="0" /></a><img src="images/home_header_slide/astar-awards-trophy.jpg" alt="Astar Awards Tropy" border="0" /><img src="images/home_header_slide/astar-awards-red-carpet.jpg" alt="Astar Awards Red Carpet" border="0" />
</div>
</div>
</div>

Hi

Please send me an access to joomla panel. I'll check and try to solve it.

Hi!

I'm also trying to add links to the images but i really can't, here's my code:

<div class="custom gk-header1">
<div>
</p>
<h5 data-scrollreveal="enter top and move 150px wait 0.4s">Trompo Games Inc. was founded in 2013 in Toronto Ontario, Canada. We fill a hole in the mobile gaming market between ambitious indie developments, and simple re-skins of games that have already been made.</h5>

<a href="http://pasamanos.mx/trompotest/tromponew/?page_id=1527" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>

<div class="gk-tablet" data-slides="3" data-scrollreveal="enter bottom and move 50px wait 0.5s">

<div>
<div>
<img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_1.png" alt="App Screen I" />
<img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_2.png" alt="App Screen I" />
<img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" />
</div>
</div>
</div>
</div>

Can you please help?

Thanks a lot!

Hi

I need to see it to tell anything. can one of You send me an access to joomla panel of Your site?

I just send you the access to it.

Thanks!

Hi

Ok. I was able to connect Your mail with this thread. Luckly it was just 6 mails with accesses today, so I figured it out. Please next time put a link to thread in mail. It saves a lot of time.

Anyway this task is pretty complicated and will need some extra codding. I will need an access to ftp to try couple of things with css before publishing the right code. Can You send it to me as well ?

Thanks for your help teitbite, I already sent it to your mail.

Hi

I got Your access, but this site is not using MO theme and there is no header widget this thread is about. So can You please switch to that and make sure override.css file is enabled in theme settings so I'll be able to work.

it is Mo Theme, the domain is: trompogames.com I sent you an email with the location, with the access to the site you can see there is a !Header1 widget in the widgets panel.

Hi,
So i'm assuming i'm not getting any help or feed back? is that right?

Hi

Not right I'm sorry for delay. I was moving out to a different appartment and could not work for a couple of days. Here is what I did:

This is a code for widget:

Code: Select all

<div class="custom  gk-header1">
<div>
</p>
<h5 data-scrollreveal="enter top and move 150px wait 0.4s">Trompo Games Inc. was founded in 2013 in Toronto Ontario, Canada. We fill a hole in the mobile gaming market between ambitious indie developments, and simple re-skins of games that have already been made.</h5>

<a href="http://pasamanos.mx/trompotest/tromponew/?page_id=1527" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>

<div class="gk-tablet" data-slides="3" data-scrollreveal="enter bottom and move 50px wait 0.5s">

<div>
<div>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_1.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_2.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
</div>
</div>
</div>
</div>


And here a code to put into override.css:

Code: Select all

.gk-header1 .gk-tablet a {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    float: left;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    width: 33.3%;
}

.gk-header1 .gk-tablet a img {
    width: 100% !important;
}


Thank you very, very much Teitbite! I'm truly thankful for your help, honestly! You're great dude!

Hi

No problem. Once again sorry for delay. It was just a crazy week with not much time for work

Don't even mention it, you saved me man! I spent almost a month trying without getting any results at all! (I'm really new at this, sorry!)