If you want to earn the following:@media only screen and (min-width: 1200px) .home .breadcrumbs { font-size: 100%; } There are two options:Determine max-width @media for mobiles;Give !important DOM.First option:@media only screen and (min-width: 320px) and (max-width: 1199px) .home .breadcrumbs { font-size: 200%; } @media only screen and (min-width: 1200px) .home .breadcrumbs { font-size: 100%; } Second option:@media only screen and (min-width: 320px) .home .breadcrumbs { font-size: 200%; } @media only screen and (min-width: 1200px) .home .breadcrumbs { font-size: 100% !important; } Otherwise, you have one rule on another, because, from the width of 1200px, there are two cases:font-size: 200%; font-size: 100%; In the end, the only will work is that it was definitely early:font-size: 200%; P. S. Greetings.

In practice, I often use two values in the adaptive castle when the width is 100 per cent (minimum per cent) and the maximum width is 600px. The point is, on small screens, the block is wide and 600px large so as not to be stretched because the height is fixed and on large screens without maximum width the block is distorted.

solved the problem, added overflow: hidden♪

Decided the problem: moving from min-width: 997px to max-width:997px. Be careful!

.articles-list { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; align-content: stretch; .item { margin-top: 0; margin-right: 5px; margin-bottom: 20px; margin-left: 5px; align-self: flex-start; flex: 1 0 30%; } } @media screen and(max-width: 997px) { .articles-list { .item { flex: 1 0 48%; } } } or .articles-list { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; align-content: stretch; .item { margin-top: 0; margin-right: 5px; margin-bottom: 20px; margin-left: 5px; align-self: flex-start; flex: 1 0 30%; @media screen and(max-width: 997px) { & { flex: 1 0 48%; } } } }

Would it help if I added format("truetype") after url("…ttf")?@font-face{ font-family: 'Karla'; src: url("app/fonts/karla/Karla-Regular.ttf") format("truetype"); } By the way, you can use a service like that. https://www.web-font-generator.com/ , regenerates the CSS Valid, and simultaneously converts the prints into different formats for different browsers.

background-image: url("https://daks2k3a4ib2z.cloudfront.net/5772b3c08130511f7703baf4/57c1f73c416e239c634e2049_41R0ACPVG5L.jpg"); Why would you do that? <img> That's what it takes to get into. src indicate the way:<img src="https://daks2k3a4ib2z.cloudfront.net/5772b3c08130511f7703baf4/57c1f73c416e239c634e2049_41R0ACPVG5L.jpg"> That's how it'll be right. width:100%; height:auto;.white-link { font-weight: 700; color: $white; .image { display: block; width: 100%; height: auto; } } <a class="white-link"> <img src="" alt="" class="image" > </a>

