Программирование, т. 8

 

 

 

 

гайс короче ща делаю адаптивную верстку по примеру бутстрапа

прописал как в бутстрапе вот эти все @media screen and (min-width: 992px), и еще 768пх, 576, и max-width: 575.98px, но когда ставлю окно под мобилку какую нибудь, то минимальная ширина которая применяется - это 768пх. В чем может быть проблема? Почему min-width: 576 и max-width: 575.98px не работают?

Скинь кусок этого кода

 

ну вот например. 576px в браузере виден, но не применяется, т. е. как будто 768 его переопределяет

 

 

@media screen and (min-width: 576px) {
  .fon1-sm {
    position: relative;
    margin: 3.5% auto;
    padding: 0 0 1.9em 0;
    width: 60%;
    text-align: center;
    background-color: #f44242;
    color: #fff;
    border-radius: 0.3em;
    font-family: 'Roboto Slab', serif;
    font-size: 2em;
  }
  .fon2-sm {
    position: relative;
    z-index: 2;
    background-color: #fff;
    margin: -3.1em auto 0 auto;
    padding: 1em 0.8em;
    width: 60%;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    border-radius: 0.3em;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.35);
  }
  .fon3-sm {
    background-color: #fff;
    width: 50%;
    margin: -1.6em auto;
    padding: 2em 0 0.5em 0;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    border-radius: 0.3em;
    box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.20);
  }
}

/* md */

@media screen and (min-width: 768px) {
  .fon1-md {
    position: relative;
    margin: 3.5% auto;
    padding: 0 0 1.9em 0;
    width: 60%;
    text-align: center;
    background-color: #f44242;
    color: #fff;
    border-radius: 0.3em;
    font-family: 'Roboto Slab', serif;
    font-size: 2em;
  }
  .fon2-md {
    position: relative;
    z-index: 2;
    background-color: #fff;
    margin: -3.1em auto 0 auto;
    padding: 1em 0.8em;
    width: 60%;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    border-radius: 0.3em;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.35);
  }
  .fon3-md {
    background-color: #fff;
    width: 50%;
    margin: -1.6em auto;
    padding: 2em 0 0.5em 0;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    border-radius: 0.3em;
    box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.20);
  }
  }
}

 

 

 

А ты класс(fon1-sm) прописываешь в блоки?

P.S. Отрицательныq margin эт конечно детект говнокодерства

 

да офк, перепроверял там, все есть

пробовал даже убирать этот fon1-md, применялся fon1-sm сразу после fon1-lg, а fon1-xs не работал

 

У тебя в md в конце 3 закрывающие скобки, 2 прям друг под другом

