Embedded bootstrap div not responsive in un bootstrap sites - html

My requirement is to embed a bootstrap style div in few existing sites. Existing sites may have bootstrap or not bootstrap implementations.
Typical html structures below,
<!--Existing site html-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<here thier styles and scripts>
</head>
<body>
<Existing site body>
<!--My embedded div below-->
<div class="my-embedded-div">
<here my bootstrap prefixed style sheet(Ex:[.my-embedded-div allbootstrap styles])>
<all my divs , modals and components>
</div>
</body>
</html>
Issue below,
I am inserting my div in existing bootstrap site(existing site has thier own bootstrap version implementations). This scenario my elements inside my embeds div is responsive in all devices.This scenario fine.
But when i implement with un-bootstrap site(Existing site which dont have bootstrap implementstions). My embed div not responsive at all. Like shown below,
Even i have meta name="viewport" content="width=device-width, initial-scale=1.0 still its not responsive.
How i can resolve this case?
Note: I just handle conflict bootstrap by adding prefix to my parent element and prefixing my bootstrap plugins(Reference link). I am using bootstrap 4.1.3 , also i am not expert in html designs please.

Related

Webpage starts weirdly zoomed in and is fixed after zooming out and then in

Like the title says, when I open my html file, it looks weirdly zoomed in. I checked the browser setting and its at 100% zoom. But what is even weirder, when I zoom out to 90% and then zoom in again to 100%, the webpage looks like how I intended it to look like.
I am very new to web development. Any clue as to what might be causing this issue?s
Edited to make question clearer:
This is what I have in my head tag.
I only use css, no scss or anything like that. I write code in visual studio.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Personal CSS -->
<link rel="stylesheet" href="homepage_style.css">
<!-- Google Font "Karla" -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Karla">
<!-- Font Awesome Library -->
<script src="https://kit.fontawesome.com/f4b0af8bdd.js" crossorigin="anonymous"></script>
<title>My Portfolio</title>
I have tested your code, and it works well for me. So by the look of it, it should be the <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> line.
This line makes your page adapt to the user's screen resolution and scale. As we may have different screen resolutions, or simply the body I used to test ( a simple Lorem Ipsum ) could be so much different than yours, it didn't gave me that issue.
As I don't know the contents of your website, i will recommend you to remove the shrink-to-fit=yes as it should be what it is causing this.
That may affect other contents, so maybe you could use some Bootstrap ( you may already be using it ) to readjust some parts of the page if they get misconfigured.

How to optmize my html for mobile web search

I'm trying to get my html web page to optimize to mobile devices. I have have tried a couple of bootstraps but it doesn't seem to be showing up properly. If anyone could help and assist I would truly appreciate it!!
Here's my HTML:
<header <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">>
I expect the web page to be functional in a mobile setting.
You only have to implement Bootstrap responsive design
In the body of the page
For more advance stuff you can use css media queries
There are a number of problems with your code; firstly, the meta tags should be in the document <head> - not the <header>. Secondly, you have an HTML tag within another HTML tag's brackets, which is incorrect - you should only have tag names and attributed content within HTML brackets.
A correct structure of a document is more like this:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">
</head>
<body>
<main>
<header>
<h1>I am a heading</h1>
</header>
<p>I am some paragraph content</p>
</main>
</body>
</html>
Note how the meta information is separate from the document body, which houses the main content for the document.

How to deal with responsive design without using metatag viewport?

