Stack the profile picture, info, and online icon vertically

4 days ago — by Kayla⟡ — Profile Picture Effects — used 3 times

Stack your profile picture, information, and online icon vertically, instead of being to the right.

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<style>

/* Stack the profile picture, info, and online icon vertically */

.general-about {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

}



.general-about .profile-pic {

  order: 1 !important;

  float: none !important;

}



.general-about .details {

  order: 2 !important;

  width: 100% !important;

}



.general-about .online {

  order: 3 !important;

  visibility: hidden !important;

}


</style>

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Profile Picture Effects

« Back to Profile Picture Effects | « All Profile Elements