Article Layouts Sharing Icons on Mobile / Tablet

kars

Hello,

I've noticed recurring use of the sidebar/sticky social sharing icons in JA templates. On desktop these are great! On tablet and especially mobile, these should really change to inline-horizontal and have position at top or bottom of article - if not under the main image if shown horizontally.

Especially on mobile, there is too much lost margin for content (text, images, caption) and this UI is proving problematic.

A nice solution would be to just update style to span horizontal in same position or add a toggle option in article layout setting and allow the user to chose how these display on mobile.

Ninja

kars
Hi
try this code in custom css

@media(max-width:768px){.sharing-tool {
    float: none;
    margin: 0 auto;
    text-align: center;
    top: 35px;
    width: 100%;
}.sharing-tool .at-share-btn-elements {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-inline-box;
    -webkit-box-orient: inherit;}
}

If not work, share the page URL and turn off css compression.

kars

Ninja

Thanks Pankaj- this works but one must also include CSS to remove the left padding for articles with sharing enabled. The toggle function in menu / Magazine Layout settings also adds this.

But could you also relay the request to the devs to update the layout options to include a function to do this automatically on mobile? I think most will agree we should not be placing items in the limited width content block on mobile.

Ninja

kars
Kindly send me your site article page URL on which the changes applied.

kars

Ninja

As mentioned, we need to remove the left padding and top margin from the sharing container.

Here is the modified CSS (note: it solves the margin issue mostly but it would still be a much better solution if we could select the position of the sharing function for mobile / tablet - by having an option to place it at top or bottom of article.

@media(max-width:768px){.sharing-tool {
float: none;
margin: 0 auto;
text-align: center;
top: 0px;
width: 100%;
position:relative;
}.sharing-tool .at-share-btn-elements {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-inline-box;
-webkit-box-orient: inherit;}
.item-page .com-content-articlebody.has-sharing {
padding-left: 0px;**
}

URL Example is in edit fields.

Ninja

kars
Hi
As you already apply the code in custom css there is no problem showing on submitted url

@media (max-width: 768px){
.item-page .com-content-article__body.has-sharing {
    padding-left: 0px;
}}

kars

Ninja

Hi Pankaj,

Yes, we already applied the CSS fix. Though the more important part of the post is a request to the JA dev team to incorporate this or something similar into an update as a selectable option. This would be a better long term solution than overriding the template.

Thanks

Ninja

kars
Hi
I am afraid this is already released product and the layout is used by many users on their site with no such concern, Making the change in the core will impact other users, so u can use the custom css as personal change and it will not be override in updates as well.

kars

Ninja

Yes but JA uses the same social sharing layout on other templates. My request is to add a feature in new templates that allows a user to select position of the icons in the back end.

The CSS override fixes part of it, but there is still no way to move the location to top/bottom on mobile. There should be this option. Look at most social share plugins, there is this option.

If the "default" is the current position, adding features to change it won't affect existing users.

I disagree however that there isn't others with the same concern. Maybe they just didn't make a forum post.

Overall, it is not recommended for good UI/UX to remove available width in content area on mobile devices. This is an accepted rule and taught everywhere.

My suggestion is for a long term solution that will make the JA article layout better and more flexible.

Thanks

Ninja

kars
Hi
I will share the feedback to concern team member on this for future plans.

Regards