How to enable media queries?

A

Al Tinho2016-08-26 10:33:49

css

Al Tinho, 2016-08-26 10:33:49

Please tell me, there is a template on Joomla3
I want to make it adaptive I
connect media queries but they do not work (added meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" to the head) /> and connected css media file)
Tell me how to do it right
Code

<head>		    
 <jdoc:include type="head" />  	 	    
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/tdefaut.css" type="text/css" media="all" />   
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/box.css" type="text/css" media="all" />  
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.js"></script>   	  
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/superfish.js"></script>   
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/hoverIntent.js"></script> 
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/nivo.slider.js"></script>	 
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/scroll.js"></script>  
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/mootools.js"></script>   
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/script.js"></script> 
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/media.css" type="text/css" media="max-width: 700px" />
 
 <link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.gif" />	 
 <link href='http://fonts.googleapis.com/css?family=Oswald:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>  
 <link href='http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
 
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <meta name="viewport" content="width=device-width initial-scale=1.0"/>
 <link rel="stylesheet" href="media.css" media="max-width: 700px"/>
 <link rel="stylesheet" href="media.css" media="only screen and (max-width: 700px)"/>
 
<link rel="stylesheet" href="/templates/first-template/css/ddsmoothmenu.css" />
<script type="text/javascript" src="/templates/first-template/js/jquery.min.js"></script>
<script type="text/javascript" src="/templates/first-template/js/ddsmoothmenu.js"></script>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

I

Igor Peregudov, 2016-08-26
@alex_terekhov

In index.html, add the following code to head:
Add the following to the style file:

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
  
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

A

Alexander Sinitsyn, 2016-08-26
@a_u_sinitsin

Either they are not written correctly, or they are not connected last.

A

archelon, 2016-08-26
@archelon

It's hard to tell without seeing the code.
but first, tell me what you have in head > meta name="viewport"