• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

Przeglądarka nie reaguje na @media w CSS

Object Storage Arubacloud
0 głosów
235 wizyt
pytanie zadane 6 listopada 2018 w HTML i CSS przez niezalogowany
edycja 6 listopada 2018

Witam mam problem jak wprowadze atrybuty do media queries to przeglądarka tego nie czyta tzn Dla jednego ID czyta ale dla innych już nie dlaczego tak ?

 

@media (max-width: 1366px)
{
	#wyroby
	{
		margin-left: 50px;
	}
	#h3 > span
	{
		padding-left: 0;
	}
    #jojo
    {
        width: 45%;
    }

}
<h3>Witamy w firmie<span>Bart-Gum</span> - firmy zajmującej się produkcją uszczelek od lat!</h3>

Dla #wyroby margin działa, ale pozostałe już nie. Kiedy wchodze w konsole dla #jojo widać atrybut media ale właściwość width jest przekreślona nie wiem czemu.

 komentarz 6 listopada 2018 przez shotokan Nałogowiec (39,660 p.)
Może jakiś kod byś zapodał...:)
 komentarz 6 listopada 2018 przez niezalogowany
o co może chodzić ?
 komentarz 6 listopada 2018 przez niezalogowany
o co może chdzić ?
 komentarz 6 listopada 2018 przez pablop76 VIP (123,120 p.)
O kaskadowość i specyficzność.
 komentarz 6 listopada 2018 przez niezalogowany
a konkretniej ?
 komentarz 6 listopada 2018 przez shotokan Nałogowiec (39,660 p.)
Że najprawdopodobniej masz gdzieś inne reguły, które są ważniejsze i przeglądarka je wczytuje a nie te, które byś chciał...
Poza tym, ten kod, który podałeś chyba nie jest kompletny, więc zgaduj zgadula...
 komentarz 6 listopada 2018 przez niezalogowany

Okej to daje kompletny kod HTML i CSS poniżej:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="animate.css">
	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Cabin+Condensed:400,600" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Corben" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
	<title>"Wyroby gumowe" i silikonowe</title>
</head>
<body>
	<div id="container">
	<header>
		<div id="lul">
		<h1 id="tak">
			<p id="title">
				BART - GUM
			</p>
			<p id="font2">
				Rok założenia - 1974
			</p>
		</h1>
	</div>
	</header>
	<div id="nawigacja">
		<div id="wyroby">
			<h1 id="nie">
				<p id="title-two">
					"Wyroby gumowe" i silikonowe
				</p>
				<p id="font">
					Barbara Żmudzińska-Witucka
				</p>
			</h1>
		</div>
		<div id="jojo">
			<nav>
			<ul>
				<li>
					Strona główna
				</li>
				<li>
					O nas
				</li>
				<li>
					Oferta
				</li>
				<li>
					Kontakt
				</li>
			</ul>
		</nav>
	</div>
	</div>
		<div class="photo">

  </div>
	<main>
		<section>
			<article id="Amain-articles">
				<img src="images/044-information.png" class="icons">
				<h2>O nas</h2>
				<h3>Witamy w firmie<span>Bart-Gum</span> - firmy zajmującej się produkcją uszczelek od lat!</h3>
				<p>Jesteśmy rodzinnym zakładem produkcyjnym założonym w 1975 . Nasi pracownicy specjalizują się w szerokim zakresie produkcyjnym wszelkiego rodzaju uszczelek . Systematyczne zdobywane doświadczenie pozwala nam uzyskać produkt o najwyższej jakości i skuteczności działania . Oferujemy ok. 1500 wzorów w tym wszystkie uszczelki do przemysłu;<br><br>
					- <span>mleczarskiego,<br>
					- piwowarskiego,<br>
					- winiarskiego,<br>
					- owoco-warzywnego,<br>
					- mięsnego,<br>
					- farmaceutycznego,<br></span>
				</p>
			</article>
			<article id="Bmain-articles">
				<img src="images/shopping-cart.png" class="icons">
				<h2>Oferta</h2>
				<p style="font-size:32px ">
					<span id="robot">Konkurencyjne ceny pozwalają nam na dojście do porozumienia z każdym klientem!</span><br><br>
					<span id="red">Czas oczekiwania na uszczelki nie przekracza Państwa cierpliwości - Np. zamawiacie w poniedziałek, a w środę odbieracie kuriera opłaconego przez nas, z waszym towarem!</span><br><br>
					Oferujemy wyroby z silikonu, gumy oraz EPDM-u o dowolnej twardości spożywczej i olejoodpornej, między innymi:
					</p>
					<div id="xd">
							<p>
					- Do instalacji nabiałowej, kołowe, stożkowe, płaskiego, kwadratowe,<br> do złącz amerykańskich DIN od Ø24 do Ø200<br>
					- Do wirówek manszetowych, duże, małe, "O" i 10 TYS. (Alfa laval)
					<br>
					- Do nalewaczek zaciskających, nalewających (lab, stroke, udec)<br>
					- Do pomp typu "O", tłoczki, odrzutniki (GA, GU, itp.)<br>
					- Do konwi krajowych 10 i 20 litrowych, niemieckich, węgierskich.<br>
					- Do maszyn rozlewniczych (woda, soki, mleko, śmietana)<br>
					- Do wag, baków, pras i wanien serowatorskich,<br>
					- Do homogenizatorów kilkadziesiąt typów o profilu "U" i "V" (gaulin)<br>
					- Sznury o przekroju prostokątnym, kwadratowym, okrągłym, półokrągłym,<br>
					- Kółka narożnikowe do pasteryzatorów pras i wanien serowatorskich,<br>

				</p>

						<p>
							- Do urządzeń zaworowych klapkowe od Ø24 do Ø150, wszystkie rodzaje, krajowe i inne,<br>
					- Tulejki i wkłady do sprzęgieł,<br>
					- Uszczelki włazu tanków i kontenerów (Volvo, Mercedes, Iveco i inne)<br>
					- Podajniki, sterowniki, rodzielaczem dozownikm kapslownice, zakręcarki,<br>
					- Uszczelki myjki, etykietarki, załadowarki, wyładowarki, saturatory pras filtrujących,<br>
					- Kule gumowe Ø38 Ø50 Ø55 Ø62 Ø86<br>
					- Oringi, taśmy, tłoczki, osłony, przelotki, szpule itp,<br>
					- Pasy (lab i inne),<br>
					- Pasteryzatory (polskie, alva laval, naegma),<br>
					- Chwytaki do urządzeń za i wyładowniczych.
						</p>
					</div>
					<span id="kozak">Wykonamy każdą uszczelke !</span>
			</article>
		</section>
	</main>
	<footer>
		<p><img src="images/support.png" class="iconsl">KONTAKT</p>
		<div id="contact">
			<p><img src="images/013-mail.png" class="icons" style="margin-right: 20px">biuro@producentuszczelek.pl</p><br><br>
			<p style="font-size: 32px"><img src="images/029-telephone-1.png" class="icons" style="margin-right: 20px">Tel. / fax - 61 - 8141 - 358<br><br>
			Tel. kom - 505 711 371</p><br><br>
			<p><img src="images/032-placeholder.png" class="icons" style="margin-right: 20px">62-081, Baranowo, ul. Lipowa 7
		</div>
	</footer>
