Improve Mobile Experience For Your Community

PeepSo and Divi Theme are a match made in heaven. PeepSo itself is responsive and does adapt to the device size. However, we can take it a step further. That would be by making PeepSo edge-to-edge and here’s how you can do it with Divi Builder and some simple css.

In the first step you have to add Custom CSS class, to do this go to Appearance > Customize > Additional CSS. Now add code below and save changes by pressing Publish button above:

@media screen and (max-width: 980px) {
.full-width-mobile > .et_pb_row { width:100% !important; max-width: 100% !important; }
}

Code notes:
980px – above this number our code will be disabled and sidebars will appear.
.full-width-mobile – this is our class name, you can modify it but keep in mind we will use it in the next steps.

Second step, we have to edit each PeepSo page which we want to make full width on mobile view. These are the most common and default PeepSo pages:

  • Recent Activity
  • Members
  • Groups
  • Messages
  • User profile
  • Register
  • Password Recover

Start with Recent Activity and once done do the same for the other pages. It’s as simple as copy&paste. Instead of default WordPress text editor, use Divi Builder. You should see something like on the screen below. You will see that we’re using 3 column layout, but you can use your own.

Divi Builder - 3 Column Layout

Divi Builder – 3 Column Layout

Now open a section settings:

Divi Builder - Settings

Divi Builder – Settings

Go to Advanced tab and paste our Custom CSS class “full-width-mobile” (without the dot at the beginning) from the first step:

Divi Builder - Advanced

Divi Builder – Advanced

Save & Exit and Save / Publish page changes.

That’s it! Now repeat the second step on other PeepSo Pages and you’re done.

The Result

The results are like you can see below. Edge-to-edge community. No distractions and no wasted space on the screen. These are screenshots from iPhone SE, a relatively small-screen phone and yet, everything is clear and comfortable to use.

Before and after adding custom css.

Before and after adding custom css.

Brought to you by PeepSo Team Matthew Jasiukiewicz
I like to think of myself as an artist who paints in pixels. I'm PeepSo's Frontend developer and designer. I'm able to imagine a clean presentation and put it straight onto the screen. I like turning ideas into visual solutions. I have a passion for fast cars and spend most of my free time pimping my ride.

Reactions & comments

Join Our Community!

Join us to discuss PeepSo's features, connect with the development team and give suggestions.

Comments

@peepso_user_6115(Keegan Prendergast)
I have Premiumpress theme, peepso all good, i downloaded Divi Builder plugin. i tried the steps advised but doesnt work.
1 year ago 1 year ago
@peepso_user_13311(Olivia Mercado)
This is soooo helpful! Thank you @peepso_user_8(Matthew)!