Styling – Mobile View newsfeed margins too large

[Bj123]

Is there an easy way to reduce the very wide margins of the newsfeed stream in mobile view like on Facebook where the full width of the display is used for the newsfeed. The Boss mobile newsfeed has very wide margins left and right and the text block of an activity item covers only like half of the iPhone display. On smaller displays like an iPhone 5 this looks completely awful. The same applies to photos. I want to considerably reduce or even get rid of the margins completely on mobile view. Thanks.

[Anve S.]

HI @bstrehl,

Please attach a screenshot to explain it as i am unable to understand it completely.

Regards
Anve

[Bj123]

Here’s the screenshot. It’s not from an actual iPhone but that’s how it looks like on my older iPhone. I am talking about the margins on the left of the avatar picture and on the right side of the text. Reducing these margins to almost zero would be a more pleasant newsfeed experience on older smaller mobile screens. In the Facebook app, for example, the photos and text also extend almost to the width of the screen for a better experience.

[Anve S.]

HI @bstrehl,

Sorry but i can not replicate the issue of yours since it is looking fine at our end . PM me the site details , will check there and provide you the css.

Regards
Anve

[Bj123]

There is not an “issue” with the mobile view on my site. It just doesn’t look very good on smaller smartphone screens. Just let me know how to reduce the margins left and right of the newsfeed content. See the picture in the post above and compare to Facebook mobile view. It’s pretty obvious what I mean.

[Anve S.]

Hi @bstrehl,

Please try applying the following css in child theme’s custom css option.

@media screen and (max-width:480px){
body.activity #buddypress .activity {
  padding: 0 10px !important;
}
}

Regards
Anve

[Bj123]

Hi Anve,

I copied the css in the custom css section of the child theme on dashboard but I couldn’t notice any difference for smaller screen sizes. I am not quite sure what this may have changed but I couldn’t notice anything…

Best regards

[Anve S.]

Hi @bstrehl,

Please try applying the given css using ‘Simple custom css’ plugin. As i have applied the css and it works for me . Please refer to following screenshot.

Regards
Anve

[Bj123]

ok, thanks for your help! I could make it work…

[Anve S.]

Hi @bstrehl,

Please ask if you have any question regarding the code . Good luck 🙂

Regards
Anve

[Richard]

Anve, Thank you very much – That did not work for me – but you led me in the right direction. I’m new to css – did some reading and discovered that this is what worked for me on both an iPhone 5 and 6+

body.activity #buddypress .activity {
margin-right: -38px; !important;
margin-left: -38px; !important;
}

Maybe that will help someone. Now trying to figure out how to decrease the spacing between the privacy setting and the ‘what’s new, username’
-Rick

[ocity]

I tried the this code and still no luck for me can anyone help?