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.
<!-- So Funktioniert's
============================================= --><divclass="page-section nomargin"><divclass="container clearfix divcenter center"style="max-width:1150px;"><h4class="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><divclass="row align-items-stretch divcenter center "style="background:#F9F8F7;max-width:1150px;height:400px"><divclass="col_half center"style="background:#EAF2F6url(images/telba/wlan_crop.png) center center no-repeat;background-size: contain;height:400px"><h2class="font-body ">So funktioniert's:</h2></div><divclass="col_half col_last divcenter"style="background:#F9F8F7;height:400px;padding:5%"><spanclass="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
============================================= --><divclass="page-section nomargin"><divclass="heading-block title-center"><h2>Highlights</h2><span>das gibt es bei uns</span></div><divclass="row align-items-stretch divcenter center"style="max-width:1150px"><divclass="col-lg-4 d-none d-md-block"style="background:#DFEEF2url('images/telba/lampe_crop.png') center center no-repeat;background-size: contain;height:600px;"></div><divclass="col-lg-8"><divclass="row align-items-stretch clearfix noborder"style="background:#F9F8F7"><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">One Number</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Faire Preisgestaltung</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Moderne Kommunikation</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Skalierbarkeit</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Immer auf dem neusten Stand</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Schnelle, einfache Einführung</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Motivierte Mitarbeiter</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Betriebliche Flexibilität</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Standort- unabhängigkeit</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">innovative Arbeitsplatzmodelle</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Schnelles Reagieren auf Veränderungen</h3></div></div><divclass="col-lg-4 col-md-6 noborder"style="min-height:150px"><divclass="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"><h3class="center-center center divcenter col-padding-height-top-lg">Bereitstellen der Leistung über das Internet</h3></div></div></div></div></div></div><!--Highlights ENDE -->
Responsive Design Help
in HTML/XHTML
Posted · Edited by HigeMynx
Added HTML Code
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