Navigation
Archive / 1022 / custom grid buttons on medium screens like iPad
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • June 28, 2016 at 11:21 am #1063504
    bak
    Participant

    Hi there

    I use custom grid buttons next to each other.

    To limit their size, I use the classes left-grid or center-grid. It works well on desktop and mobile but not on medium screens where the buttons are cut off.

    How can I address this?

    June 28, 2016 at 11:22 am #1063506
    bak
    Participant
    This reply has been marked as private.
    June 28, 2016 at 11:27 am #1063518
    bak
    Participant

    there seems to be a mix up in threads. This one is till unsolved.

    thanks for an answer

    June 28, 2016 at 2:44 pm #1063802
    Nabeel A
    Moderator

    Hi there,

    Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

    @media screen and (min-width: 767px) {
.page-id-1022 #x-section-1 ul.x-block-grid.left-grid {
    width: 100% !important;
}
}

    Let us know how this goes!

    June 29, 2016 at 4:59 am #1064555
    bak
    Participant

    Hi

    The problem with the proposed solution is that on desktop view, the buttons are to big now since they take 100 % of width instead of being only 40 % of the width.

    I have the problem only on medium screen like ipads. how can I fix it only for medium size screens but keep it the way it is on desktop and mobile?

    June 29, 2016 at 6:33 am #1064660
    Christian
    Moderator

    Please try changing min-width: 767px to max-width: 767px.

    Thanks.

    July 3, 2016 at 8:19 am #1070334
    bak
    Participant
    This reply has been marked as private.
    July 3, 2016 at 8:50 am #1070356
    Christopher
    Moderator

    Hi there,

    Please remove inline CSS max-width: 90%; from text element.

    Hope it helps.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1063504 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>