zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text verschiebt sich übereinander im Responsive

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.03.2015, 13:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2015
Beiträge: 2
NikT befindet sich auf einem aufstrebenden Ast
Standard Text verschiebt sich übereinander im Responsive

Hallo Zusammen,

ich bin ehrlich: mit Media Queries und Responsive Design bin ich noch ziemlich auf Kriegsfuß.

Aber ich hoffe Ihr könnt mir mit meinem Problem helfen.

Es geht um folgende Seite: www.g-rc.de

Bei einigen Seiten auf mobilen Endgeräten verschiebt es mir die Textzeilen übereinander. Sehr stark sichtbar ist das im Impressum. Woher kommt das?

Hab die CSS schon durchsucht und einige Sachen probiert. Hat aber nichts gebracht. In dem Template sind Media Queries eingebunden, aber ich hab das Gefühl die funktionieren nicht richtig.

Code:
@media (min-width: 768px) and (max-width: 979px) {
        .hidden-desktop {
                display: inherit !important;
        }
        .visible-desktop {
                display: none !important;
        }
        .visible-tablet {
                display: inherit !important;
        }
        .hidden-tablet {
                display: none !important;
        }
}
@media (max-width: 767px) {
        .hidden-desktop {
                display: inherit !important;
        }
        .visible-desktop {
                display: none !important;
        }
        .visible-phone {
                display: inherit !important;
        }
        .hidden-phone {
                display: none !important;
        }
}
.visible-print {
        display: none !important;
}
@media print {
        .visible-print {
                display: inherit !important;
        }
        .hidden-print {
                display: none !important;
        }
}
@media (max-width: 767px) {
        body {
                padding-left: 20px;
                padding-right: 20px;
        }
        .navbar-fixed-top,
        .navbar-fixed-bottom,
        .navbar-static-top {
                margin-left: -20px;
                margin-right: -20px;
        }
        .container-fluid {
                padding: 0;
        }
        .dl-horizontal dt {
                float: none;
                clear: none;
                width: auto;
                text-align: left;
        }
        .dl-horizontal dd {
                margin-left: 0;
        }
        .container {
                width: auto;
        }
        .row-fluid {
                width: 100%;
        }
        .row,
        .thumbnails {
                margin-left: 0;
        }
        .thumbnails > li {
                float: none;
                margin-left: 0;
        }
        [class*="span"],
        .uneditable-input[class*="span"],
        .row-fluid [class*="span"] {
                float: none;
                display: block;
                width: 100%;
                margin-left: 0;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
        }
        .span12,
        .row-fluid .span12 {
                width: 100%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
        }
        .row-fluid [class*="offset"]:first-child {
                margin-left: 0;
        }
        .input-large,
        .input-xlarge,
        .input-xxlarge,
        input[class*="span"],
        select[class*="span"],
        textarea[class*="span"],
        .uneditable-input {
                display: block;
                width: 100%;
                min-height: 28px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
        }
        .input-prepend input,
        .input-append input,
        .input-prepend input[class*="span"],
        .input-append input[class*="span"] {
                display: inline-block;
                width: auto;
        }
        .controls-row [class*="span"] + [class*="span"] {
                margin-left: 0;
        }
}
@media (max-width: 480px) {
        .nav-collapse {
                -webkit-transform: translate3d(0,0,0);
        }
        .page-header h1 small {
                display: block;
                line-height: 30px;
        }
        input[type="checkbox"],
        input[type="radio"] {
                border: 1px solid #ccc;
        }
        .form-horizontal .control-label {
                float: none;
                width: auto;
                padding-top: 0;
                text-align: left;
        }
        .form-horizontal .controls {
                margin-left: 0;
        }
        .form-horizontal .control-list {
                padding-top: 0;
        }
        .form-horizontal .form-actions {
                padding-left: 10px;
                padding-right: 10px;
        }
        .media .pull-left,
        .media .pull-right {
                float: none;
                display: block;
                margin-bottom: 10px;
        }
        .media-object {
                margin-right: 0;
                margin-left: 0;
        }
        .modal-header .close {
                padding: 10px;
                margin: -10px;
        }
        .carousel-caption {
                position: static;
        }
}
Ich hoffe Ihr könnt mir helfen.

Grüße Nik
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.03.2015, 13:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du definierst eine fixe (pixelbasierte) line-height und wunderst dich dann, wenn sich der Text überlappt?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.03.2015, 14:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2015
Beiträge: 2
NikT befindet sich auf einem aufstrebenden Ast
Standard

Habe die Line-heigth jetzt mal rausgenommen, jedoch ohne erfolg.

Das ist ein Vorgefertigtes Template das ich angepasst habe. Also der Code kommt nicht von mir
Mit Zitat antworten
  #4 (permalink)  
Alt 18.03.2015, 14:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wie wäre es statt mit rausnehmen die line-height anzupassen?
Mit Zitat antworten
  #5 (permalink)  
Alt 19.03.2015, 12:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von NikT Beitrag anzeigen
Sehr stark sichtbar ist das im Impressum.
Ja sieht gut aus.
impr.PNG

Und auch deine Navigation bei mir auf dem Laptop endet ab hier siehe Bild
b55.PNG

ich muste erst mal Impressum Finden, toll.

Nur durch STRG-Taste + Minus- Taste erreichbar.

________________
MfG Roland
Mit Zitat antworten
  #6 (permalink)  
Alt 19.03.2015, 16:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von NikT Beitrag anzeigen
Habe die Line-heigth jetzt mal rausgenommen, jedoch ohne erfolg.
Dan hast du es nicht richtig enternt oder nur teilweise.

Oder wie cloned es dir schon sagte.

so: line-height: 1.5; ohne px, em

Code:
}
.page-header h2 {
    background: none repeat scroll 0 0 #ff2e2e;
    line-height: 0.8em;
    margin: 10px 0 25px;
    padding: 0 0 0 20px;
    text-shadow: 0 0 3px #000;
}
h3 {
    font-size: 2em;
    line-height: 0.8em;
    margin: 20px 0;
    padding-left: 38px;
    position: relative;
    text-align: left;
    text-shadow: 0 0 4px #000;
}
div.cck_contents.cck_content div.cck_value.cck_value_wysiwyg_editor p {
    line-height: 25px;
}
div.cck_contents.cck_content div.cck_label, div.cck_contents.cck_content div.cck_label label, div.cck_contents.cck_content div.cck_value {
    line-height: 30px;
}
_____________
MfG Roland
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:30 Uhr.