Commit 5cad581d authored by Stefan Busemann's avatar Stefan Busemann

Merge branch '607-content-element-defect-in-mobile-view' into 'master'

Resolve "Content Element defect in mobile view"

Closes #607

See merge request !569
parents 74488f94 fd6943cd
...@@ -184,7 +184,7 @@ $container-max-widths: ( ...@@ -184,7 +184,7 @@ $container-max-widths: (
// //
// $caret-width: .3em !default; // $caret-width: .3em !default;
// //
// $transition-base: all .2s ease-in-out !default; $transition-base: 2s ease-in-out !default;
// $transition-fade: opacity .15s linear !default; // $transition-fade: opacity .15s linear !default;
// $transition-collapse: height .35s ease !default; // $transition-collapse: height .35s ease !default;
......
...@@ -6,104 +6,37 @@ ...@@ -6,104 +6,37 @@
// //
// Styleguide 4.14 // Styleguide 4.14
.jumbotron-image-wrap { .jumbotron {
position: relative; position: relative;
width: auto; background: no-repeat center center;
height: 400px;
margin-bottom: 30px;
background-size: cover; background-size: cover;
background-position: 50% 25%; padding: 4rem 2rem;
overflow: hidden; transition: padding $transition-base;
.headerce { &__text * {
top: 54%; color: white;
padding-left: 15px;
padding-right: 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
} }
}
.jumbotron-content-wrap {
position: relative;
top: -110px;
.card { &__card {
font-size: 1.5rem; background-color: white;
box-shadow: 0 0 16px 1px rgba(81, 81, 81, 0.1);
padding: 2rem; padding: 2rem;
} }
.card-text { @media all and (min-width: 768px) {
.btn { padding: 8rem 4rem;
margin-bottom: 0;
}
}
}
@media (max-width: 1024px) {
.features-header-image {
height: 400px;
}
}
@media (max-width: 992px) {
.jumbotron-image-wrap {
height: 228px;
.headerce p { &__card {
font-size: 1rem;
}
.headerce-head {
font-size: 2rem;
}
}
.jumbotron-content-wrap {
top: -60px;
.card {
font-size: 1rem;
padding: 0.5rem;
}
}
}
@media (max-width: 767px) {
.jumbotron-image-wrap {
height: auto;
margin-bottom: 0;
.headerce {
position: relative; position: relative;
top: auto; top: -5rem;
-webkit-transform: translateY(0);
transform: translateY(0);
color: #333;
.headerce-head {
color: #333;
margin-bottom: 0.4rem;
}
p {
margin-bottom: 0;
color: #333;
}
} }
}
.jumbotron-content-wrap { &__cardwrapper {
position: relative;
top: auto;
.container {
margin-top: 0; margin-top: 0;
} }
}
.card { @media all and (min-width: 1024px) {
padding: 0; padding: 10rem 4rem;
}
} }
} }
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true"> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="jumbotron-image-wrap"> <div class="jumbotron" style="background-image: url('{f:uri.image(image: images.0)}');">
<f:if condition="{images.0}"> <div class="container">
<picture class="features-header-image__image"> <div class="jumbotron__text">
<source srcset="{f:uri.image(image: images.0, width:'1700c', maxWidth: '3250c', treatIdAsReference: 1)}" <f:if condition="{data.header}">
media="(min-width: 1260px)"> <h1 class="headerce-head">{data.header}</h1>
<source srcset="{f:uri.image(image: images.0, width:'1260c', maxWidth: '3250c', treatIdAsReference: 1)}" </f:if>
media="(min-width: 990px)"> <f:if condition="{data.subheader}">
<source srcset="{f:uri.image(image: images.0, width:'990c', maxWidth: '3250c', treatIdAsReference: 1)}" <p class="headerce-p">{data.subheader}</p>
media="(min-width: 780px)"> </f:if>
<source srcset="{f:uri.image(image: images.0, width:'780c', maxWidth: '3250c', treatIdAsReference: 1)}"
media="(min-width: 480px)">
<source srcset="{f:uri.image(image: images.0, width:'480c', maxWidth: '3250c', treatIdAsReference: 1)}"
media="(max-width: 479px)">
<img
src="{f:uri.image(image: images.0)}"
width="{dimensions.width}"
height="{dimensions.height}"
alt="{file.alternative}"
title="{file.title}"/>
</picture>
</f:if>
<f:if condition="{data.header} || {data.subheader}">
<div class="container">
<div class="row">
<div class="headerce">
<f:if condition="{data.header}">
<h1 class="headerce-head">{data.header}</h1>
</f:if>
<f:if condition="{data.subheader}">
<p class="headerce-p">
{data.subheader}
</p>
</f:if>
</div>
</div>
</div> </div>
</f:if> </div>
</div> </div>
<f:if condition="{data.bodytext}"> <f:if condition="{data.bodytext}">
<div class="jumbotron-content-wrap"> <div class="container jumbotron__cardwrapper">
<div class="container"> <div class="jumbotron__card">
<div class="row"> <p>{data.bodytext -> f:format.html()}</p>
<div class="col">
<div class="card">
<div class="card-body">
<div class="card-body__content">
<div class="card-text">
{data.bodytext -> f:format.html()}
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</f:if> </f:if>
</f:section> </f:section>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment