Skip Navigation

[Resolved] Strange css breakpoint on a Toolset layout page

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue that this customer was having was that his pages were being responsive too early at 980px

Solution:

This issue was being caused by his divi css because divi specifies the breakpoints for responsiveness at 980px rather than the breakpoints used by bootstrap at 768px

This support ticket is created 6 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 6 replies, has 2 voices.

Last updated by Rune Brynestad 6 years, 3 months ago.

Assisted by: Shane.

Author
Posts
#602720
image001.png

Please take a look at this page:
hidden link

If you try to resize your browser window down below 980px, everything moves. I know some websites can have a small breakpoint where this can happen, but here it happens already at 980px.

I'm not able to fix this. As far as I can see, I don't have a css that should mess this up. Are there anything that could be done?

Thanks in advice

Regards
Rune

#602753

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Rune,

Thank you for contacting our support forum.

It seems that these breakpoints are controlled by your theme because checking I see that there is a 981px breakpoint for the col-sm-12 css class.

Thanks,
Shane

#603968
css.png

HI Shane

Sorry for my late response. I did not get the reply email notification as I normaly do.

This is a bit strange. I can't find the 981px breakpoint for the col-sm-12 css class anywhere. From what I see, the col-sm-12 css class is set to 100%. (See screenshot). Could you please point me in the right direction here?

Thanks for looking into this.

Regards
Rune

#604423

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

divi.PNG

Hi Rune,

The breakpoints are being defined by the divi css. Bootstrap breakpoints start at 768px so divi seems to have something custom in it that causes the site to respond earlier. See Screenshot.

Thanks,
Shane

#604862

I'm still not able to find that css rule. When I look at your picture, I'm not able to see what selection you made to find that css rule. Could you please make the screenshot a bit wider?

Thanks again for your patience.

Regards
Rune

#604898

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Screen Shot 2018-01-09 at 4.20.30 PM.png

Hi Rune,

No problem.

Here is the screenshot

#605184

Perfect, thanks 🙂

Regards
Rune

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.