using both regular and mobile version

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

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