Sliderbilder beim Theme Tara werden beschnitten
Eingetragen von scaexp (123)am 24.01.2020 - 12:46 Uhr in
Hallo,
das Theme Tara für Drupal 8 habe ich probehalber installiert. Der Slider funktioniert soweit einwandfrei. Nur wenn ich mein smartphone quer halte, werden die Bilder von unten beschnitten. Hat jemand eine Lösung parat. Vielen Dank im voraus.
Subdomain: drupl8.skho.de
- Anmelden oder Registrieren um Kommentare zu schreiben
sehe ich nicht. dein texte
am 27.01.2020 - 07:44 Uhr
sehe ich nicht. dein texte sind falsch positioniert... muss du per css anpassen
C.A.W. Webdesign
Vielen Dank für die
am 27.01.2020 - 16:42 Uhr
Vielen Dank für die Rückantwort. Ich werde mir die css mal anschauen.
Zur Info: Im Entwicklertool am Laptop stimmt es , das sich der Text verschiebt. Wenn ich mein Android Samsung S8 plus quer halte (landscape Modus) dann verschiebt sich der Text nicht, sondern das Bild wird von unten stark beschnitten.
Beste Grüße
Dann musst Du die CSS media
am 28.01.2020 - 01:21 Uhr
Dann musst Du die CSS media queries checken und zwar, die für kleine Bildschirme.
Drupal === lesen!
==============
WP? Auch cool!
https://intempore.com.co
Danke für die Info,wo soll
am 28.01.2020 - 10:47 Uhr
Danke für die Info,
wo soll ich da genau ansetzen. Das ist die responsive.css
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
body {
-webkit-text-size-adjust: none; /* none for no scaling */
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
body {
-webkit-text-size-adjust: none; /* none for no scaling */
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
/* layout */
.container {
width: 100%;
max-width: 414px !important;
padding: 0 6px;
}
/* Header */
.header {
padding: 8px 0;
}
.site-branding img {
max-height: 40px;
width: auto;
}
/* Slider */
#slider {
max-height: 240px;
}
.home-slider p {
font-size: 0.9em;
margin: 8px 0;
width: 100%;
}
.home-slider h1 {
font-size: 1.3em;
}
.home-slider h2 {
font-size: 1.2em;
}
.home-slider h3 {
font-size: 1em;
}
.home-slider h4 {
font-size: 1em;
}
.home-slider a.button {
padding: 4px 10px;
}
/* sidebar */
.sidebar, #sidebar-left, #sidebar-right, .two-sidebar #sidebar-left {
float: none;
width: 100%;
margin: 0;
padding: 0;
}
}
@media only screen and (min-width: 415px) and (max-width: 767px) {
/* sidebar */
.sidebar, #sidebar-left, #sidebar-right, .two-sidebar #sidebar-left {
float: left;
width: 50%;
margin: 0;
height: 100%;
}
#sidebar-left {
float: left;
padding: 0 1% 0 0;
}
#sidebar-right {
float: right;
padding: 0 0 0 1%;
}
}
@media only screen and (max-width: 500px) {
.full, .one_half, .one_three, .one_four, .one_four_first, .one_four_last,
.one-half, .one-three, .one-four, .one_four_first, .one_four_last,
.two_three, .two-three {
width: 100%;
padding: 2% 0;
}
.footer-block {
margin-bottom: 16px;
}
#footer-bottom .text_right {
text-align: left;
}
}
@media only screen and (min-width: 501px) and (max-width: 767px) {
.one_four, .one_four_first, .one_four_last {
width: 50%;
padding: 2%;
}
.full, .two_three, .two-three, .one_half, .one_three {
width: 100%;
padding: 2%;
}
/* slider */
.home-slider h1, .home-slider h2, .home-slider h3 {
font-size: 2em;
}
.home-slider p {
font-size: 1.4em;
display: block;
margin-bottom: 10px;
}
}
@media screen and (max-width: 767px) {
body {
font-size: 0.9em;
}
/* header */
#header-top {
padding: 2px 0;
}
#header-top .one_half {
text-align: center;
margin: 0 0 6px 0;
padding: 0;
}
.header-top-left i, ul.social-icons li {
font-size: 0.8em;
}
.header-top-left i, ul.social-icons li a {
width: 30px;
height: 30px;
line-height: 26px;
}
.search-icon, .sliding-panel-icon, .mobile-menu {
padding: 10px;
line-height: 1;
}
.search-icon i, .sliding-panel-icon i, .mobile-menu i {
font-size: 1.2em;
line-height: 1;
}
.search-box-content {
top: 30%;
width: 90%;
}
.main-menu {
display: none;
}
.active-menu .main-menu {
display: block;
}
.mobile-menu {
display: block;
float: right;
}
.menu-wrap {
position: fixed;
top: 0;
left: 0;
bottom: 0;
background: transparent;
margin-left: -1000px;
z-index: 100;
transition: all 0.4s ease;
}
.active-menu .menu-wrap {
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 90%;
max-width: 320px;
background: rgba(0, 0, 0, 0.9);
z-index: 100;
margin-left: 0;
transition: all 0.4s ease;
}
.active-menu .menu-wrap ul.main-menu,
ul.main-menu {
overflow-y: scroll;
}
.active-menu .menu-wrap ul.main-menu > li {
display: block;
float: none;
}
ul.main-menu {
height: 100vh;
overflow-y: scroll;
}
.active-menu .menu-wrap ul.main-menu a {
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
.active-menu .menu-wrap .dropdown-arrow {
position: absolute;
right: 10px;
}
.active-menu ul.main-menu ul.submenu {
position: relative;
display: block;
opacity: 1;
top: 0;
}
.active-menu ul.main-menu ul.submenu::before, .active-menu ul.main-menu ul.submenu::after {
content: '';
display: table;
clear: both;
}
.active-menu ul.main-menu ul.submenu li {
position: relative;
background: none;
width: 100%;
text-align: right;
padding: 0 10px;
}
.active-menu ul.main-menu ul.submenu li a {
width: 100%;
display: block;
}
.active-menu ul.main-menu li a {
border-bottom: 1px solid #434343;
}
.active-menu .close-mobile-menu {
position: absolute;
display: block;
right: 1px;
top: 10px;
}
/* third level drop down */
.active-menu ul.main-menu ul.submenu ul.submenu {
position: relative;
display: block;
opacity: 1;
left: 0;
}
.active-menu ul.main-menu ul.submenu ul.submenu li {
position: relative;
background: none;
width: 100%;
text-align: right;
padding: 0 10px;
}
.active-menu ul.main-menu ul.submenu li.expanded::after {
position: absolute;
}
.sliding-sidebar-container {
width: 90%;
}
/* breadcrumb */
#breadcrumb {
padding: 6px 0;
}
.breadcrumb {
font-size: 0.8em;
}
.breadcrumb-item-seperator {
margin: 0 6px;
}
/* page layout */
.no-sidebar #main, .two-sidebar #main, .sidebar-left #main, .sidebar-right #main {
width: 100%;
float: none;
margin: 0;
padding: 0;
}
#main::before, #main::after {
content: '';
display: table;
clear: both;
}
/* page content */
.page-title-wrap {
padding: 16px 10px;
overflow-x: hidden;
}
.page-title-wrap h1.page-title {
font-size: 1.5em;
padding-left: 10px;
}
#node-comment .indented {
margin-left: 20px;
}
li.node-readmore a {
padding: 4px 6px;
}
.align-left,
img.align-left,
figure.align-left,
.align-right,
img.align-right,
figure.align-right,
.align-center,
img.align-center,
figure.align-center {
clear: both;
margin: 0 auto;
float: none;
}
/* footer */
#footer {
position: relative;
z-index: 2;
}
/* form */
.page-content input[type="text"], .page-content input[type="email"], .page-content input[type="password"], .page-content input[type="search"] {
width: 100%;
max-width: 100%;
}
input {
max-width: 100%;
}
/* homepage */
#homepage-content-wrapper {
padding: padding: 20px 0;
}
.service, .project {
width: 100%;
max-width: 385px;
padding: 4% 2%;
margin: 0 auto 20px auto;
float: none;
}
/* Elements */
.banner .banner-message {
padding: 0 10px;
}
.call-to-action {
padding: 10px;
}
.call-to-action .one-half, .call-to-action .one-three, .call-to-action .two-three, .call-to-action .one-four {
display: block;
text-align: center;
}
.owl-item.center .item {
margin: 0 auto;
}
.popup-content {
width: 100%;
}
}
ul.tabs li a {
padding: 6px 8px;
}
/* ipad pro, Small Devices, Tablets
------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5, h6 {
font-size: 1.1em;
}
.container {
width: 100%;
max-width: 991px;
}
.one_half.header-top-left {
width: 60%;
}
.one_half.header-top-right {
width: 40%;
}
.site-branding img {
max-height: 30px;
}
.sliding-panel-icon {
padding: 15px 0 15px 5px;
}
.search-icon {
padding: 15px 5px;
}
ul.main-menu > li > a {
padding: 16px 8px;
}
#slider {
max-height: 465px;
}
.home-slider p {
margin: 10px 0;
width: 80%;
}
.icon-box2 {
padding: 20px 10px;
}
.icon-box2 .icon {
padding-right: 10px;
}
}
/* Medium Devices, Laptop, Desktop
------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1170px) {
.container {
width: 100%;
max-width: 1170px;
}
}
/* Screen widger than container
------------------------------------------------- */
@media screen and (min-width: 1170px) {
.container {
width: 100%;
max-width: 1170px;
}
}