Mobile Site Circle Icon Resize

Hi Jessie_ob

Thanks for reaching out.

I can sort of fix this. Try the following:

1. Edit a Page Builder row with Circle Icon widgets in it by clicking the wrench icon far right > Edit Row.
2. Click Attributes top right.
3. Insert the following as a Row Class, the first field:

force-responsive-off

Then at Appearance > Custom CSS:

/* Page Builder Custom Classes */
@media (max-width: 780px) { 
  #content .force-responsive-off .panel-grid-cell {
    float: left;
    width: 33%;
  }
}

The problem is that I don’t know how to do this without stating the width of each column. In my demo I’m stating 33% so that would be a row with three columns.

In theory you could insert your Custom CSS several times with different names and change the width each time:

Eg:

/* Page Builder Custom Classes */
@media (max-width: 780px) { 
  #content .force-responsive-off-33 .panel-grid-cell {
    float: left;
    width: 33%;
  }
}
@media (max-width: 780px) { 
  #content .force-responsive-off-25 .panel-grid-cell {
    float: left;
    width: 25%;
  }
}

The class name inserted at Edit Row > Attributes > Row Class must match whatever you’ve set at Custom CSS for example:

force-responsive-off-25

For a row with two columns. Note the lack of period before the class name when inserted at Attributes.

Alternatively turn off responsive behaviour for Page Builder completely at Settings > Page Builder > Layout > Responsive Layout.

Or turn off responsive behaviour for the theme at Appearance > Theme Settings > Layout > Responsive Layout.

Thanks for the wait. The problem is that the social icons won’t fit on one row on mobile. In order to make that happen we’d need to adjust their size on mobile. Wish I could but it’s unfortunately beyond what we can offer here. If you’d like to hide them on mobile, that’s something we coud help out with.