Hiya!
In the Suivant ReadyTheme,
I'm hoping to make use of built-in @media queries in order to
use 2 alternate homepage banners with their own separate links.
Specifically,
I'd like Desktop and Laptop users to click a same-size replacement for that Homepage "sfnt_hero" image
and be directed to our "Contact Us" page. ( It's set up that way right now.)
..
But if someone has found us on a mobile phone, I'd like the Banner
to change ( so it can say "Tap here to call" or similar ) and use the
giving them quick access
to talk to our main store.
If I understand correctly, I can do this by
Commenting out:
in the Global Header
And inserting an mvt:item of CONTENT with this:
Then changing the "structure.css" file
by adding this at the end:
Am I close to correct? Or am I asking the wrong question entirely for
what I need to do?
Thanks Much in advance to anybody that can keep me from
blowing up our website! :)
..
In the Suivant ReadyTheme,
I'm hoping to make use of built-in @media queries in order to
use 2 alternate homepage banners with their own separate links.
Specifically,
I'd like Desktop and Laptop users to click a same-size replacement for that Homepage "sfnt_hero" image
and be directed to our "Contact Us" page. ( It's set up that way right now.)
..
But if someone has found us on a mobile phone, I'd like the Banner
to change ( so it can say "Tap here to call" or similar ) and use the
Code:
<a href="tel:8005551212"><IMG . . . etc. . . . ></a>
to talk to our main store.
If I understand correctly, I can do this by
Commenting out:
Code:
<!--
<mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
-->
And inserting an mvt:item of CONTENT with this:
Code:
<div id="big_view">
<a href="http://www.homesurplus.com/mm5/merchant.mvc?Store_code=homesurplus&Screen=CTUS">
<img style="border: 0px solid ; width: 1599; height: 799;" alt="Welcome to Home Surplus!" title="Welcome to Home Surplus!"
src="graphics/00000001/banner_to_show_desktop_viewports.jpg">
</a>
</div>
<div id="little_view">
<a href="tel:8005551212">
<img style="border: 0px solid ; max-width: 100%; height: auto;" alt="Tap Here to give us a Call!" title="Tap Here to give us a Call!"
src="graphics/00000001/banner_to_show_mobile_phone_viewports.jpg">
</a>
</div>
by adding this at the end:
Code:
#little_view {
display: none;
}
#big_view {
display: inline-block;
}
@media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
#little_view {
display: inline-block;
}
#big_view {
display: none;
}
}
what I need to do?
Thanks Much in advance to anybody that can keep me from
blowing up our website! :)
..
Comment