Okay
  Public Ticket #1844901
Horizontal List Item
Closed

Comments

  •  5
    Steve started the conversation
    January 7, 2019 at 5:11pm

    Hi Tahir,

    Is it possible to get the Call To Action buttons to align below the other content on devices other than desktop? You can see from the screen shot that the buttons look terrible on mobile as its not stacking the elements.

    Thanks,

    Steve

  •  75
    Scott replied
    January 8, 2019 at 10:12am

    Hello Steve,


    Kindly share with us the URL to this page so that we can advice further.

    Themenectar Support Team

  •  5
  •  75
    Scott replied
    January 8, 2019 at 12:26pm

    Hey,


    Thanks for the quick response. Try the following CSS

    @media only screen and (max-width: 1000px) and (min-width: 1px) {
    .nectar-hor-list-item.has-btn {
        padding-right: 0 !important;
    }
    .nectar-hor-list-item[data-columns="3"] .nectar-list-item {
        margin-bottom: 24px !important;
    }
    .nectar-hor-list-item[data-columns="3"] .nectar-list-item .nectar-list-item-btn {
        right: 50%;
        top: unset;
        bottom: 0px;
        transform: translateX(50%);
    }
}

    Regards,

    Scott

    Themenectar Support Team

  •  5
    Steve replied
    January 8, 2019 at 12:38pm

    Hi Scott,

    Thanks so much for sending this through, looks much better. Is it possible to have the button aligned left and more space above and below? It's very cramped.

    Thanks,

    Steve

  •  75
    Scott replied
    January 8, 2019 at 1:06pm

    Okay,


    Remove the code I just sent you and replace with the following

    @media only screen and (max-width: 1000px) and (min-width: 1px) {
    .nectar-hor-list-item.has-btn {
        padding-right: 0 !important;
        padding-bottom: 42px;
    }
    .nectar-hor-list-item[data-columns="3"] .nectar-list-item {
        margin-bottom: 24px !important;
    }
    .nectar-hor-list-item[data-columns="3"] .nectar-list-item .nectar-list-item-btn {
        left: 50%;
        top: unset;
        bottom: 10px;
      
    }
}

    I made quite some few changes


    Themenectar Support Team

  •  5
    Steve replied
    January 8, 2019 at 1:20pm

    Hi Scott,

    Thanks for sending that through but the button is aligned right not left.

    If this is too much work I totally understand.

    Many thanks,

    Steve

  •  75
    Scott replied
    January 9, 2019 at 3:19pm

    Hello,


    Thanks for you patience so far.


    Tweak the CSS I sent you last time where it says left:50% until you get to the perfect position you want to center it

    Themenectar Support Team