12:05 

Magic Berry
If you can dream it — you can do it. © Walt Disney
Без применения особых настроек css дизайн по ширине отображается от левой до правой стороны экрана, причем по бокам не имеет никакого даже мизерного отступа, буквально липнет к краю монитора - тык. Из-за этого почти не видно задний фон.
С помощью регулировки ширины wrapper эту проблему можно исправить, но на других мониторах (т.е. кого-то из моих читателей) он может отображаться криво. Например, если я поставлю 1300 (у меня монитор 1900), то у тех, у кого монитор 1280, уже будут видеть уходящий за границы экрана текст, который не прочитать (проверено на домашних мониторах).

Собственно, как сделать дизайн адаптированным, чтобы он ужимался у каждого под его формат?
Делать статичный узкий wrapper в 1200px или ниже не хочется, потому что тогда у меня при моем широком экране дизайн смотрится некрасиво.

@темы: diaryCSS, отступы, Дизайн, платный сервис, основные блоки

Комментарии
2018-12-02 в 12:20 

birdroid
Гаврила слыл малефикаром, Гаврила магом крови слыл
@media

2018-12-02 в 12:22 

Magic Berry
If you can dream it — you can do it. © Walt Disney

2018-12-02 в 12:29 

birdroid
Гаврила слыл малефикаром, Гаврила магом крови слыл
Magic Berry, загуглите @media

2018-12-02 в 12:32 

феникс периода полураспада
Нет, я не безумец, мне и так хорошо(с) Репутация – это то, что о тебе знают другие. А честь – это то, что знаешь о себе ты сам.(с)
Magic Berry, задайте враперу max-width - это максимальная ширина, на которую будет тянуться элемент имея такую возможность, а width поставить 320px для мобильных с небольшими экранами, чтобы блок с текстом был покрупнее, а фоном там можно и пожертвовать. Или width можно задать в процентах (например, 80%) тогда даже на меньших мониторах будет видно и весь текст и фон, но тогда стоит добавить min-width те же 320px, например.

2018-12-02 в 12:33 

феникс периода полураспада
Нет, я не безумец, мне и так хорошо(с) Репутация – это то, что о тебе знают другие. А честь – это то, что знаешь о себе ты сам.(с)
birdroid, не пробовала, но: а медиа в дайри-верстке работают?

2018-12-02 в 12:37 

Magic Berry
If you can dream it — you can do it. © Walt Disney
феникс периода полураспада, попробую, спасибо!

2018-12-02 в 12:39 

феникс периода полураспада
Нет, я не безумец, мне и так хорошо(с) Репутация – это то, что о тебе знают другие. А честь – это то, что знаешь о себе ты сам.(с)
Magic Berry, всегда пожалуйста. если что, пишите сюда или в личку.

2018-12-02 в 13:11 

Просто Демон
I try my best
А зачем так сложно? Можно ведь просто задать врапперу отступы от правого и левого края не задавая ширины. Допустим margin-left: 100px; margin-right: 100px. Фон будет виден, а оформление подстроится под любое разрешение.

2018-12-02 в 13:23 

Magic Berry
If you can dream it — you can do it. © Walt Disney
Просто Демон, о, и тогда у всех гостей блога, вне зависимости от их ширины экрана, будет отображаться дизайн с отступами? Это вот прям идеально было бы.

2018-12-02 в 14:22 

Просто Демон
I try my best
Ну вот в этом оформлении так и реализовано:

2018-12-02 в 16:21 

birdroid
Гаврила слыл малефикаром, Гаврила магом крови слыл
феникс периода полураспада, я помню, что я задавала так, что при ширине браузера меньше 1000px у меня сайдбар перелезал наверх

2018-12-02 в 19:14 

феникс периода полураспада
Нет, я не безумец, мне и так хорошо(с) Репутация – это то, что о тебе знают другие. А честь – это то, что знаешь о себе ты сам.(с)
birdroid, ясно, надо будет поэкспериментировать. Спасибо!

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@CSS — стилизация дневников

главная