Number of Services Shown

Hi all,

Is there any way to control the number of services shown per row?

I’m asking this because I have 4 services and it looks a bit weird to see 3 in the first row and 1 left alone in the second row.

Maybe 2 services per row would be the best, or 4.

Is it simple css?

Hi, it’s not that simple. Simplest thing would be to apply custom css below (you can use custom simple css):

.services-container div:last-child {
    color: black;
    clear: right;
}

In this way 4th service item will be centered. If you want to customise it more, you should edit fp-services.php file, this line:
<div class="service col-md-4 col-sm-6 col-xs-6 wow rotateInUpLeft">

This values col-md-4 col-sm-6 col-xs-6 according to bootstrap.

For example changing col-md-4 to col-md-6 will set 2 services per row.

Hi dimikjones,

Thank you for the explanation!
With that, and the bootstrap website, I actually managed to go a little bit further and figured out that if the value col-md-4 was changed to col-md-3 I would get the space for 4 services in each row. I’m saying space because the 4th service is still left in the 2nd row, although there is plenty of space in the first row.

And at this step is where I need your help again, I’m sorry. :slight_smile:

I really would like to have 4 services in the first row (in the desktop grid layout only, md), but I can’t figure out how…

I already tried 2 things:
-delete the 4th service and add it again, no luck
-in the fp-services.php I’ve found four entrances related to size (size=“3”), tried changing all to 4, no luck again.

Thank you in advance!

Hi all,

I managed to figure out how to do it.

I changed the style.css file.
Where I had

.service:nth-of-type(3n+1)

I changed to

.service:nth-of-type(4n+1)

There were only 2 entrances.
It is working now!

Thank you for you time, dimikjones!

Hi!

I also want to have 4 services per row, I tried changed .service:nth-of-type(3n+1) to .service:nth-of-type(4n+1) but in style.css I don’t have this line, only this one #services .feature:nth-of-type(3n+1) { clear: left; }. I also tried changed it with (4n+1) but nothing happens. Do you have any idea how to make it work?

I have one more question. How can I set bigger gray background where I have services?

Thank you very much.

Hi, have you tried changing this line <div class="service col-md-4 col-sm-6… according to bootstrap?

Also, it would be good to share your page link with us.

Hi, I don’t have this line <div class="service col-md-4 col-sm-6… in fp-services.php file!! how you meant according bootstrap?

sorry but for now I don’t have page online, just on localhost. It is very similar like original, I just want to have 4 services on row if its possible.

Thank you very much!

Are you using Qill theme?

fp-services.php (should be line 145):
<div class="service col-md-4 col-sm-6 col-xs-6 wow rotateInUpLeft">
Change it to (just col-md-4 to col-md-3):
<div class="service col-md-3 col-sm-6 col-xs-6 wow rotateInUpLeft">

style.css (line 870):

.service:nth-of-type(3n+1) {
	clear: left;
}

Change it to:

.service:nth-of-type(4n+1) {
	clear: left;
}

Here it is, it’s a bit ugly because I often try different things :slight_smile:

Thank you for fast reply! No, I have Intro theme! And I don’t have this line
<div class=“service col-md-4 col-sm-6 col-xs-6 wow rotateInUpLeft”> :frowning:

In style.css I have on 820 line this–>
#services .feature:nth-of-type(3n+1) { clear: left; }

Thank you very much for your help!

Oh. Please in future open your own topic, and above all don’t post questions about Intro theme into support for Quill!

This is answer for Intro theme
Intro Theme is built on foundation.

In fp-services.php change this line:
<div class="large-4 medium-6 small-12 columns">
to
<div class="large-3 medium-6 small-12 columns">

ohh I’m so sorry, I did’t know that I was writing on wrong topic!
Thank you very much for answer!

Hi.
I have the same problem for the number of service in front page but in style.css of quill I don’t have

.service:nth-of-type(3n+1) { clear: left; }

but

.service:nth-of-type(3) { padding-right: 0; }

So when I change nothing happens.
then I change the php file as indicated but now I have only 3 of may 4 services on the front page. There is an empty space for the fourth on the same line but nothing appears…
Can you hel me ?

Thanx

Sorry, just give up I find a solution. It was just an update to do and now it works :slight_smile: