Sydney services type S1

Dear,

On www.primaverap6.net

I have using services type A widget, in two rows.

1: Displaying > My courses ( This is showing services categorized as type a) This is perfectly fine.
2: Displaying > Our services (Video lessons, Assignment, Earn Certificate) I want to display these horizontally on mobile screen.

Previously I’m using the following SHORT CODE to inline my “Sydney Facts” And now it works fine.

@media only screen and (max-width: 767px) {
div.widget_sydney_facts div.panel-widget-style > div {
width: 24%;
display: inline-block;
}
}

Can you suggest any short code to inline my “Our services” (Video lessons, Assignments, Earn Certificate" WITHOUT hurting “Our courses”.

Regards,

Ammar

Hello there,

Try adding this code:


@media only screen and (max-width:991px) {
   
   .widget_sydney_services_type_a .service.col-md-4 {
      width: 33.33333333%;
      float: left;
   }
   
}

Let me know how it goes.

Regards,
Kharis

Dear,

i explained that I only like to inline “My services” and Not “Our courses”

The solution you are telling is affecting both .

Technically, each widget has a unique ID name. For your “Our Services”, you should use this code instead.


@media only screen and (max-width:991px) {

   #panel-298-1-0-0.widget_sydney_services_type_a .service.col-md-4 {
      width: 33.33333333%;
      float: left;
   }
   
}

Regards,
Kharis

Dear ,

I tried the code. And it did worked good for few hours.

But after sometime everything get back to same " Vertical"

:frowning:

Any idea?

Hello there,

I noticed the ID is updated due to the widget might have been replaced with new one. Now the ID is #panel-298-2-0-0. So you will need to update the code to:


@media only screen and (max-width:991px) {

   #panel-298-2-0-0.widget_sydney_services_type_a .service.col-md-4 {
      width: 33.33333333%;
      float: left;
   }
   
}

Each time you replaced the widget, the ID will be updated. To know it, you can check with the web browser’s inspector tool. On Firefox, it can be accessed from Tools > Web Developer > Inspector. Or, simply right click the window, then select Inspect Element.

Cloudup

Regards,
Kharis