front page header or First Slide

I can see how is setup the header, I tried to add a picture or graphic instead text (in 2 columns) but when I put the images somehow the theme makes bigger the graphic (please see attached file header1.jpg)

Is any way to solve this problem? I'm trying to achieve the header with some graphics, so in that way I can click on the images. please see file attached (header2.jpg)

Hello,
Could you please provide me with a URL to your website and back-end access via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?

Hi,

I already send u access with the issue with the menu in the responsive version.

Thanks a lot for u help.

Cruz

It's because of parallax effect on the header, try to use the following syntax inside your frontpage page:

Code: Select all

<div class="gk-page">
<div class="gk-cols" data-cols="2">
<div><a href="#URL"><img class="custom" src="PATH_TO_IMAGE/2015/02/dog.png" alt="image"></a></div>
<div>second column</div>
</div>
</div>


and add also this custom css code
https://www.gavick.com/blog/adding-cust ... ress-theme

Code: Select all

#gk-header-mod img.custom {
  width: auto;
}


Hi

I use the code, but it doesn't work. I tried to use another class but nothing, same.
I just add the elements, I just need 2 columns and add text and graphics.

Right now I'm using:


<div class="gk-page">
<div class="gk-cols" data-cols="2">
<div><img class="custom" src="http://shoalgames.com/site2015/wp-content/uploads/2015/01/bran-app.png" alt="bran-app" width="375" height="127" />
Introducing Trophy Bingo: a social casino game designed for phones and tablets. Trophy Bingo's unique game play mechanics are captivating players worldwide.</div>
<div><img class="custom2" src="http://shoalgames.com/site2015/wp-content/uploads/2015/01/game.png" alt="game" width="436" height="313" /></div>
</div>
</div>


I tried to use a plugin (layerslide) but somehow the css make the graphics smaller.

Hope you can help me.

Cruz

You have to position your image absolutely, using i.e. the following css code:

Code: Select all

 
 #gk-header-mod img.custom {
  width: auto;
  left: 20%;
  top: -40px
}

#gk-header-mod img.custom2 {
  width: auto;
  align-content:center;
  left: auto;
  right: -200px;
}


use your own values.