Smartphone issue with Amazon aStore using Apostrophe

Hi there,

So this actually has more to do with making your iframe responsive than it does with the Apostrphe theme itself.

However the content in the iframe itself isn’t responsive, so you may be better off using the link you’ve created to your Amazon store for mobile users.

If you like, you can show the iframe at large screen sizes where the store works well, and hide the iframe on smaller screens.

You can add this CSS to your site via Appearance > Customize > Additional CSS to do that:

/* Hide the iframe on smaller screens */

@media screen and (max-width: 911px) {
    .post-4158 iframe {
        display: none;
    }
}

Since you already have a link for smartphones to see the store, that link will be visible instead of the store for smaller screens.

If you want to hide the smartphone link on large screens, just add this CSS:

/* Hide smartphone link on larger screens */
@media screen and (min-width: 912px) {
    .post-4158 a[href*="astore"] {
        display: none;
    }
}

If you’d like to try making the iframe responsive, here are a few resources that might be useful to you:

https://benmarshall.me/responsive-iframes/

https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Thank you