Okay
  Public Ticket #1281380
Mobile view - styling nectar-social & nectar-love similarly
Closed

Comments

  •  2
    Bren Burrell started the conversation
    August 23, 2017 at 7:05pm

    In desktop view, the nectar-social & nectar-love meta data are displayed with a surrounding border in a capsule shape.

    In mobile view (I'm testing with an iPhone 6) ...

    1. with portrait orientation (and sometimes landscape view), the nectar-love border displays as a circle. This is very jarring visually.

    How do we make sure the capsule shape remains for the nectar-love meta?

    2. sometimes,  the social icons display individually instead of as a single icon.

    How do we make sure that when the page first loads, in any mobile orientation, the single, nectar-social meta displays alongside the nectar-love meta, both in a capsule shape.

    3. if the single, nectar-social icon is selected, the individual social icons overlap the nectar-love meta so it is no longer visible.

    Can we keep the nectar-love meta visible?

    Thanks

    Bren


  •  8,427
    Tahir replied
    August 24, 2017 at 12:07pm

    Hey ,

    Try using the Optimization plugins recommended in this Article http://themenectar.com/docs/salient/performance-optimization-guide/ and check if that makes a difference . 

    Best.

    ThemeNectar Support Team 

  •  2
    Bren Burrell replied
    August 24, 2017 at 6:50pm

    Hi Tahir

    I've had a look at http://themenectar.com/docs/salient/performance-optimization-guide/ and don't understand how it relates to my question.

    Doesn't my query relate to CSS styling in mobile view?

    Thanks
    Bren

  •  8,427
    Tahir replied
    August 25, 2017 at 2:56pm

    Hey Again,

    Change this code to display:inline instead of display block and it should fix it . 

    The correct code is : 

    @media only screen and (max-width: 690px) {
    .row .col.section-title span:not(.share-count-total), html .single #single-below-header span:not(.share-count-total) {
        display: inline !important;
    }
}

    Be.st

    ThemeNectar Support Team 

  •  2
    Bren Burrell replied
    August 25, 2017 at 6:53pm

    Hi Tahir

    Such small tweaks, such big gains!

    On many mobiles in portrait view - including my iPhone 6 - the nectar-social meta icons display unpacked below the nectar-love icon (now displayed in a capsule).

    When in mobile portrait view < 481px wide, can we get the nectar-social meta to display alongside the nectar-love meta, both in capsule shape?

    Thanks for your continued help with this,
    Bren

  •  2
    Bren Burrell replied
    August 25, 2017 at 6:54pm

    Here's the screenshot I meant to upload with the last reply..

  •  8,427
    Tahir replied
    August 26, 2017 at 7:20am

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 480px) {
    .single .blog-title #single-meta ul li.meta-share-count {
        float: right!important; 
        clear: none !important;
    }
}

    Thanks

    ThemeNectar Support Team