× Support for Joomla 2.5 templates is discontinued. This forum category is read-only.

How to make CSS3 animated elements smaller

More
5 years 10 months ago #5386 by fwd
fwd created the topic: How to make CSS3 animated elements smaller
Hello,

thank you very much for the great JM-Business-Marketing template. I'm using it without any problem.

There are four elements with CSS3 Animation Effects in the Top position (controversy, debate...).
I'd like to make them smaller and closer. Unfortunately, I'm not able to achieve any result. (I have tried to change images, css - .ch-item, etc.)

Could you give me some tips or ideas hot to solve it?

Thank you for your support.

Please Log in or Create an account to join the conversation.

More
5 years 10 months ago #5388 by artur
artur replied the topic: How to make CSS3 animated elements smaller
Hello,

You should change CSS style and images size.
First edit - 'CSS/animated-buttons.css' and change width/height for '.ch-item'
Example :
.ch-item {
height: 120px;
position: relative;
width: 120px;
}

Then edit images and set the same width/height.
Example - '/images/style1/debate.png' (style1/style2/style3 depend which color version you are using)

Best Regards.

Please Log in or Create an account to join the conversation.

More
5 years 10 months ago #5389 by fwd
fwd replied the topic: How to make CSS3 animated elements smaller
Thank you for your answer.
I have tried to change picture, width, height - that's fine. Thanks.
But the text and button Check it is stil "out".

Attachments:

Please Log in or Create an account to join the conversation.

More
5 years 10 months ago #5393 by artur
artur replied the topic: How to make CSS3 animated elements smaller
Hello,
Probably text and 'check out' circle are to big.
An example below :
width / height = 100 px,
no description
and adjusted margin-top/padding-top for A and P element.
Attachments:

Please Log in or Create an account to join the conversation.

More
5 years 10 months ago - 5 years 10 months ago #5394 by fwd
fwd replied the topic: How to make CSS3 animated elements smaller
Thank you so much fo your time.
Text and circle are to big, but a can't localize where to set the witdh/height property of the circle and text.
Last Edit: 5 years 10 months ago by fwd. Reason: bit-big :)

Please Log in or Create an account to join the conversation.

More
5 years 10 months ago #5397 by artur
artur replied the topic: How to make CSS3 animated elements smaller
Hello,
It depends which size you like to set, but you can just remove text in custom code :
<div class="ch-item ch-first"><div class="ch-info"><div class="ch-container"><div class="ch-outer"><div class="ch-inner"><h3>Title</h3><p><a href="#">check it out</a></p></div></div></div></div></div>

And in 'animated-button.css' should adjust size of a few styles. More details on screenshot.
Attachments:

Please Log in or Create an account to join the conversation.

Time to create page: 0.213 seconds

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.