Как исправить конфликт media query и bootstrap4?

Question

[sunnyrio]

Как исправить конфликт media query и bootstrap4?

Подключаю свой media query и он не работает, может ли это быть из-за конфликта с уже подключенным bootstrap? И как исправить?

<!-- / Media query | CSS \ -->
		@media (max-width: 361px) {
			.block1-text {
				background: red;
				color: black;
			}
		 }
<!-- \ Media query | CSS / -->

Answer 1

[Вазген Алексанян]

Знакомая проблема не как не могу вспомнить как ее решил. А попробуй что-то такое-
background: red !important;
color: black !important;
но не уверен

Comments

[sunnyrio]

не помогает

[Вазген Алексанян]

Попробуй с инструмент разработчиком понять что происходит с этой .block1-text.

[sunnyrio]

VazgXa, не срабатывает media query, при этом bootstrap query работает

[Вазген Алексанян]

а какие еще классы имеется у этого блока .block1-text. особенно бутстраповские

[sunnyrio]

<!-- / Media query | CSS \ -->
		@media screen and (max-width: 480px) {
			.block1-text {
				font-size: 30px !important;
				color: black !important;
			}
		}
<!-- \ Media query | CSS / -->
		@media (min-width: 768px) {
		  .navbar-container {
			position: sticky;
			top: 0;
			overflow-y: auto;
			height: 100vh;
		  }
		  .navbar-container .navbar {
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: nowrap;
			flex-direction: column;
			height: 100%;
		  }
		  .navbar-container .navbar-collapse {
			align-items: flex-start;
		  }
		  .navbar-container .nav {
			flex-direction: column;
			flex-wrap: nowrap;
		  }
		  .navbar-container .navbar-nav {
			flex-direction: column !important;
		  }
		}
		
		.navbar {
			padding: 0rem 0rem;
			border-bottom: 1px solid #0E5E70;
		}
		.navbar img {
			padding-left: 14px;
			padding-right: 14px;
		}
		.navbar-brand {
			padding-top: 0rem;
			padding-bottom: 0rem;
			margin-right: 0rem;
			height: 80px;
		}
		.navbar-brand p{
			margin: 0;
			line-height: 120%;
		}
		.navbar-brand p:first-child{
			font-family: 'League Spartan Bold';
			font-size: 9px;
			letter-spacing: 5px;
			text-transform: uppercase;
			font-weight: bold;
			color: #5DA8EF;
			margin-top: 20px;
		}
		.navbar-brand p:last-child{
			font-family: 'Playfair Display Bold';
			font-size: 22px;
			color: #000000;
		}
		.navbar-toggler {
			border-color: none;
		}
		.navbar-toggler {
			padding: 25px 25px;
			font-size: 1.25rem;
			line-height: 1;
			background-color: #00578C;
			border: 0px solid transparent;
			border-radius: 0rem;
		}
		.bg-dark {
			background-color: #ffffff!important;
		}

		.header-img{ 
			background-image: url(header_1018x575.png);
			-moz-background-size: cover;
			-o-background-size: cover;
			-webkit-background-size: cover;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			width: 100%;
			height: 277px;
		}
		.block1-text {
			font-family: 'League Spartan Bold';
			font-size: 14px;
			letter-spacing: 1px;
			line-height: 171%;
			color: #FFFFFF;
			padding-top: 21px;
			padding-left: 30px;
			padding-right: 30px;

			background-color: #0E5E70;
			height: 117px;			
		}
		.block2-text {
			font-family: 'Playfair Display Regular';
			font-size: 23px;
			letter-spacing: 0px;
			line-height: 146%;
			text-align:  center;
			color: #FFFFFF;
			padding-top: 20px;
			padding-left: 20px;
			padding-right: 20px;
			
			height: 250px;
			background: linear-gradient(to bottom, #0E5E70, #FFFFFF);
		}
		.block2-text p{
			font-family: 'League Spartan Bold';
			font-size: 9px;
			letter-spacing: 6px;
			line-height: 120%;
			text-transform: uppercase;
			font-weight: bold;
			color: #333333;
			margin-top: 50px;
			margin-bottom: 40px;	
		}
		.img-1, .img-2, .img-3, .img-4, .img-5 {
			-moz-background-size: cover;
			-o-background-size: cover;
			-webkit-background-size: cover;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			
			width: 86%;
			height: 200px;
		}
		.img-1 {
			background-image: url(image_1_613x370.png);

			height: calc(100vw/2);
		}
		.img-2 {
			background-image: url(image_2_705_551.png);
			
			height: calc(100vw/2);
		}
		.img-3 {
			background-image: url(image_3_762x439.png);

			height: calc(100vw/1.6);
			width: 100%;			
		}
		.img-4 {
			background-image: url(image_4_489x439.png);
			
			height: calc(100vw/1.6);
			width: 100%;			
		}
		.img-5 {
			background-image: url(image_5_720x475.png);

			height: calc(100vw/1.6);
			width: 100%;			
		}
		.img-small-1 {
			background: url(image_art1_151x112.png) left top no-repeat;
			margin-left: 10px;
		}
		.img-small-2 {
			background: url(image_art2_151x112.png) left top no-repeat;
			margin-left: 10px;
		}
		.img-text-1 {
			font-family: 'Poppins Light';
			font-size: 14px;
			letter-spacing: 0px;
			line-height: 171%;
			font-weight: normal;
			color: #8F8F8F;
			margin-top: 13px;
			margin-bottom: 13px;
			padding-left: 0px;
			padding-right: 0px;

			width: 86%;			
		}
		.text-1 {
			position: relative;
			top: -130px;
			font-family: 'Playfair Display Bold';
		}
		.text-1 p {
			line-height: 130%;
			letter-spacing: 1px;
			font-size: 20<!-- 32px -->px;
			color: #E5A090;			
		}
		.text-1 p:first-child {
			text-transform: uppercase;
			font-size: 9px;
			line-height: 120%;
			letter-spacing: 6px;
			color: #7F626D;
			padding-bottom: 50px;
		}
<!-- / Media query | CSS \ -->
		@media screen and (max-width: 480px) {
			.block1-text {
				font-size: 30px !important;
				color: black !important;
			}
		}
<!-- \ Media query | CSS / -->

[sunnyrio]

sunnyrio, это весь стайл

[Вазген Алексанян]

а где это написано
media (max-width: 361px) {
.block1-text {
background: red;
color: black;
}
}

[sunnyrio]

VazgXa, в самом низу я там немного изменил

[sunnyrio]

<!-- / Media query | CSS \ -->
    @media screen and (max-width: 480px) {
      .block1-text {
        font-size: 30px !important;
        color: black !important;
      }
    }
<!-- \ Media query | CSS / -->

[Вазген Алексанян]

можешь мне копи пастить html этого блока .block1-text

[sunnyrio]

<div class="container-fluid block1-text">
			One of the greatest things about the sport of surfing is that you need only three things: your body, a surfboard, and a wave.
		</div>

[Вазген Алексанян]

Даже не знаю. это вряд ли что то изменит, но ты сделай по семантике правильно и заворачивай текст в теге p

[sunnyrio]

VazgXa, бэкграунд то должен меняться

[sunnyrio]

sunnyrio, смотри тут https://jsfiddle.net/hmyk249v/2/

[Вазген Алексанян]

media only screen and (max-width: 480px)
так должно быть а не так
media screen and (max-width: 480px)

[sunnyrio]

VazgXa, не помогает

[Вазген Алексанян]

[Вазген Алексанян]

комментарии убирай или став правильно

[sunnyrio]

VazgXa, у меня не работает по этой ссылке с only даже

[sunnyrio]

VazgXa, заработало а как тогда коментарии правильно ставить?

[Вазген Алексанян]

и комментарии убрал?
даже не знаю. скорее всего нужно поймать что его переопределяет и поправить.
/* comment */ вот так

[sunnyrio]

VazgXa, Спасибо комментарии решили)