@Patryk27:
Mam grida, w którym mam dwa celle każdy zajmuje po połowie strony, teraz chciałbym by na telefonach komórkowych zajmowały cała szerokość i tak się dzieje.
Problem leży w tym że w danym gridzie na desktopie rozmiar elementu który się w nim zajmuje wynosi 50vw czyi połowę ekranu i to się na komputerach sprawdza (w każdym razie na moim) i teraz na urządzeniu mobilnym treść zajmuje połowę ekranu (bo gdy grid jest na całość to jego zawartość na 50vw to wiadomo) a powinno być na cały ekran.
Chciałbym by zdjęcie i opis obok wypełniały cały swój cell ale nie bardzo wiedziałem jak to zrobić, próbowałem coś z width: auto itd ale jakoś nie szło dlatego użyłem 50vw. Dodaje stronę i zdjęcie w załącznikach.
Kod HTML:
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--12-col-phone">
<div class="feature-card-image mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="feature-card-image__filename"></span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--12-col-phone">
<section class="description">
<h3>Lorem ipsum dolor sit amet</h3>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Vivamus at libero convallis, pellentesque turpis ac, tincidunt dui. <br>Nulla vel velit tortor. Integer posuere faucibus enim eu aliquet. <br>Donec et ante justo.</h5>
<h5>
<ul>
<li>Lorem ipsum dolor</li>
<li>consectetur adipiscing</li>
<li>Vivamus at libero</li>
</ul>
</h5>
</section>
</div>
</div>
i kod CSS:
.feature-card-image.mdl-card {
width: 50;
height: 70vh;
float: left;
background: url('../images/nophoto.jpg') center / cover;
}
.feature-card-image>.mdl-card__actions {
/*height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);*/
}
.feature-card-image__filename {
/*color: #fff;
font-size: 14px;
font-weight: 500;*/
}
.description {
width: 50vw;
height: 70vh;
float: left
}
.description>h3 {
color: #263238;
text-align: center;
}
.description>h5 {
margin-left: 15px;
margin-right: 15px;
text-align: center;
color: #647B86
}
.description>h5>ul>li {
font-size: 18px;
text-align: left;
margin: 0px;
color: #647B86
}