Can I force "services" widget to display vertically?

Hi,

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

Thanks!

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%;
}

Regards,
Kharis

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.

Regards,
Kharis