1
ここに私と一緒にいてください - 私はHTML/CSSを学ぼうとしています。カスタムHTMLウィジェットをさまざまな画面サイズで表示する方法を教えてください。
私はこのハウツーサイトdropshipstepbystep.comを持っています。自分のホームページで「成功への3つのステップ」のトップラインを目指していたので、Zerif Liteテーマの「Our Focus」セクションにカスタムHTMLウィジェットを作成しました。私はこれをやったやり方はかなり恐ろしいものだと確信していますが、私のデスクトップでは、私が望む外観にかなり慣れてきました。
これで、小さな画面サイズでウィジェット/ブロックの表示方法を変更できるようにする必要があります。私は@mediaのためにインラインCSSを使用することはできないことを知っています。
私は5のように説明してください。事前に感謝！
PS：それは場合に役立ちます知っているが、ここで私は最初のカスタムCSSウィジェットを書いてみましょうしないでください...
<div style= "padding-top: 25px; width: 100%; display: block; margin-bottom: 50px;">
<div style="width:78%; padding-right: 2%; display: inline-block; float: left;">
<h4 style="align: left; line-height:1.5;">Hey! I'm Zach, and I created Dropship Step by Step to show you exactly how I build and execute a dropshipping project in 2017. If you find my content useful, I have two things to ask of you: (1) Share it with anyone you know who would also find it valuable, and (2) if you choose to use a service I recommend, please <u>click</u> the link I provide. Some of the services I recommend pay me referral credits, which is how I keep my content free. If you don't click, they can't track!</h4>
</div>
<div style="width:18%; padding-left: 2%; display: inline-block; float: left; height: 100%; vertical-align: middle;">
<img src="http://www.dropshipstepbystep.com/wp-content/uploads/2017/09/IMG_4701.png" style="margin-top: -25px; border-radius: 50%;">
</div>
</div>
<div style="display: block;">
<h1 style="padding-top: 50px;"><u>
3 STEPS TO DROPSHIP SUCCESS</u>
</h1>
</div>
<div style= "padding-top: 25px; width: 100%; display: block; margin-bottom: 100px;">
<div style="width:33%; padding-right: 2%; display: inline-block; float: left;">
<img src="http://www.dropshipstepbystep.com/wp-content/uploads/2017/09/Screen-Shot-2017-08-25-at-10.23.39-PM_clipped_rev_1-8.png">
</div>
<div style="width:63%; padding-left: 2%; display: inline-block; float: left;">
<br><h2 style="font-weight: bold;">Find a Product to Sell</h2>
<p style="align: left; line-height:1.5;">I'm going to show you how I find inspiration for product ideas, and how I test my ideas quickly. The goal is to take something generic and cheap looking, then market in a way that will totally change people's perceptions. The dash cam on the left is a perfect example. I get them for $20 and sell them for $60, and they're actually really nice! I use one myself.</p>
<p style="align: left; line-height:1.5;">You can find many inexpensive products to promote for free via <a href="http://dropshipstepbystep.com/go/aliexpress">AliExpress</a>. Alternatively, <a href="http://dropshipstepbystep.com/go/salehoo">SaleHoo</a> will tell you exactly how well products are selling around the web, at what profit margin, and what supplier will dropship them for you ($69/year). Plus,
you can find American-based suppliers, so your customers don't have to wait weeks for products to arrive.</p>
</div>
</div>