Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Throughout my site, and in the footer, I use many circle icons. In the mobile view, these icons become stacked because of their size, was wondering if there is a way (or CSS) I can use to enable the circle icons to view the same way they do on desktop, and not stacked?
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:
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:
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.
Awesome, thanks! The font doesn’t all fit, so I’ll keep that portion responsive. I am using site origin social buttons in the footer, and on mobile it stacks them vertically, is there a way I can make the social so it all fits on one row in mobile?
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.