Changing the number of columns in the services widget


#1

We increased the number of services from 2 to 3, and would like to show these three side by side (on a laptop or regular monitor- not on mobile). Currently, the theme show two services in the first row and the third on the 2nd row.

We tried changing this by adding this css:

`.widget_sydney_services_type_a .service {
width: 33.3333%

}

This cause each service block to display on 3rd of the width, but they were still split over two rows.


#2

Hello,

I will be glad to help you, but can you please provide a link to your website to let me inspect it?

Kind Regards, Roman.


#3

Sure, here it is:

(btw: the css to narrow down the width of each column is currently disabled)


#4

oops, here is the link our website


#5

Hello,

I don’t see this issue on your front page (only under 992px of width, which is normal), can you please provide explanatory screenshot?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.


#6

By mistake the site was a previous version. You can see the problem now, and here is also a

Screen shot

Thanks


#7

Hello,

  1. I still don’t see this issue on your front page, only under 992px of screen width, which is normal.

  2. Also I don’t see a screenshot, can you please check the link?

Kind Regards, Roman.


#8

Retrying to link to screenshot:

http://radbeeqms.com/wp-content/uploads/2016/09/problem.png


#9

Hello, thank you for a screenshot, now I see it.

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (min-width: 992px) {
    div.widget_sydney_services_type_a > div.service {
        width: 33%;
        clear: none !important;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#10

Yes, that did the trick, thanks!


#11

You are welcome!

I’m glad that it did the trick :slight_smile:

Kind Regards, Roman.