首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >只有Bigcartel手机

只有Bigcartel手机
EN

Stack Overflow用户
提问于 2016-06-08 06:04:59
回答 2查看 573关注 0票数 1

我想让我的大卡特尔页面显示出来

代码语言:javascript
复制
<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>

仅在移动设备上,当试图显示浏览器代码的确切副本时,此处是页面http://pafclub.bigcartel.com/entry

这就是我到目前为止所拥有的:

代码语言:javascript
复制
<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> 

它显示了一个版本的图像,但当我检查移动设备时,根本没有图像。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-06-09 14:52:33

该主题的代码为您需要重写的自定义页面主体添加了一个边距。将其添加到Customize > Advanced > CSS的底部以删除它:

代码语言:javascript
复制
#entry .page {
    margin: 0 auto;
}

然后,对于输入页面,只需使用以下代码就可以正确地以图像显示为中心(在桌面和移动设备上)

代码语言:javascript
复制
<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>
票数 0
EN

Stack Overflow用户

发布于 2016-06-08 07:23:48

我已经解决了你的问题,并找到了解决办法。请检查密码。

代码语言:javascript
复制
.mobileHide { display:table; height:100%; text-align:center; vertical-align:center; width:100%;}
.middle{ display:table-cell; height:100%; vertical-align:middle; width:100%;}
.middle a{ max-width:80%; display:inline-block;}
.middle a img{ max-width:100%;}

html, body {
    	height: 100%;
		margin: 0px;
	}
代码语言:javascript
复制
<div class="mobileHide">
<div class="middle">
    <a href="/products">
    <img width="420" height="" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY">
    </a>  
  </div>
  <div style="clear:both;"></div>
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37694424

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档