Професионална програма
Loading...
a.angelov avatar a.angelov 1317 Точки

[Homework] Web Fundamentals (HTML + CSS) - Responsive Design - Bootstrap - септ.2014

Никой не иска да пусне тема за домашното :)

Ето моите решения:

Код - GigHub.

01. Unresponsive-Homework - DEMO; /в preview-то под Google Chrome aside ми пада долу вдясно неясно защо, под Firefox е ок, при отваряне директно от компютъра при мен е добре - ако някой може да разбере защо се получава така.../;

02. Flowers Home - DEMO;

03. Bootstrap Boot Camp - DEMO.

 

Коментари и препоръки са добре дошли.

Забележка: CSS-а ми не е от най-подредените - върху това имам да поработя.

1
Web Fundamentals - HTML5
Filkolev avatar Filkolev 4486 Точки

Колеги, може ли малко помощ с 2-ра задача. Как точно да регулирам броя снимки на ред в section-a? 

0
a.angelov avatar a.angelov 1317 Точки

Аз съм го направил с настройване на width на снимката - първо е 24%, след това 32,2% и накрая 49%.

Само не можах да разположа снимките на третия ред по една в края, а в средата да остане празно място...

1
Filkolev avatar Filkolev 4486 Точки

Разположението не ми е проблем. Иначе и аз подхождам така, смалявам картинките (само че със зуум, което по-скоро не трябва да го ползвам май). Ще пробвам с проценти. 

За разположението: justify-content: space-between. Виж дали ще стане.

0
a.angelov avatar a.angelov 1317 Точки

Не се получава..., намачква ми картинките :)

0
velio84 avatar velio84 241 Точки

2-ра задача с тоя flexbox доста ме измъчи, но накрая като почнах да му свиквам кое как се държи, започна да ми харесва доста. Големината на снимките и аз го правя с проценти, като слагам и малко margin-top.

А, за да се показват 2 в края с празно място по средата, div - а който държи галерията го правя също flexbox със следните параметри:

section div {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }

Тая вечер ще мъча 3-та, но тепърва почвам да чета за bootstrap

1
29/10/2014 23:27:52
Filkolev avatar Filkolev 4486 Точки

Преборих се. Наистина след като се свикне с флексбокса нещата стават доста добре.

Ключовите моменти:

Ползвам justify-content: space-between - това подрежда снимките както трябва на по-ниските резолюции.

За снимките задавам ширина - съответно 24%, 32% и 49% на различните стъпки.

За да се запази aspect ratio-то на снимките ползвам object-fit: contain. Иначе се разтягат и става отвратително грозно.

Това води до проблем, че височината на снимките е доста голяма (самите снимки се визуализират нормално, но все пак заемат място все едно не са оразмерени и нещата не изглеждат много добре). Затова им давам максимална височина 150px.

 

0
nikola.m.nikolov avatar nikola.m.nikolov 832 Точки

Аз с височината на снимките се справям като си задам width в % според нуждите и height: 100%.

1
Filkolev avatar Filkolev 4486 Точки

height: 100% не вършеше работа, снимките все пак заемаха място около 300px. Абе занимавка отвсякъде... Поне се радвам, че го нагодих що-годе.

0
nikola.m.nikolov avatar nikola.m.nikolov 832 Точки

Е да то зависи и от други селектори какво е правено с тях. При мен стана с height: 100%. Дори ако го изключа се разпъва много по височина.

0
Pavel_R avatar Pavel_R 57 Точки

Колега Filkolev имах същия проблем с размера на снимките като теб. И при мен предложението на nikola.m.nikolov  за height 100% не вършеше работа в първия момент. Аз бях задал ширината на снимките с flex-basis: 24% (не знам дали и ти си направил така), но когато промених на width: 24% (и добавих height 100%) всичко си дойде на мястото.

0