Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 2, 2015 at 10:22 pm #374259
    mbean2014

    Need some help with Promo Boxes being displayed on Mobile devices.
    Link to test site attached.
    3 issues:
    a. No matter what button size picked the button always expand to the screen, how do I keep it at a locked size?
    b. Can’t seem to remove/decrease the top white margin within each promo box. (If you check top and bottom margin, they are not the same.)
    c. How to center all Promo Boxes at center of screen. Currently all boxes are shifted to the left, with more white gap on right.

    side note: I have searched the forum and have currently used the following code:
    .av_promobox {
    padding: 3px 3px;
    margin: 1px 0;
    width: 90%}

    January 3, 2015 at 12:11 am #374324
    Elliott

    Hey mbean2014!

    1. Add this to your custom CSS.

    .av_promobox .avia-button {
    width: 100px !important;
}

    2. It looks like you already did this.

    3. Your currently using a 2/5 column. Add a 1/4 to each side of it.

    Regards,
    Elliott

    January 3, 2015 at 1:14 am #374353
    mbean2014

    Hi,
    Thanks for fast response.
    I have tried it as suggested, all 3 issues still present (button now squished on left).
    Please see attached image on how it looks on mobile device.
    screenshot

    January 3, 2015 at 5:26 pm #374494
    Elliott

    Hi!

    Add this.

    @media only screen and (max-width: 767px) {
.responsive .av_promobox .avia-button, .responsive .av_promobox .avia-button-wrap { position: absolute !important; top: 20px !important; left: 70px !important; }
.avia-promocontent { top: -10px !important; }
}

    Regards,
    Elliott

    January 7, 2015 at 9:36 pm #376470
    mbean2014

    Thanks,
    Being playing around with this.
    For tablet it seems to look fine (both portrait and landscape).

    For mobile still some tweaking needed?
    It looked fine in portrait, but not in landscape.
    Anyway to center this and not have the promo box expand like that (on tablets it looked centered and does not expand).
    screens

    January 8, 2015 at 6:02 pm #376953
    Elliott

    Hey!

    Add this.

    @media only screen and (max-width: 767px) {
.av_promobox {
    float: none !important;
    margin: 0 auto !important;
    width: 300px !important;
}
}

    Cheers!
    Elliott

    January 9, 2015 at 5:45 am #377210
    mbean2014

    Thanks, we are getting there!
    Please check same test site on mobile device.
    I have added a banner at top of the page. There’s a huge gap between this banner and the promo boxes
    How would I decrease this white space and move all promo boxes up a bit.

    Thanks!

    January 9, 2015 at 7:19 pm #377554
    Elliott

    Hi!

    Add a codeblock element to the page content and then add this inside the codeblock.

    <style type = "text/css">
.content, .sidebar { padding-top: 0px !important; }
</style>

    Regards,
    Elliott

    January 9, 2015 at 9:09 pm #377581
    mbean2014

    Looks good,Thanks for all the help, really appreciate it!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Promo Box on Mobile devices’ is closed to new replies.