</body>
</html>

body
{
	height: 4600px;
	background-color: #E7FFE6;
}

@media (max-width: 1366px)
{
	#wyroby
	{
		margin-left: 50px;
	}
	#h3 > span
	{
		padding-left: 0;
	}
	#jojo
	{
		width: 45%;
	}
}

header
{
	background-color: #B02222;
	display: flex;
	flex-direction: column;
	-webkit-box-shadow: 4px 5px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 5px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 4px 5px 3px 0px rgba(0,0,0,0.75);
    z-index: 2;
    height: 4.5%;
    width: 100%;
    color: #F7F7F7;
}

#container
{
	display: flex;
	flex-direction: column;
	height: 100%;
	align-items: center;
}

#wyroby
{
	display: flex;
	width: 29%;
	height: 100%;
	align-items: center;
	justify-content: flex-end;
}

header > #lul
{
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}


#jojo > p > img
{
	width: 35px;
	height: 35px;
	margin-right: 13px;
}

#jojo > p
{
	margin-right: 35px;
}

#jojo
{
	width: 38%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-right: 50px;
}

#tak
{
	display: flex;
	flex-direction: column;
	font-family: 'Passion One', cursive;
	align-items: center;
}

#tak > #title
{
	font-size: 73px;
	border-bottom: solid 1px blue;
	letter-spacing: 3px;
}

#nie
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#title-two
{
	font-family: 'Cabin', sans-serif;
	border-bottom: solid 1px yellow;
}

#font
{
	font-size: 30px;
}

#font2
{
	font-size: 28px;
	font-family: 'PT Sans', sans-serif;
}

h1 > p
{
	font-size: 37px;
}

nav
{
	display: flex;
	font-size:28px;
	width: 100%;
	height: 40%;
	justify-content: flex-end;
}

nav > ul
{
	display: flex;
	align-items: center;
	font-family: 'Oswald', sans-serif;
	justify-content: space-between;
	margin-right: 50px;
	width: 80%;
}


aside
{
	display: none;
	justify-content: flex-end;
}

aside > ul
{
	display: flex;
	font-family: 'Oswald', sans-serif;
}

.more
{
	display: flex;
	background-color: blue;
	margin-left: 10px;
	align-items: center;
	justify-content: space-around;
	border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border: 0px solid #000000;
}

.thumbnails
{
	width: 55px;
	height: 55px;

}

.photo
{
	margin-top: 50px;
	width: 80%;
	height: 17%;
	background-image: url("images/Img_180925110335135-1.jpg");
	background-size:100%;
	background-color: #E6FEFF;
	-webkit-box-shadow: 7px 12px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 12px 15px 0px rgba(0,0,0,0.75);
box-shadow: 7px 12px 15px 0px rgba(0,0,0,0.75);

}

