I'm trying to get my bigcartel page to show
<div style="margin-top: 0px; img align: middle">
<a href="/products"><img width="420" height="42" style="vertical-align:middle;" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY"></a>
</div>
on mobile devices only while trying to show an exact copy of the code for browsers only here is the page http://pafclub.bigcartel.com/entry
And this is what I have so far:
<div class="mobileHide">
<div style="margin-top: 0px; img align: middle">
<a href="/products"><img width="420" height="42" style="vertical- align:middle;" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY"></a> </div>
<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style>
<div class="mobileShow">
<div style="margin-top: 120px; margin-bottom: 10px; text-align: center;">
<a href="/products"><img width="420" height="42" style="vertical-align:middle;" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY"></a>
</div>
<style type="text/css">
.mobileShow { display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>
it shows one version of the image but when I check on a mobile device there is no image at all.
The theme has code that adds a margin to custom page bodies that you'll need to override. Add this to the bottom of Customize Design > Advanced > CSS to remove it:
#entry .page {
margin: 0 auto;
}
Then for your entry page, all you'll need is the following code to have the image display centered properly (on desktop and mobile)
<a href="/products">
<img style="width:100%;margin:0 auto;max-width: 427px;display:block" src="https://i.imgsafe.org/7da3920e19.png" alt="ENTRY">
</a>