Need your help. Can't solve this down, been looking for the answer for so long and didn't find anything on it.
It's about a simple media query written abslutely correct.
#media (max-width: 942px) {
.top-header {
flex-direction: column;
}
}
Besides, I don't see the "flex-direction: column" style applied to the ".top-header" in Web Inspector somehow.
Using preprocessor LESS and koala compiler, just so you know. Don't get any errors from the compiler, the generated CSS file is ok: that media query code is there, right at the end of the file as it has to be.
Media viewport is used:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is an HTML snippet, where the ".top-header" can be found:
<header>
<div class="container">
<div class="top-header">
<div class="top-header__logo">
<img src="img/Welcome-page/header/Logo.png" alt="Logo">
</div>
...
</header>
There you can see that name class ".top-header", so what couid it be...
So really can't figure it out, hoping to get some straight answers.
Try to use this instead:
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
Also, your media query has a missing }
Related
I don't know what happens in a desktop browser but in Android default browser when i keep the width and height as 100%
The font size of the textarea increases according to the screen I tried to alert the font - size of the textarea but it doesn't change .I think this is a bug in the browser if not is there a way to fix this issue ?
Any help would be appreciated.
The code is simple it is:
<textarea></textarea>
<style>
textarea{
width:100%;
height:100%;
font-size:16px;
}
</style>
<script>
alert($("textarea").css("font-size"));//uses jquery
//Outputs 16
</script>
I have noticed that the font size starts changing after the width becomes more than ~450px
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Disable zoom.
i think the problem related to :
<meta name="viewport" content="width=device-width, initial-scale=1">
simply check <head> tag and remove that if exist --not Recommended --
another reason maybe related to css media Query
check the media queries in stylesheet and change the font-size
This is my HTML (amongst other things):
<button type="button" class="btn btn-primary ng-cloak" ng-click="ctrl.add(ctrl.userProfile.username)" ng-hide="ctrl.userProfile.added">Add</button>
The HTML above is extending this HTML page:
<html ng-app="UserPageApp">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrapCSS/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/base.js"></script>
<script src="js/bootstrapJS/bootstrap.min.js"></script>
<base href="/">
</head>
This is my base.css (amongst a few other things):
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
The problem is, when the page loads, the "Add" button appears and then disappears after a second (even when ng-hide evaluates to True. Note: This is what I mean by the 'flicker'). Is there a way for me to not allow the button to show up at all if ng-hide evaluates to True?
Edit: When I change class="btn btn-primary ng-cloak" to class="btn btn-primary ng-cloaks" and make this my CSS:
/* add ng-cloaks */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-cloaks {
display: none !important;
}
then it successfully does not display the button. It seems as if some JS is removing ng-cloak on load?
Edit 2: I removed ng-hide from my button and turns out that the ng-cloak class doesn't even get added to the button (I used "inspect element" in Chromium and saw that the ng-cloak CSS is not even being applied and the class ng-cloak does not appear on the buttons lass). So it seems as if AngularJS is removing the ng-cloak class for some reason (and like I mentioned earlier, when I change it to .ng-cloaks, it works perfectly fine).
Found the error. Although I didn't mention it in my post, ctrl.userProfile.added didn't exist initially (in my user.js file, all I had was self.userProfile = [] initially). I then did a get request and loaded self.userProfile which then became self.userProfile = {'added': true}. So I guess AngularJS was displaying the button because self.userProfile.watching was originally undefined.
I am using the following CSS link code on my site:
<link rel="stylesheet" href="index_files/front.css" media="all" type="text/css" >
and also the following code
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta http-equiv="cleartype" content="on">
Here is my site links - http://www.etutorbd.com/shopi/. It's displaying properly in desktop browser but It's not displaying in mobile browser. I have checked in my android phone. I have found this answered My phone is not displaying the mobile oriented version of my site but It's not working for me. I didn't found any console error. I had a problems like "Error: Failed to execute 'send' on 'XMLHttpRequest' ". But I have fixed that. What am I doing wrong here? Is there any jQuery or CSS media type issues.
You have to remove this from your HTML body:
overflow: hidden; height: 100%; font-size: 81.44%;
if you really need it, add it to your CSS and then use media-queries to disable it on mobile sizes
EDIT with code:
body{overflow:hidden /*use it only if needed, otherwise remove it */}
#media(max-width:768px){
body{overflow: auto; height: 100%; font-size: 81.44% /* change if needed */;}
}
http://www.wimpyplayer.com/
Was searching in the docs, but did not find how to run in full screen. Anyone maybe knows it?
Or where is the new version of skin machine for that player? When I enter to Google, I only find some old which is for Rave, I assume its for old version of the player. But I saw one online editor for new version, which I can't find.
I would then just remove panel of buttons, and set the size of the player with setSize() function.
Skin machine found, from browser history. Google does not find it even when it looks like I use exact keywords http://www.wimpyplayer.com/skinmachine/
In the download ZIP there is a folder named "test" which includes this file:
"option-responsive-size-fullscreen.html"
... which you can use as a reference.
The trick is to use the "data-responsive" option to get wimpy to expand into the size of the page as defined in the CSS.
This is a cleaned-up version o the HTML needed to run in fullscreen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Wimpy Player - Fullscreen</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- The following META tags are used to inform mobile-device browsers to present this page in full-screen mode.-->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Wimpy Player" />
<style type="text/css" media="screen">
/* Make page fill device window */
html, body {
width : 100%;
height : 100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#484848;
}
/* For the Player Instance DIV */
.full {
left:0px;
top:0px;
width : 100%;
height : 100%;
}
</style>
<!-- Prevent entire page from "bouncing" -->
<script>document.addEventListener('touchmove',function(event){event.preventDefault();},false);</script>
<!-- Wimpy Engine -->
<!-- NOTE: Change WIMPY_INSTALLATION_FOLDER to target the wimpy.js file correctly. -->
<script src="WIMPY_INSTALLATION_FOLDER/wimpy.js"></script>
</head>
<body>
<!-- Set the DIV's class to "full" and set the "responsive" option
so the player automatically adjusts to fit snuggly within the view.
The responsive option also causes the player to adjust itself when
the orientation changes (e.g. from landscape to portrate) -->
<!-- NOTE: Change data-media to target media files or a playlist. -->
<div class="full" data-wimpyPlayer data-responsive data-media="song1.mp3|song2.mp3|song3.mp3"></div>
</body>
</html>
UPDATE:
This page on wimpyplayer.com that explains this as well.
I'm at my wits end right now trying to get bootstrap.min.js to work. I have bootstrap.min.js hosted on my server in bootstrap-3.1.1-dist/js/
In my header I have
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Rochester Michigan Computer Repair and Web Design">
<title>Tony Weed - Michigan IT Services</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link href="bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
I'm trying to call a tooltip using
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
but I just cannot get it to work. I've been staring at this for the past few hours and I'm thinking it's something that I'm overlooking. I'm hoping a second set of eyes will help.
Would my web host have anything to do with this perhaps? I'm running through ipage
From the bootstrap tooltip docs:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
You will need to call:
$('[data-toggle="tooltip"]').tooltip();
Also you should initiate the tooltip after the DOM is loaded.
Wrap your JS code in jQuery.ready
You are calling initialization of plugin before any of these targeted elements is available in the DOM. You could just wrap it inside document ready handler:
$(function () {
$('li[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
});
You should really have provided more context in your question, this would have been fixed in few seconds...
I'm not sure if it will fix the problem but the script should be at the bottom of the page instead of in the the <head>