0
Cart Empty
0 0 Product(s)

plese help fix small css problem

More
4 years 5 months ago - 4 years 5 months ago #8819 by migors
migors created the topic: plese help fix small css problem
Hi friends i tried to make one last sprite from icons (see picture) but what ever i doo layout brokes. meko.lv/pakalpojumi/hidroabraziva-griesana

Only what i did i replaced icon with sprite like i did in other places but i can not understand how to correct class:
<div class="jm-box-vertical">
<a class="jm-panel icon1" href=""><span class="jm-icon"> </span><span class="jm-cell"><span class="title">Profesionāla komanda</span><span class="subtitle">Sazināties ar menedžeri</span></span></a>
<a class="jm-panel icon2" href=""><span class="jm-icon"> </span><span class="jm-cell"> <span class="title">Garantēta drošība</span><span class="subtitle">Drošība un konfidencialitātē ir mūsu prioritāte</span></span> </a>
 <a class="jm-panel icon3" href=""><span class="jm-icon"> </span><span class="jm-cell"> <span class="title">Pārbaudīta kvalitāte</span><span class="subtitle">Mūsu ražotajiem produktiem ir 2 gadu garantija un serviss.</span></span> </a> 
<a class="jm-panel zvaigzne" href=""><span class="jm-icon"> </span><span class="jm-cell"> <span class="title">Uzticams partneris</span><span class="subtitle">Bezmaksas apkalpošana esošiem klientiem</span></span></a>
 </div>
.stuf .lock .search .zvaigzne{
	background: url(/templates/jm-cleaning-company/images/sprite-mod.png) no-repeat;
}

.stuf{
	background-position: -50px -51px ;
	width: 57px;
	height: 62px;
}

.lock{
	background-position: -51px -150px ;
	width: 57px;
	height: 62px;
}

.search{
	background-position: -51px -251px ;
	width: 57px;
	height: 62px;
}

.zvaigzne{
	background-position: -50px -350px ;
	width: 57px;
	height: 62px;
}

icon.JPG


How i see i need to make two sprites?
Attachments:
Last Edit: 4 years 5 months ago by migors.

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

More
4 years 5 months ago #8825 by artur
artur replied the topic: plese help fix small css problem
Hello,
First of all this :
.stuf .lock .search .zvaigzne{
	background: url(https://dna.joomla-monster.com/templates/jm-cleaning-company/images/sprite-mod.png) no-repeat;
}

is not correct.

it should be :
.stuf, .lock, .search, .zvaigzne{
	background: url(https://dna.joomla-monster.com/templates/jm-cleaning-company/images/sprite-mod.png) no-repeat;
}

Next you should make sure that your styles are more important than, default styles.

Example :
#jm-allpage .jm-box-vertical .stuf, 
#jm-allpage .jm-box-vertical .lock,
#jm-allpage .jm-box-vertical .search,
#jm-allpage .zvaigzne{
	background: url(https://dna.joomla-monster.com/templates/jm-cleaning-company/images/sprite-mod.png) no-repeat;
}

or
.stuf, .lock, .search, .zvaigzne{
	background: url(https://dna.joomla-monster.com/templates/jm-cleaning-company/images/sprite-mod.png) no-repeat !important;
}

Our customization service can help you with this modification. Please let us know if you will be interested. This is paid service.

Regards.

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

Time to create page: 0.212 seconds
Secured payments Payment Methods

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.

Are you new here?

Try our Joomla templates and extensions 20% OFF
Your coupon: NEWHERE

 

* limited time offer