My design works fine (it's a circle object with rotate functionality) with meta tag <meta http-equiv="content-type" content="text/html; charset=UTF-8"> but when I fit that design into any responsive template it won't work.
Reason I find out is that every responsive template e:g: bootstrap,foundation,skeleton etc. use metatag <meta name="viewport" content="width=device-width, initial-scale=1.0">
http://prefortune.com/rotate/bootstrap/
You can click on changeview link in responsive mode on above link it will change view and circle design will be fit properly but toggle menu will be loss. (On click I am removing content of viewport metatag content.)
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
Error Code
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you are using Bootstrap you can try this.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
Starting at line 315 in your HTML you have
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
It looks to me that this path to jquery may not be correct, and as a result the bootstrap js isn't working, and this would cause a problem with the toggle menu.
This may not be the full answer to all your questions, but a good place to start.
Another issue I notice is that the source document for your iframe isn't responsive: http://prefortune.com/rotate/
If you view this on a narrow viewport the layout breaks, so this might need some attention as well. Iframes with responsive design can complicate your life and to begin you would need to add a viewport meta tag to this page as well.
Good luck!

Html Tags end up with my responsive design

I have a HTML/CSS code, and you can see it in this link
<div id="geral">
<div id="topo">
</div>
<div id="meioPage">
<div id="Menu_B">
</div>
<div id="Feed">
</div>
<div id="Menu_C">
</div>
</div>
</div>
The problem with this code is that it was made to take over the entire screen (responsive design) and its minimum size is 800x600 and its maximum size is 4k (more than that he did not make it a responsive design)
In a strange way the code works perfectly without the HTML tags, now I added these tags in my code:
<!DOCTYPE HTML>
<html>
<head>
<title>My Web Page</title>
<!--<meta http-equiv="X-Frame-Options" content="deny">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
//Here I put the other code up
</body>
</html>
And the responsive design stopped working, and it no longer occupies the entire screen.
An example is the page the link sent above, JSFddle site automatically adds the HTML tags, but if you test this code without tags will see the responsive design come back to work, how can I solve this problem? there is some code to be placed in the HTML tags?
add meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
when making responsive website you must put this in you head tags so the browser knows it is responsive, same for mobile devices.

Bootstrap doctype causing widths to be ignored

I am encountering a very odd problem with Twitter Bootstrap. I'm using a customised version of Bootstrap downloaded via the 'Customize' page in the Bootstrap website. I'm using a customised version, because I need to use 24 columns instead of 12 in order to give me the variety of column widths I need.
These are the custom values I entered into the Customization form on the Bootstrap website:
#gridColumns 24px
#gridColumnWidth 30px
#gridGutterWidth 10px
I left all the options checked, except for the Responsive checkboxes. The site I'm building will be fixed width only, so I switched off all five of the Responsive options.
After I downloaded the files, I created a very basic HTML page to test the grid system.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="span9" style="background: #F00;">SPAN 9 COLUMN</div>
<div class="span15" style="background: #0F0;">SPAN 15 COLUMN</div>
</div>
</div>
</header>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
The problem is that the browser appears to ignore the CSS widths set on the .row and .spanXX styles that are set in the bootstrap.min.css file. I have checked the CSS file, and the widths are definitely included:
Lines 42-90 of bootstrap.min.css
.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:974;}
.span24{width:974;}
.span23{width:933;}
.span22{width:892;}
.span21{width:851;}
.span20{width:810;}
.span19{width:769;}
.span18{width:728;}
.span17{width:687;}
.span16{width:646;}
.span15{width:605;}
.span14{width:564;}
.span13{width:523;}
.span12{width:482;}
.span11{width:441;}
.span10{width:400;}
.span9{width:359;}
.span8{width:318;}
.span7{width:277;}
.span6{width:236;}
.span5{width:195;}
.span4{width:154;}
.span3{width:113;}
.span2{width:72;}
.span1{width:31;}
.offset24{margin-left:994;}
.offset23{margin-left:953;}
.offset22{margin-left:912;}
.offset21{margin-left:871;}
.offset20{margin-left:830;}
.offset19{margin-left:789;}
.offset18{margin-left:748;}
.offset17{margin-left:707;}
.offset16{margin-left:666;}
.offset15{margin-left:625;}
.offset14{margin-left:584;}
.offset13{margin-left:543;}
.offset12{margin-left:502;}
.offset11{margin-left:461;}
.offset10{margin-left:420;}
.offset9{margin-left:379;}
.offset8{margin-left:338;}
.offset7{margin-left:297;}
.offset6{margin-left:256;}
.offset5{margin-left:215;}
.offset4{margin-left:174;}
.offset3{margin-left:133;}
.offset2{margin-left:92;}
.offset1{margin-left:51;}
Through much trial and error, I discovered that if I completely remove the Doctype line from the top of the HTML file, the page displays correctly! This behaviour is consistent on Firefox (19.02) and IE 10.
When I inspect the rowXX and span DIV tags in Firebug, the CSS is indicated as empty when the DOCTYPE line is included in the HTML - see the attached screengrabs below.
Screengrab from Firefox with Doctype removed from the HTML:
http://tinypic.com/r/24gp1er/6
Screengrab from Firefox with Doctype included in the HTML:
http://tinypic.com/r/13ye05g/6
Thanks in advance for any suggestions to help resolve this problem.
There may be a problem with your CSS file. Firstly #gridColumns 24px should be #gridColumns 24 (ie, specify the number of columns, not a width.
Check the result and the page source of http://fiddle.jshell.net/panchroma/pegjC/show/ or the jsFiddle
You can grab my versions of the custom 24col css from https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.css and https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.min.css
Hope this helps!