plese help fix small css problem

Start
Prev
1
Next
End

migors
Topic Author
Offline

3 years 9 months ago - 3 years 9 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;
}

How i see i need to make two sprites?

Attachments:

Last Edit: 3 years 9 months ago by migors.

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

artur
Offline

3 years 9 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;
}

.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.