Jump to content

Search the Community

Showing results for tags 'resposive'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 2 results

  1. 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 -->
  2. Yes, I am still using this menu for the mobile and tablet layout! http://www.w3schools.com/howto/howto_js_topnav.asp I would like to know how to do the following: I don't want a menu bar all the way across the screen on mobile and tablet layout. I want to do a slide from the side of the screen on mobile and tablet layout. Thanks.
×
×
  • Create New...