plese help fix small css problem

Start
Prev
1
Next
End

migors
Topic Author
Offline

6 years 1 month ago - 6 years 1 month 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: 6 years 1 month ago by migors.

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

artur
Offline

6 years 1 month 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.

Start
Prev
1
Next
End

Time to create page: 0.272 seconds

Our network

plese help fix small css problem

Attachments:

Getting Started

Company Info

Useful Links

Our Products

Connect With Us