CSS Disappearing on Mobile Device - javascript

Using the Bootstrap front-end framework and after a certain section of the website, the CSS will not appear on mobile devices but will when viewing it from a browser. I'm unsure if this section is somehow in an interference with another section of the site. The code and CSS for the div in question is below:
HTML:
<div class="project-right">
<div class="container">
<div class"row">
<div class="col-md-8">
....
</div>
<div class="col-md-4">
...
</div>
</div>
</div>
</div>
CSS:
.project-right {
background-color: black;
padding: 110px 0px;
}
I've included <meta name="viewport" content="width=device-width, initial-scale=1"> in my section of the website.
Website can be found at: http://bit.ly/1CEdcBj.

Try to set media property in your header link to value :
'only screen and (max-device-width: 480px)' ...
The shall force the css to get applied on both screen and max-device-width (i.e your mobile device) :
<link rel='stylesheet' media='only screen and (max-device-width: 480px)'
href='/your/css/file.css' />
I haven't tried it though...

I am not sure which section you are talking about but there are some media queries in your CSS code, which show elements on just big screens such as this:
#media only screen and (min-width: 600px)

Related

how can i scale up website or scale down depending on screen size

so i made a website that has images multiple textboxes and etc, some user percentage and some use pixels by that i mean they use that to be in the specific place there in right now. So if you connect your laptop to a tv and put the website it will automatically scale up perfectly it just causes the things to be a little blurry but everything is in place. i was wondering how i can add like a function for my website that selects everything in the page and just shrinks it or expands it depending on the screen size, i dont care if it gets blurry after shrinking or expanding. Or if anyone has any other idea on how i can make everything fit to page no matter screen size it would be very helpful.
First of all, there are multiple ways to make a site responsiv,
the easiest way are the media queries:
#media only screen and (max-width: 600px) {
body {
background: #fff;
}
}
#media only screen and (min-width: 601px) {
body {
background: #ccc;
}
}
This can also be applied to different stylesheets:
<link rel="stylesheet" type="text/css" href="/styles/gardener_main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/styles/additional.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/styles/gardener_800.css" media="screen and (min-width: 800px)"/>
<link rel="stylesheet" type="text/css" href="/styles/gardener_799.css" media="screen and (max-width: 799px)"/>
They are basicly telling the devices what styles to use for what display size.
For the start you can work through this:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
to get a better understanding of the media query itself.
But! Most somehow tend to forget that you also need to adjust your html:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Depending on how much devices and how much older devices you want to support you can also add a switch that basicly replaces everything:
<?php
$mobrowser = '0';
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i',
strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobrowser++;
}if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or
((isset($_SERVER['HTTP_X_WAP_PROFILE'])
or isset($_SERVER['HTTP_PROFILE'])))) {$mobile_browser++;}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda ','xda-');
if (in_array($mobile_ua,$mobile_agents)) {$mobrowser++;}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {$mobrowser++;}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {$mobrowser = 0;}
if ($mobrowser > 0) {
echo '
HTML old mobile devices etc
';
}
else {
echo '
HTML desktop
';
}?>
With this enormus something you can grab the mobile agents,
but such things are only interesting if you really want to support
historic devices.
Maybe you could try to add some css like
#media screen and (min-width: 1240px) {...}
Responsive
Here is how you can test it. Just open it in browser, go right click inspect element or f12. I marked with red where you can see that, how it will look on different sizes.

How do I embed a responsive website inside a website without losing website design responsivness?

Hi I have a responsive designed website embedded into another website. But the problem is that on mobile devices and tablets the embeded website dosent respond to the device window size. Code posted below. Thanks in advance for any help.
<!DOCTYPE html>
<html>
<header>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<style>
html, body {
height: 100%;
}
div {
height: 99%;
}
object {
width: 100%;
min-height: 100%;
}
</style>
<script>
$(document).ready(function() {
$("#siteloader").html('<object data="www.responsivesite.com" />');
});
</script>
</header>
<body>
<div id="siteloader"></div>
</body>
</html>
Use an iframe to embed another page. The media queries will then be treated based on the width of the iframe. For example,
window width - 480px
iframe width - 100%
#media (max-width:480px) will trigger.
window width - 480px
iframe width - 80%
#media (max-width:480px) will not trigger.
Put this on the head of the html
<meta name=viewport content="width=device-width, initial-scale=1">
Source

Div size differes when viewport is used

take a look at this site www.naamdesigns.com
view this site with desktop and also with mobile. In mobile, the header div in blue does not fit the screen entirely, it covers only 50%.
why this problem occur?
Why did you set overflow-x: hidden; on body tag? I guess on mobile 100% width is only the visible part, where the whole content doesn't fit, but just half of it.
lets try to put this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Added :
this is my idea, i dont know it's would works. Lets make a container to wrap all yor contents.
<body>
<div id="wrapper" style="width:100%">
<div id="your_header"style="width:100%"></div>
<div id="your_body" style="width:100%"></div>
</div>
</body>

Automatically resize HTML buttons based onscreen size?

I am making an android mobile app using HTML and JavaScript with CSS. The problem is, I sent it to my friend to test, and the buttons are tiny on his screen. Using CSS, I changed the button size by changing text size in CSS.
Is there a way that I could have the button size change automatically so that it is proportional to the screen size?
If not, how would I make the buttons bigger for larger screens, and smaller for smaller screens?
Please note: I am only using HTML, JavaScript, and CSS. If you give me anything else, please mane it possible to copy and paste because I will not know how to incorporate it in my code.
It probably be done by adding this tag in header
<meta name="viewport" content="width=device-width" />
or/and setting width in percentage.
ex.
<input type="text" style="width:30%" />
It sounds like you want a 'responsive' design, use media-queries and 'breakpoints'.
The breakpoints will be the width for each device you want to support.
for an iphone 5 you would use '641px' as the max width.
you first define the standard class. Then deviate from that using the media queries with css like so
#button{
width:100%; // first define your class
}
#media (max-width: 640px) {
#button {
width:50%;
}
}
http://iosdesign.ivomynttinen.com
You need to use the meta tag for responsive:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
The HTML:
<input type="submit" name="" class="my_button"/>
The CSS:
input.my_button{
width:50%;
height:32px;
display:table;
margin:0 auto;
}
#media screen and (max-width:360px){
input.my_button{
width:100%;
}
}

HTML5 whole website to match screen resolution on mobile devices

I have a web app that I created using html5,jquery and css that contains,
<html>
<head>
<title>Pascal Pattern Scan Laser Photocoagulator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (1462_Next_Treatment_Flat.psd) -->
<style type="text/css">
<!--
As you can see it was sliced in photoshop so for each slice i have a css div class e.g.
div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
When viewing on mobile devices the width matches the screen however the height is too big for mobile screens (user has to scroll down) how can i match the resolution. Similar to a responsive design?
Also do i need to set height as AUTO in the html part of the code or the css or both?
<div class="Table_01">
<div class="id1462-Next-Treatment-Flat-01">
<img src="images/1462_Next_Treatment_Flat_01.jpg" width="1024" height="479" alt="">
</div>
You have to implement Media Queries in css. Please go through below mentioned link for specific implementations...
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Categories

Resources