@media screen and (min-width: 768px) {

http://jsfiddle.net/uhrbqkpL/1/

хз, может вшаришь 

Ща в докере упал контейнер с именем sad_turing :(

Ща в докере упал контейнер с именем sad_turing :(

Это смешно или грустно?

 

@media screen and (min-width: 768px) {

 

http://jsfiddle.net/uhrbqkpL/1/

хз, может вшаришь 

 

щас в этой штуке мой код выполнился нормально, а у меня нет

что за хуйня?

юзаю xampp на линуксе

щас попробую перезагрузить все

лол, походу эта херня консоль в хроме которая "Посмотреть код" как то не правильно работает. Если вручную растягивать окно то все работает

пиздос

можно как то пофиксить?

 

 

@media screen and (min-width: 768px) {

 

http://jsfiddle.net/uhrbqkpL/1/

хз, может вшаришь 

 

щас в этой штуке мой код выполнился нормально, а у меня нет

что за хуйня?

юзаю xampp на линуксе

щас попробую перезагрузить все

лол, походу эта херня консоль в хроме которая "Посмотреть код" как то не правильно работает. Если вручную растягивать окно то все работает

пиздос

можно как то пофиксить?

 

Если ты используешь готовые расширения для мобилок, то надо каждый раз обновлять страницу, когда ставишь новое разрешение. В динамике эта хрень некорректно работает

это из-за опции screen в @media - не детектятся девайсы

ты наверно мета тег не заебашил с вьевпортом (если честно я сам не понимаю что я несу)

самое быстрое решение - ебануть опцию all

 

 

 

@media screen and (min-width: 768px) {

 

http://jsfiddle.net/uhrbqkpL/1/

хз, может вшаришь 

 

щас в этой штуке мой код выполнился нормально, а у меня нет

что за хуйня?

юзаю xampp на линуксе

щас попробую перезагрузить все

лол, походу эта херня консоль в хроме которая "Посмотреть код" как то не правильно работает. Если вручную растягивать окно то все работает

пиздос

можно как то пофиксить?

 

Если ты используешь готовые расширения для мобилок, то надо каждый раз обновлять страницу, когда ставишь новое разрешение. В динамике эта хрень некорректно работает

 

я использую разве что изменение сторон по высоте/ширине и все, консоль хрома почему то не хочет отображать все что мне нужно, а если вручную растягивать окно, то все работает

а, ну я похоже пососал у цсс

попробуй для мобилок использовать min-device-width а не min-width

это из-за опции screen в @media - не детектятся девайсы

ты наверно мета тег не заебашил с вьевпортом (если честно я сам не понимаю что я несу)

самое быстрое решение - ебануть опцию all

да точняк, нагуглил что надо добавить, теперь все робит

спасибо пацаны

В очередной раз пришлось поесть говна в консоли фаерфокса

Это худшее что есть во фронтенде, я хуже ничего не видел

но ведь все консоли в браузерах джаваскриптовые...

Need backup!

Vue.js

Нужно вывести на экран из базы стрингу без экранирования хтмл символов

<template>
    <div id="promocode-app" class="consents-footer__promocode">
        <div style="text-align: center;"><span>{{ message }}</span></div>
    </div>
</template>

<script>
    export default {
      /**
      * Component name.
      */
      name: 'FlexibleBanner',

      props: ['message'],

      created () {
        console.log(this.message);
      }

    }
</script>

<div class="consents-footer">
    <flexible-banner message="{!! setting('flexible-banner.flexible-banner') !!}"></flexible-banner>
</div>

Ну вот усредненный такой вариант, вариаций, естественно, перепробованно масса. Шо не так?

setting helper просто достает из базы значение. Если там сделать не { !! ... !! }, а {{ ... }, то выведет - privet <a href="https://pisun"style="color: red;">ssilka</a> normalno vse

@@Rooster =)

Ладно расслабте булки, уже решил. В лучший традициях - поебался -> задавал вопрос -> сделал через минуту

В очередной раз пришлось поесть говна в консоли фаерфокса

Это худшее что есть во фронтенде, я хуже ничего не видел

Я сегодня пожрал дерьма на демо поболее          Прям увидел в одном сообщении слова "поесть говна" и "фаерфокс" и сразу захотелось поделиться

Google Chrome

Firefox:

ЗА ЧТО     

Увидел в одном сообщении мозила, говно и есть
И вспомнил проект месяц-два назад был, там была какая-то хуйня с мозилой и с бефор\афтер
пришлось фиксить для этой хуйни вот так

А поводу трабла выше
не удобнее писать max-width, вместо min-width?
мб привычка, но я напишу в 10 из 10 случаев max-width

Банале во фронтендеры тебя записываю

зашкварил человека ни за что

Так бойз, пришла пора охуенный задач для верстаков

Есть вёрстка, менять её нельзя (ладно, можно, но только внутри дива container ) . Можно ебашить только css, я упростил пример до самой сути и залил на кодпен

https://codepen.io/anon/pen/qyRqEr

При наведении на элемент, должна появляться подсказка, но не внутри ебаного блока, а типа поверх него.

Собственно как должно выйти, на картинке ниже:

Ну чо ёпта, как решать будем?

С hidden overflow ты за границы элемента никак не выйдешь

Ну ясно. Чуть какая сложность сразу в кусты, другого и не ожидал.