This topic contains 1 reply, has 2 voices, and was last updated by Alex Alex 6 years, 6 months ago.

using both regular and mobile version

  • User Level

    I’m trying to setup both regular desktop version and mobile version for my supertorelocator and I was wondering if there’s an easy way of doing this. I understand that the code calls a single css file but I would like to be able to call a seperate css depending if my user is on m.abc.com versus abc.com

    Alex
    StaffUser Level

    Hi there,

    Thank you for your inquiry, you can install both copies on separate folders and link them to the same database. Embed both of the iframes on your store locator page and control the display with CSS Media Queries at the end of your CSS file of your website that calls the embedded iframe.

    This way if it’s on mobile it will display the responsive version and if it’s on PC it will show the normal version and hide the responsive version.

    Reference: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) {
    /* Styles */
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
    /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }
    
    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }
    
    /* iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }
    
    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) {
    /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

    Set the default “display” styles of your iFrames to none. Then, use the styles in the above media queries to set display:block; for the iframe you want to show.

    Cheers,
    Alex

You must be logged in to reply to this topic.