ours avec moi ici-- J'essaie d'apprendre le HTML/CSS.Comment afficher différemment les widgets HTML personnalisés pour différentes tailles d'écran?
J'ai ce site pratique, dropshipstepbystep.com. Je voulais placer les 3 étapes vers le succès sur ma page d'accueil. J'ai donc créé des widgets HTML personnalisés dans la section «Notre objectif» du thème Zerif Lite. Je suis sûr que la façon dont je l'ai fait est assez terrible, mais sur mon bureau, j'ai presque obtenu le look que je veux.
Maintenant, je dois pouvoir changer la façon dont les widgets/blocs apparaissent pour les tailles d'écran plus petites. Je sais que je ne peux pas utiliser inline-CSS pour @media, alors comment dois-je m'y prendre?
S'il vous plaît expliquer comme je suis 5. Merci d'avance!
PS: Je ne sais pas si ça aide, mais voici comment je l'ai écrit le premier widget CSS personnalisé ...
<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>