Gk Description

I used the code

Code: Select all

.gk-description-right-img {
  bottom:50px;
  margin-right:-940px;
  right:70%;
}
.gk-description-left-img {
  left:52%;
  margin-left:-900px;
  top:50px;
}
.gk-description-left-img {
   display:inherit !important;
}


to configure the gk-description right and the left appear in tablets...

how can I put the image left more to the center of the site, in tablets?

Thanks

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

PM Send teitbite

Thanks for your help

Hi

You should use right: 50% than it will be easier to determine the margin and image will be counted from the middle of the site not 70% which is now. With 50% You will be able to set one margin for any device. Or if You will not be happy with result, You can alwasy change the margin-right in tables.css / mobile.css

Question 2: how can i add text right next to the image to Bottom3 Position

Code: Select all

    <div class="bigtitle gk-special">
    <figure data-scroll-reveal="enter left over .5s">
    <img src="images/site/frontpage/vasco_front.png" alt="Partido Socialista">
    <figcaption data-scroll-reveal="enter bottom over .5s after .5s">
    <h3><span>Vasco</span> Sousa</h3>
    <small>Presidente <strong>Comissão Política</strong></small>
    </figcaption>
    </figure>
    <div class="gk-special-content" data-scroll-reveal="enter right over .5s">
    <h3 class="header">
    <span>Mensagem</span>
    <small>Vasco Sousa</small>
    </h3>

    <ul class="gk-special-menu">
    <li data-scroll-reveal="enter bottom over .25s after .5s"><h4>PS1</h4><strong>Montemor</strong></li>
    <li data-scroll-reveal="enter bottom over .25s after .8s"><h4>PS2</h4><strong>Montemor</strong></li>
    <li data-scroll-reveal="enter bottom over .25s after .6s"><h4>PS3</h4><strong>Montemor</strong></li>
    <li data-scroll-reveal="enter bottom over .25s after .9s"><h4>PS4</h4><strong>Montemor</strong></li>
    <li data-scroll-reveal="enter bottom over .25s after .7s"><h4>PS5</h4><strong>Montemor</strong></li>
    <li data-scroll-reveal="enter bottom over .25s after 1s"><h4>PS6</h4><strong>Montemor</strong></li>
    </ul>
    </div>
    </div>
    <a href="index.php/contactos" class="gk-special-link button">Contacte-me</a>


Question 3 - @ Bottom 5 i add the code

Code: Select all

    style=max-width:100%;height:auto;' border="0"


to make the image responsive but the animation (data-scroll-reveal="enter bottom over 1.0s) not work

For Q3 You can try move the style="" to css with code:

Code: Select all

#gkBottom5 .gk-special img {
max-width:100%;
height:auto;
border:medium none;
}


but if this will not work, than maybe it's not possible to use such css with it. Hopefully it's just a syntax error right now.

Q2 try add this to module:

Code: Select all

<div class="textnexttoimage">Some text next to the image</div>


and this to css:

Code: Select all

.textnexttoimage {
position: absolute;
left: 50%;
width: 150px;
top: 85px;
margin-left: -300px;
}


Thanks Teitbite

Works Perfect

Best regards

Hi

No problem. Glad I could help