Wie kann ich meine benutzerdefinierten HTML-Widgets für verschiedene Bildschirmgrößen unterschiedlich darstellen lassen?

Question

Bär mit mir hier-- Ich versuche HTML/CSS zu lernen.

Ich habe diese how-to-Site, dropshipstepbystep.com. Ich wollte die "3 Schritte zum Erfolg" auf meiner Homepage als Top-Line darstellen. Daher habe ich im Bereich "Our Focus" des Zerif Lite-Themas benutzerdefinierte HTML-Widgets erstellt. Ich bin mir sicher, dass die Art und Weise, wie ich das gemacht habe, ziemlich schrecklich ist, aber auf meinem Desktop habe ich ziemlich genau das Aussehen erreicht, das ich möchte.

Jetzt muss ich in der Lage sein zu ändern, wie die Widgets/Blöcke für kleinere Bildschirmgrößen erscheinen. Ich weiß, dass ich kein Inline-CSS für @media verwenden kann, also wie soll ich das machen?

Bitte erklären Sie mir wie ich 5. Vielen Dank im Voraus!

PS: Ich weiß nicht, ob es hilft, aber hier ist, wie ich das erste benutzerdefinierte CSS-Widget ...

<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>

Answer 1

Das Beste, was Sie für Ihr Problem schrieb verwenden können, ist das Grid-System in Bootstrap. Sie finden die Informationen dazu hier - https://v4-alpha.getbootstrap.com/layout/grid/ und in verschiedenen anderen Tutorials. Sie müssen im Grunde nur den erforderlichen Platz auf dem Bildschirm für die Widgets für kleine, extra kleine und mittlere Geräte zuweisen.

Abgesehen davon, wenn Sie Ihre Elemente auf dem Bildschirm platzieren möchten, können Sie flexbox dafür verwenden. Dazu stehen verschiedene Tutorials zur Verfügung.

Beide können zusammen verwendet werden. Ich bin mir sicher, dass Sie Ihr Problem mit Bootstrap lösen können.

Answer 2

Sie sollten mit dem Erlernen von CSS-Medienabfragen und deren Vorgehensweise für die Entwicklung von responsiven Webseiten beginnen. Ich empfehle Ihnen, es von W3CSchool zu lernen, unten ist der Referenzlink: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 3

Zuerst verwenden Sie bitte CSS aus der externen Datei. Derzeit verwenden Sie Inline-CSS, das in der @ media-Abfrage nur schwer zu verwenden ist. Sobald Ihr Layout fertig ist, verwenden Sie die @ media Abfrage für verschiedene Geräte.