如何在avada主题中使用响应式HTML?

时间:2017-01-15 11:25:56

标签: javascript html css wordpress responsive

Heloo 如何通过响应来使用avada主题wordpress中的html / css cod?

请看这张图片。

enter image description here

2 个答案:

答案 0 :(得分:1)

只需为你的html中的两个屏幕添加@media,并在你的html代码中添加标签!

答案 1 :(得分:0)

这是鳕鱼。



<style>
div.cities {
    background-color: #ecf0f1;
    color: #000;
     border:3px solid #bdc0c1;
     border-style:dashed; }
.clear {clear: both}
.flex{ display:flex;margin: 20px; padding: 20px 0 0 0;}
.flex img{
  width: 60px;
  height: 60px;
	margin: 0 10px;
}
	.flex strong {font: 14px isans-light; color: #4c4b51;}
	.flex p {width: 145px; height: 40px;color: #8d8d8d;font: 12px isans-light}
	
	
</style>
<div class="cities">

<div class="flex">
  <img  src="wp-content/uploads/2017/01/f-01.png"/>
  <div>
  
  <strong>  Lorem ipsum dolor sit amet, consectetuer adipiscing

</strong>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
  </div>
 <img  src="wp-content/uploads/2017/01/f-02.png"/>
  <div><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing</strong>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
  </div>
  <img  src="wp-content/uploads/2017/01/f-03.png"/>
  <div><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing </strong>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
  </div>
  
  <img  src="wp-content/uploads/2017/01/f-4.png"/>
  <div><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing</strong>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing </p>
  </div>
  
  
  
  
  
</div>

</div>
&#13;
&#13;
&#13;