Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 18, 2019 at 7:37 am #1167137
    tremblayly

    Hi
    I’m developing a website on the following link and on the home page I use buttons within a grid row:
    https://tremblayly.wpengine.com/?preview_id=206&preview_nonce=838ee9a14f&_thumbnail_id=-1&preview=true
    The buttons don’t get centered correctly and are off the right margin on mobile devices (ipad portrait, iphone both directions).

    I was expecting these to be responsive to screen sizes, so I’m not sure how to fix this issue.

    Any help would be appreciated,
    Lyse

    December 18, 2019 at 12:00 pm #1167232
    Rikard

    Hey Lyse,

    We can’t view the link you posted unless logged in, please provide either login details or a direct link to the page in question.

    Best regards,
    Rikard

    December 18, 2019 at 3:10 pm #1167297
    tremblayly
    This reply has been marked as private.
    December 22, 2019 at 6:56 pm #1168594
    Mike

    Hi,
    Sorry for the late reply, and thanks for the login, when I look at your grid row on mobile the buttons overlap each other and the images are too small to see well. Have you considered using columns instead?
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    December 24, 2019 at 7:26 am #1168862
    tremblayly

    Hi Mike,

    OK I converted the grid to a column row and it now displays correctly on mobile devices. I find the images kind of small on my desktop but I guess I can live with that.

    Thank you
    Lyse

    December 24, 2019 at 7:59 am #1168893
    Jordan Shannon

    Hi,

    I’m seeing the images as 100% with about 15-20px padding on the sides. Is this how you view it as well?

    Best regards,
    Jordan Shannon

    December 24, 2019 at 8:13 am #1168894
    tremblayly

    Yes on the desktop there is a large gap.

    December 24, 2019 at 12:05 pm #1168916
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (min-width: 900px) { 
#top.home #av_section_2 .post-entry-206 .av-flex-placeholder {
    width: 1% !important; 
}
}

    Then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.