main
{
	display: flex;
	flex-direction: column;
	height: 60.2%;
	justify-content: space-around;
	z-index: -1;
}

main > section
{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	width: 100%;
	justify-content: space-around;
}

#Amain-articles
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 45%;
	justify-content: center;
	background-color: #E7FFE6;
	line-height: 280%;
}

#Bmain-articles
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 55%;
	justify-content: center;
	background-color: #E6FEFF;
	line-height: 280%;

}

#Bmain-articles > p
{
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	width: 80%;

}




#Bmain-articles > p > #robot
{
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
}

#kozak
{
	margin-top: 70px;
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	color: #e60000;
}

#red
{
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 500;
    color: #e60000;
}

#Amain-articles > p
{
	font-family: 'Montserrat', sans-serif;
	font-size: 23px;
	width: 70%;
}

#Amain-articles > p > span
{
	font-weight: 600;
}

#products
{
	display: flex;
	width: 75%;
	height: 18%;
	justify-content: space-between;
	margin-top: 75px;
}


.gasket
{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 22%;
	background-color: black;
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
	font-size: 20px;
	border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border: 0px solid #000000;
}

.gasket > span
{
	position: absolute;
	color: white;
	border: solid 0.6px white;
	padding: 20px;
	letter-spacing: 2px;
}

.gasket > img
{
	width: 100%;
	height: 100%;
	opacity: 0.2;
}

.icons
{
	width: 65px;
	height: 65px;
}

.small-icon
{
	width: 50px;
	height: 50px;
	margin-right: 15px;
}

footer
{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 16%;
	background-color: #39475E;
	font-family: 'Corben', cursive;
	align-items: center;
	color: #F4F4F4;
	justify-content: center;

}

footer > img
{
	width: 70px;
	height: 70px;
}

h2
{
	font-family: 'Noto Sans', sans-serif;
	font-size: 40px;
	padding-top: 15px;
	padding-bottom: 60px;
}

h3
{
	display: flex;
	align-items: center;
}

#find
{
	display: flex;
	width: 90%;
	justify-content: space-between;
	font-family: 'Barlow', sans-serif;
	font-size: 40px;
	color: #E6E6E6;
	height: 20%;
}

.dane
{
	width: 30%;
	border-top:none;
	border-left: none;
	border-right: none;
	border-bottom: solid 2px #E6E6E6;
    background-image:none;
    background-color:transparent;
    font-family: 'Francois One', sans-serif;
    color: #E6E6E6;
    font-size: 24px;
}

.tresc
{
	width: 45%;
	height: 65%;
}


#map
{
	width: 98%;
	height: 60%;
	opacity: 0.7;
}

#map:hover
{
	opacity: 1;
}


#haha
{
	width: 100%;
	height: 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#xd
{
	display: flex;
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	width: 70%;
	justify-content: space-between;
	margin-top: 70px;
}

#xd > p
{
	width: 50%;
	font-weight: 400;
}

h3
{
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	padding-bottom: 80px;
	padding-top: 60px;
}

h3 > span
{
	color: #e60000;
	padding-left: 10px;
}


#contact
{
	display: flex;
	flex-direction: column;
	font-size: 24px;
}

#contact > p
{
	display: flex;
	align-items: center;
}

footer > p
{
	font-family: 'Oswald', sans-serif;
	display: flex;
	align-items: flex-end;
	font-size: 40px;
	margin-bottom: 100px;
}

.iconsl
{
	width: 80px;
	height: 80px;
	margin-right: 10px;
}



#nawigacja
{
	color: #F7F7F7;
	width: 100%;
	height: 3%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #39475E;
	-webkit-box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
z-index:
}

 

1 odpowiedź

0 głosów
odpowiedź 6 listopada 2018 przez hun1er76 Stary wyjadacz (11,960 p.)
wybrane 6 listopada 2018
 
Najlepsza

1. Media queries wstaw poniżej elementów, których właściwości nadpisujesz
2. W dokumencie nie ma id o nazwie h3, tylko są takie tagi
3. #wyroby działa, ponieważ tam nie nadpisujesz właściwości tylko nadajesz nową.

Podobne pytania

–1 głos
1 odpowiedź 472 wizyt
Jak poprawie uzywać @media w CSS?
pytanie zadane 21 listopada 2018 w HTML i CSS przez Artur Koniec Gaduła (3,670 p.)
+1 głos
2 odpowiedzi 85 wizyt
@media queries problem
pytanie zadane 25 marca w HTML i CSS przez oleksik Użytkownik (590 p.)
0 głosów
2 odpowiedzi 202 wizyt
Niedziałające @media
pytanie zadane 9 sierpnia 2017 w HTML i CSS przez Kekk Początkujący (450 p.)

92,556 zapytań

141,404 odpowiedzi

319,563 komentarzy

61,942 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...