Responsive view does not work on mobile devices

I’m a little upset to see what my website with sydney theme looks on mobile devices:
(screenshot from the customizer mobile simulation - but it looks the same on an original mobile)

The text is cut of in the middle of a sentence. I’m using Google fonts. What can I do to improve the appearance on mobile devices? Any help is appreciated.
Cheers, Timo


That was because your custom CSS code

#panel-2-0-0-0> .panel-widget-style {
    padding: 100px 100px 100px 100px;

Please replace it with this:

@media only screen and (min-width: 1024px){
  #panel-2-0-0-0> .panel-widget-style {
      padding: 100px 100px 100px 100px;

Hi Awan, thank you very much for your support!
I have to admit I feel slightly blonde right now … can’
t can’t find that code anywhere in my Custom CSS Plugin … nor in the custom CSS section of the customiser. The Inspector tells me it must be somewhere in the siteorigin-panels-layouts-head … ??
A little hint?
Very much appreciated!

Please check the row’s setting for the service widget.
Edit page > Edit the service row > Row styles > attribute > then remove the code on the CSS styles field

After you remove it, I think you don’t need to add the custom CSS code which I’ve mentioned in above anymore.


Hi Awan, regrettfully both CSS row-style fields of both of my service fields are empty … :frowning: … (I checked the widget fields in the rows as well for some obsolete CSS entries)

I really dont know where this CSS entry comes from … (and I can see it in the code inspector as well) … see for yourself:

Thank you for your support!

It’s strange. How if you overwrite that CSS code with this?

#panel-2-0-0-0> .panel-widget-style {
    padding: 0 !important;

Hi Awan,
I tried your code in the row as wel as widget attributes but nothing changed.
I than tried it in the custom CSS plugin and this finally solved the problem.

So thank you again for you extraordinary support. It is exceptionally good and quick!
Cheers, Timo

1 Like