To remove the signature text-decoration You need to put it on, not a paragraph. а♪ Changing the flower will also be better at the reference, but it will work as well:a, a:hover { text-decoration: none; } p.link { color: #aaa; width: 100px; &:hover { color: #c00; } } Oh! In this case, I would advise you to get rid of the element. р - he's out there on all sides. I believe you added it because of its properties as a block element.margin♪ padding etc.), but this is easily placed on the reference itself. The code is cleaner, and the right thing is:a(href='#').small-grey-text.link US Politics a.link { text-decoration: none; color: #aaa; display: block; margin: 1em; &:hover { color: #c00; } } http://codepen.io/anon/pen/XjxBGv

It's right not to sign it at all, and not to fuck absolute.section { text-align: center; counter-reset: i; } a { display: inline-block; vertical-align: middle; width: 115px; height: 115px; border-radius: 50%; border: 1px solid; } a:before { counter-increment: i; content: counter(i); display: block; font-size: 3em; }<section> <a>Выбрать квартиру</a> <a>Выбрать способ оплаты</a> <a>Заключить договор и оплатить</a> <a>Мы готовим все документы</a> <a>Вы владелец квартиры</a> </section>

I did it somehow.$SizeSM: "(min-width: 768px)"; @media #{$SizeSM} {}

It's a convenient glass to develop applications. Same as PHP + AngularJS. Nobody makes you use it. Node can be replaced by Java and SCSS on Stylus, for example.React is not a class, but a library that allows View to write your application, not limiting it to models and logic.Redux is that https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82 The repository of your application. Which works very well with React. And React and Redux can be used not only on the client but also on the server (see isomorphic applications). React - for the rendering on the server, Redux - all for the same storage. Of course, there must be some JS interpreter on the server, usually NodeJS, but there are deviations.Webpack, among other things, can work as your local sweet development server, and also with a live update of the code in the browser. So, yeah, no cell phones, it's complicated. And how does he even know what file we have changed?How do you usually know the file was overprotected? Maybe watch the date of change.SCSS is a language compiling (transmitting) in CSS.

You probably didn't put a compass in your project.But let's be clear. There's no way that teams are going.1. From rubyinstaller.org, we download and ruby to the system.2. Set up sass, for that, in the console, perform gem install sass.3. Setting compass, for that, in the console, to carry out the gem install compass team.4. Set up sass and compass in the project, so the consoles can enter the project file or open the terminal in your PHPStorm project and perform the compass init team.5. The stylesheets/config.rb file describes all conditions under which sass and compass operate.Let's look at him:css_dir - output of director where compressed cssass_dir is the directory where you'll put your files.sass.images_dir - directory for picturesjavascripts_dir - Director for js6. Next, if you need to, we'll have a compass watch team in the console. This team launches automatic surveillance of the sass folder and when any file changes in this folder, it automatically compils everything in the css folder.

Because when the cadet leaves, it works immediately. display: none - The block goes right away and you can't see what's going on with it.Not recommended display:none for the inclusion/clusion of the unit, e.g. opacity:0 or visibility:hidden: First, it will be possible to better manage the animation, secondly, the browser will not have to rewrite the page, which will reduce the load because the properties display:none not just hides the element, but removes the DOM and redesigns the content of the whole page.More information on the reference: https://webref.ru/css/display

Try it if you have the sss commingled through the pre-processor, but I want to warn you that Tag A is inline and has an element with it. display: block dangerous.a { .bigger { transition: transform 0.1s; } &:hover { .bigger { transform: scale(1.1); display: block; } } } UPD♪ How can we try to use it? position: absolute; and opacity:a { text-decoration: none; } a .bigger { opacity: 0; transition: transform 0.1s; } a:hover .bigger { position: absolute; opacity: 1; transform: scale(1.1); }<a href="#"> This is <span class="bigger">WOW!</span> </a>

I'm supposed to be a great tool. http://warpspire.com/kss/ , an example of the comments you yourself gave and which works with SCSS.In fact, an example of comments with the code:// A button suitable for giving stars to someone. // // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you’ve already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ … &.star-given{ … } &.disabled{ … } } And an example of a generosity do http://primercss.io/buttons/ P.S. All the examples from the off site.

Because your print on the website needs to be connected like this:@font-face { font-family: 'Leto_sans'; src: url('fonts/leto_sans.eot'); src: url('fonts/leto_sans.eot?#iefix') format('embedded-opentype'), url('fonts/leto_sans.woff2') format('woff2'), url('fonts/leto_sans.woff') format('woff'), url('fonts/leto_sans.ttf') format('truetype'), url('fonts/leto_sans.svg#Leto_sans') format('svg'); font-weight: normal; font-style: normal; } Well, well, check the way to the print, there's a lot of mistakes, too:

So you don't have to put a picture next to the writing and run her position through the style. Derogation can be obtained through padding, vertical position through relative positioning and displacement. For example:.login { display: block; color: blue; font-weight: bold; padding: 11px 24px; background: lightblue; line-height: 19px; transition: 0.2s background; } .login:hover { background: yellow; } .login-img { display: inline-block; padding-left: 12px; position: relative; bottom: -3px; }<a href="#" class="login f_left"><span class="login-text">Sign in</span><img src="http://www.icomos.org/modules/mod_dmt_social/icons/linkedin_16.png" class="login-img"></a>

The circle shall have a specified height and width in order to properly count. Otherwise, the block can stretch, and then it won't be proportional. padding: n Expand the circle inside. Experimentate.Only with these teams, the straight circle is:i { /* Важные в закруглении */ border-radius: 50%; height: 10px; width: 10px; padding: 20px; /* Побочные команды */ font-size: 13px; position: absolute; display: block; margin: 0; color: white; background: blue; }<i class="count_orders">1</i>Come on!padding must be one on all sides, otherwise the circle will not be uniform. Either you have to change. width♪ height I don't know what's wrong.The answer is approximately that (from important characteristics):i { @include border-radius(50%); width: 10px; height: 10px; padding: 10px; }

Here's SCSS. a { color: #333333; padding: 8px 13px; display: block; text-align:center; text-decoration: none; &:after { content: ''; display: block; height: 1px; background: green; } } Example http://codepen.io/bustexz/pen/BKdjOL

The inheritance doesn't work that way. You don't just have to create a class. .articAnd to say he's lying .jumbotronI mean, you have to write: .jumbotron .articNot: .arcticExample: http://codepen.io/bustexz/pen/aNWazR