Can I force "services" widget to display vertically?


“services type A”, when displaying on mobile, displays the services (and related icons if any) vertically. When displayed on a larger platforms, it displays the items horizontally.

Even if I force the widget into a narrow column, it will reduce the text and icons to minuscule size and will still (try to) display them horizontally. Only when I reduce the width of visible area will it switch to displaying them vertically.

Is there a way to force this widget to display the services vertically (in a column - one below the other)? Can I edit a piece of code or style to force this in? I guess all I want is “align them as if you were on mobile”.


Hello there,

Try adding a custom CSS class name to your services type A widget through Widget Styles options > Attributes > Widget Class. Then enter a class name, for instance: my-services

Then apply the following custom CSS code through Appearance > Customize > Additional CSS.

.my-services .service.col-md-4{
  width: 100%;


Fantastic. This just works. Thank you so much!!

(not sure I understand why it works actually - but I’m far from a bootstrap expert)

You’re always welcome here.

Please let us know in new topic if you have any further questions, or if we can provide you with any other assistance.