Buddypress legacy template and responsiveness on mobile devices

  • Resolved djintelbe

    (@djintelbe)


    2 years, 9 months ago

    Hello OceanWP theme developpers,

    Thank you very much for your wonderful theme. OceanWP is the best WordPress theme for me and I would like to keep it for a long time.

    One of the many things made me chosen OceanWP is, it has some Buddypress support. However, there are some responsiveness issues on mobile phones. I am asking for your help, please; if you can help me solve them. I tried some CSS code but it didn’t work.

    1) Single activity
    I would like to extend the area that contents the posts as in the screenshot below

    View post on imgur.com

    Link to page concerned (to open in a mobile device, please): https://mathfev.com/en/activites-des-membres/p/558/

    The profile photo is very large and takes up a lot of space and therefore the area that contains the note is very small. Moreover, if the post contains comments, the comment area becomes very very narrow as you can see below.

    View post on imgur.com

    2) Single group page and “what’s new username in a group name”
    The “Group Admins” text is very constrained

    View post on imgur.com

    Link to the page concerned (to open in a mobile, please): https://mathfev.com/en/groupes/algebre-groupe/

    The “what’s new username in the group name”

    View post on imgur.com

    3) Posts in stream activity
    If possible, I would like the entire note comes below the profile picture, username and date, so that, there will be plenty of space for the post.

    View post on imgur.com

    Link to the page (to open in a mobile phone, please): https://mathfev.com/en/

    Thank you for your time.

    Best regards

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    We are most certainly thankful for your feedback.

    1, 2 . Visited the shared URL, and seems you already managed to fix the issue.
    https://ibb.co/nsGbTnT

    3. Please try the below CSS code and check.

    @media (max-width: 750px){
    #buddypress div.activity-comments ul li>ul {
    margin-left: 0;
}
}
    Thread Starter djintelbe

    (@djintelbe)

    Hello Abhishek,

    Thank you very much for your reply and the CSS code.

    Yes, I managed to fix the issue with some CSS codes but I don’t know if it is a good practice of coding and if it will not impact my website negatively. I would like to share the CSS codes with you and I need your oppinion on them, please.

    1) Single activity

    Profil photo

    
@media only screen and (max-width: 767px) {
#buddypress .activity-list .activity-avatar {
    width: 60px;    
}
}

    Activity content

    
@media only screen and (max-width: 767px) { 
body.activity-permalink #buddypress .activity-list li .activity-content {
    margin-left: 0px;      
}
}

    Activity comments

    @media only screen and (max-width: 767px) {
body.activity-permalink #buddypress div.activity-comments {
	margin-left: 0px;
}
}

    Link (please, open on mobile device to see the effet): https://mathfev.com/en/activites-des-membres/p/558/

    2) Single group page and “what’s new in a group name, username”

    Group admins box

    @media only screen and (max-width: 767px) {
#buddypress div#item-header div#item-actions { 
    width: 60%;
}
}

    Activity greeting

    #buddypress form#whats-new-form p.activity-greeting {
    line-height: 1.5;
}

    Link (please, open on mobile device to see the effet): https://mathfev.com/en/groupes/algebre-groupe/

    3) Posts in stream activity

    Activity contents

    @media only screen and (max-width: 767px) {
#buddypress .activity-list .activity-content {
	margin: 0 ;
}
}

    Activity comments

    @media only screen and (max-width: 767px) {
#buddypress div.activity-comments {
    margin: 0;
}
}

    Link (please, open on mobile device to see the effet): https://mathfev.com/en/

    And the additionnal one

    4) What’s new form

    @media only screen and (max-width: 767px) {
#buddypress form#whats-new-form #whats-new-content {
    margin-left: 0px;
}
}

@media only screen and (max-width: 767px) {
#buddypress form#whats-new-form #whats-new-content {
    padding: 15px 0 10px 0px;
}
}

@media only screen and (max-width: 767px) {
#buddypress form#whats-new-form p.activity-greeting {
	  padding-top: 13px;
	  margin-left: 75px;
}
}

    Link (please, open on mobile device to see the effet): https://mathfev.com/en/

    Thank you for your time.

    • This reply was modified 2 years, 9 months ago by djintelbe.

    Hello,

    Thank you so much for sharing the solution with us.

    There is no issue with using the custom CSS codes.

    Thread Starter djintelbe

    (@djintelbe)

    Ok, thank you for your reply.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Buddypress legacy template and responsiveness on mobile devices’ is closed to new replies.