Div size differes when viewport is used - javascript

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>

Related

Why does my Chrome extension's browser action popup not show?

Here is my manifest.json file:
{
"browser_action" :
{
"default_icon" : "Assets/Chromium logosu.png",
"default_popup" : "main.html"
},
"description" : "Bu eklenti, Chromium'un güncelleştirmelerini denetler ve yükler.",
"manifest_version" : 2,
"name" : "Chromium Güncelleştirici",
"version" : "1.0"
}
And here is my main.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - https://www.wysiwygwebbuilder.com">
<link href="Chromium_Güncelleştirici_Eklenti_Projesi.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="wb_Image1" style="position:absolute;left:0px;top:0px;width:320px;height:50px;z-index:0;">
<img src="Assets/Başlık.png" id="Image1" alt=""></div>
<div id="wb_Image7" style="position:absolute;left:0px;top:160px;width:320px;height:35px;z-index:1;">
<img src="Assets/Telif Hakkı Metni.png" id="Image7" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:50px;width:320px;height:37px;z-index:2;">
<img src="Assets/Güncelleştirmeleri Denetle (Pasif).png" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:0px;top:87px;width:320px;height:36px;z-index:3;">
<img src="Assets/Ayarlar (Pasif).png" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:0px;top:123px;width:320px;height:37px;z-index:4;">
<img src="Assets/Hakkında (Pasif).png" id="Image4" alt=""></div>
</body>
</html>
When I click the extension's button, I get this:
My extension's popup menu
Actually, my popup page should be shown like this:
The UI of my popup file
So, what should I do in order to fix this issue?
Popup html takes height and width from the content of the html loaded.
In your case, all div elements inside body are position:absolute, which results in zero height and width to body tag, and hence the Popup UI appears as a small box when loaded as browser action popup.
You can verify this behaviour by giving fixed height or width to tag in your css.
Why it appears fine when main.html loaded directly to browser?
It actually appears fine, but over here as well the body results in zero height, but because the viewport is not depended on the content of body, it shows the content outside the body as depicted in sample screenshot below.
How to fix?
Fix your CSS such that body gets overall height of the actual content that you need to show. Not sure why every element here you have placed as position absolute, I feel you can avoid that approach and still get the UI as expected by you.
Worst case, you can hardcode the body with fixed height and width of what you need the actual popup html size to be.
#Junaid Hamza
Ok, I have fixed my issue via doing these things:
1- First of all, I have removed all of "position:absolute;"s. But, when I did this, I encountered another issue. This time, the order of images was broken.
2- In order to fix the second issue, I have used a weird method. I have merged last three images into one image.
Anyway, thank you for your answer.😊

HTML Object bottom-clipped, cut off on mobile

<div data-role="page" id="samples">
<div data-role="header" data-position="fixed">Back<h1>Ceremony Planner 2.0 - Samples</h1></div>
<object type="text/html" data="http://www.thereverendmichael.com/ceremony-samples"></object>
</div>
The object scrolls and works fine on all browsers but will not scroll on mobile, it gets cut off and bottom-clipped. Can anyone tell me how I can fix this?
Try this:
First: Make you sure that you put the viewport inside <head> like
<head><meta name=viewport content="width=device-width, initial-scale=1"></head>
Use <iframe> instead <object>
Add a wrapper to the <iframe>and add the following style
html
<div class="wrap">
<iframe src="http://www.thereverendmichael.com/ceremony-samples"></iframe>
</div>
css
.wrap {
// -webkit-overflow-scrolling: touch; Non-standard!
overflow-y: scroll;
}
SOURCE: https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
If it doesn't work uncomment the other style although I see the documentation and is not recommended to use it see here.
However here is working: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe you can see
the style that applies to #iframewrapper watching the view-source (ctrl+u in your browser) and looking for #iframewrapper
Hope this helped you!

embed-responsive shows white border in bottom

I have a webpage, that shows another html page using iframe. Please see my code below.
<html>
<head>
<title>DotWifi</title>
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="http://www.xxxx.com/xxxxxx/xxpage?xxxId=123&tok=$tok&authaction=$authtarget"></iframe>
</div>
</body>
</html>
I am try to show a responsive webpage using iframe using embed-responsive-item class. But it shows a white border in bottom. Please see the below image.
That's not a border, it's simply the background of the body.
The iframe's parent div, embed-responsive-4by3 is supposed to have a width to height ratio of 4 by 3. That's what this class does! So if the width is 416 pixels (the width of the window) then the height becomes 312 pixels.
That's all there is to it.
If you don't want that, the solution is to remove the embed-responsive-4by3 class from the div.
Or, if all your page ever does is show another page in an iframe, you can dispense with Bootstrap altogether and put only the iframe on the page!

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