Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 15, 2018 at 11:19 am #912702
    xa1970

    HI,

    Sorry, I will bug you for only few more days. I need to finish this site in 4 days.

    Can you please give me codes for the following?

    For this page http://www.morsche.co/explore

    1. Full width button to take the width of the page or the ‘color section’ element. (buttons are in color section.)
    2. White thin outline around the button.
    3. Once full element width, I want hover on each button.

    Thank you so much for the help.

    Regards,

    Xandria

    February 15, 2018 at 11:52 am #912715
    Mike

    Hey xandria,
    Try to create it by using the full width button element.
    2018-02-15_043754
    Please see example at: http://morsche.co/button-test/
    You will also see this code in the General Styling > Quick CSS field:

    #top .avia-button-fullwidth {
    border-style: solid!important; 
    border-width: 3px!important; 
    border-color: #fff!important; 
}

    Best regards,
    Mike

    February 15, 2018 at 12:02 pm #912717
    xa1970

    Hi Mike,

    Thank you so much for your prompt reply.

    Border is perfect now but is there any way to have the width of the button reach to the edges of the element? Means it touches the color section element’s borders?

    Thanks again!

    Regards,

    Xandria

    February 15, 2018 at 1:03 pm #912735
    Mike

    Hi,
    If the button was not in the color section it should reach the edges, if in the color section, Try this code in the General Styling > Quick CSS field:

    .avia-section.main_color.avia-section-default div.container {
    max-width: 100%!important; 
    width: 100%!important; 
    padding-right: 0px !important; 
    padding-left: 0px !important;
}

    I have tried to make this code work on any page, but if it causes issues if other pages let us know and we can adjust with a custom ID once you have created the page you want to use it on.

    Best regards,
    Mike

    February 15, 2018 at 1:26 pm #912743
    xa1970

    Thanks Mike, you are the best!

    One more thing…how can I make the button font smaller?
    I checked the Advance Settings -> Buttons but there is no font option :(

    Regards,

    Xandria

    February 15, 2018 at 3:28 pm #912784
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    a.avia-button.avia-button-fullwidth .avia_iconbox_title {
font-size: 10px !important;
}

    Please adjust the number ten in the code to the size you wish.

    Best regards,
    Mike

    February 15, 2018 at 5:28 pm #912834
    xa1970

    Hey Mike, this is great now. Perfect! Thank you again :)

    Now once my multiple menu request is seen, I will be able to link this page to the homepage :)

    Regards,

    Xandria

    February 15, 2018 at 6:29 pm #912857
    Jordan Shannon

    Hi,

    Did you still need further help on this particular topic?

    Best regards,
    Jordan Shannon

    February 15, 2018 at 6:32 pm #912861
    xa1970

    Hey Jordan,

    No, I think you may close the thread :)

    Regards,

    Xandria

    February 15, 2018 at 6:55 pm #912874
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Fullwidht button and it's outline’ is closed to new replies.