Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 6, 2013 at 12:46 am #185001
    entrepreneur

    I’m wondering if you could help me with the button shortcode. I need to make it responsive.
    As you can see in the screenshots below, I’ve added the large button shortcode, inside of a text widget, in the sidebar of the product page. I’ve increased the size of the button with:

    .avia-button.avia-size-large {
    padding: 13px 30px;
    font-size: 16px;
    min-width: 760px;
    }

    and styled it with:

    #top #main .single-product-main-image .sidebar, #top #main .single-product-main-image .inner_sidebar {
    border: 1px;
    margin: 0;
    padding: 0px 0 0 0;
    width: 100%;
    min-height: 0;
    }

    body div .avia-button {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-style: solid;
    border-top-width: 1px;
    margin: 0px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    }

    Desktop View
    https://dl.dropboxusercontent.com/u/17031532/live-view-button-desktop.png

    Tablet Portrait View
    https://dl.dropboxusercontent.com/u/17031532/live-view-button-tablet-portrait.png

    Phone Portrait View
    https://dl.dropboxusercontent.com/u/17031532/live-view-button-phone-portrait.png

    I’ll send info in a private message.

    Thanks,
    Ben

    November 6, 2013 at 12:50 am #185003
    entrepreneur
    This reply has been marked as private.
    November 7, 2013 at 3:14 am #185444
    Ismael

    Hey!

    You can use this on your custom.css or Quick CSS:

    @media only screen and (min-width: 1161px) and (max-width: 1350px)  {
.avia-button.avia-size-large {
min-width: 668px;
}
}

@media only screen and (min-width: 1007px) and (max-width: 1160px)  {
.avia-button.avia-size-large {
min-width: 550px;
}
}

@media only screen and (min-width: 786px) and (max-width: 1006px)  {
.avia-button.avia-size-large {
min-width: 678px;
}
}

@media only screen and (max-width: 785px)  {
.avia-button.avia-size-large {
min-width: 428px;
}
}

    Cheers!
    Ismael

    November 7, 2013 at 8:09 am #185506
    entrepreneur

    Thanks, Ismael!
    I don’t know why I didn’t think of using the grid. I had just finished adjusting the single product images and summary using it. Lack of sleep, I guess..

    I’ve added code to allow for mobile portrait & landscape view, as well as desktop large, (min-width: 1340px), for anyone else who might want to use it.

    @media only screen and (min-width: 1340px) {
    .avia-button.avia-size-large {
    min-width: 760px;
    }
    }

    @media only screen and (min-width: 1161px) and (max-width: 1350px) {
    .avia-button.avia-size-large {
    min-width: 668px;
    }
    }

    @media only screen and (min-width: 1007px) and (max-width: 1160px) {
    .avia-button.avia-size-large {
    min-width: 550px;
    }
    }

    @media only screen and (min-width: 786px) and (max-width: 1006px) {
    .avia-button.avia-size-large {
    min-width: 678px;
    }
    }

    @media only screen and (max-width: 785px) {
    .avia-button.avia-size-large {
    min-width: 428px;
    }
    }

    @media only screen and (max-width: 340px) {
    .avia-button.avia-size-large {
    min-width: 268px;
    }
    }

    Thanks for your support,
    Ben

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Responsive Button Shortcode’ is closed to new replies.