Hey folks,
I have created a picture that shows my problems with Responsive Design.
When I make the window smaller or switch to a smartphone, the Responsive Design should make it look good, no matter what resolution the display has.
I'm not a pro in HTML5 or CSS3, especially not when it comes to Responsive Design, so I still don't understand some things correctly.
#01: For example, I don't understand why the box with the lamp or the complete headline with subtext and symbolic line under it disappears completely as soon as the website switches to mobile. (Highlights – das gibt es bei uns)
#02: Or why the distances to the individual boxes in the mobile design are so gigantic.
#03: In mobile design, the W-Lan Icon Box and the text are below each other, but the distance is too big, and the text is no longer centered horizontally.
I've been busy with this for a few days now and don't know what to do anymore.
I've used a commercial Template to do this: Canvas | The Multi-Purpose HTML5 Template https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123?s_rank=1
This is the HTML Code of this section
<!-- So Funktioniert's
============================================= -->
<div class="page-section nomargin">
<div class="container clearfix divcenter center" style="max-width: 1150px;">
<h4 class="divcenter font-body">
Die moderne Kommunikation ist simpel.<br />
Da das Internet schon ohnehin zu unserem täglichen Leben gehört, lässt sich
die Nutzung der telba Cloud sehr einfach gestalten.
</h4>
</div>
<div class="row align-items-stretch divcenter center " style="background: #F9F8F7; max-width: 1150px; height: 400px">
<div class="col_half center" style="background: #EAF2F6 url(images/telba/wlan_crop.png) center center no-repeat; background-size: contain; height: 400px">
<h2 class="font-body ">So funktioniert's:</h2>
</div>
<div class="col_half col_last divcenter" style="background: #F9F8F7; height: 400px; padding: 5%">
<span class="font-body">
Ihre Cloud Lösung wird individuell nach Ihren
Wünschen angepasst. Die Telefonanlage wird nicht
vor Ort in Ihrem Unternehmen installiert, sondern
wird Ihnen virtuell bereitgestellt. Unsere Kommunikationslösung wird in unserem Rechenzentrum
betrieben, wodurch wir Ihnen unsere Leistungen,
dank Cloud Computing, direkt über das Internet
zur Verfügung stellen können. Über unser Internet
Portal behalten Sie alles im Blick und können Ihre
Aktivitäten leicht managen.
</span>
</div>
</div>
</div><!--So Funktioniert's ENDE -->
<!-- Highlights
============================================= -->
<div class="page-section nomargin">
<div class="heading-block title-center">
<h2>Highlights</h2>
<span>das gibt es bei uns</span>
</div>
<div class="row align-items-stretch divcenter center" style="max-width: 1150px">
<div class="col-lg-4 d-none d-md-block" style="background:#DFEEF2 url('images/telba/lampe_crop.png') center center no-repeat; background-size: contain; height: 600px;"></div>
<div class="col-lg-8">
<div class="row align-items-stretch clearfix noborder" style="background: #F9F8F7">
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">One Number</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Faire Preisgestaltung</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Moderne Kommunikation</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Skalierbarkeit</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Immer auf dem neusten Stand</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Schnelle, einfache Einführung</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Motivierte Mitarbeiter</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Betriebliche Flexibilität</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Standort- unabhängigkeit</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">innovative Arbeitsplatzmodelle</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Schnelles Reagieren auf Veränderungen</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 noborder" style="min-height: 150px">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder">
<h3 class="center-center center divcenter col-padding-height-top-lg">Bereitstellen der Leistung über das Internet</h3>
</div>
</div>
</div>
</div>
</div>
</div><!--Highlights ENDE -->
