Four service in one row?

Hi,

I currently have 3 services on my front page, but when I add a fourth, it makes a second row. Is it possible to get 4 services in one row (with custom CSS?)

My homepage is on: www.starthiking.nl

Cheers,
Mathias

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

#services .widget_illdy_service {
margin-top: 0px;
width: 25%;
}

Thanks!
Colorlib Support Team

Hi Noda,

Thanks for your help!
That looks awesome on the desktop! However (i think because it scales, rather than makes four places) it doesn’t look so good on mobile - it’s all squeezed together horizontally. When I didn’t include the CSS code, it would show 3 in a row on the desktop, but all of them under each other vertically on mobile.

Is there a possible solution to get:

  • four in a row on desktop (as with proposed CSS)
  • the old mobile responsive without the CSS? So all of them under each other vertically, rather then squeezed together horizontally?

Kind regards,
Mathias!

Good morning Mathias, lets try this one:

@media only screen and (min-width: 768px){
#services .widget_illdy_service {
margin-top: 0px;
width: 25%;
}
}

Thanks Noda, that works like a charm. Awesome!

I am sorry to ask - but I have one small aditional question.
The text of the ‘site review’ widget in the fourth footer sidebar, it has a very dark color, making it almost impossible to read. Is there a possibility to make that text white? The homepage is: www.starthiking.nl

Kind regards,
Mathias

Good evening Mathias,

No problem :slight_smile:

try this css now:

#footer .glsr-default.glsr-summary {
color: white;
}

Thanks! Works like a charm.

Thank you very much for your help (again).

thank you too :slight_smile:

I will close this case now, Feel free to contact us again if you have other questions
Thanks!