I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
Related
My responsive site's initial zoom is incorrect on mobile:
Sample HTML is below (and in this live Codepen demo).
You can see that I'm already using <meta name="viewport" content="width=device-width, initial-scale=1">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.ctaGrabber{
word-wrap: break-word;
font-size: 30px;
font-weight: bold;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 0px;
padding-left: 30px !important;
padding-right: 30px !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
</style>
</head>
<body class="">
<div class="container mainContainer hideWhenShowingForm">
<div class="row">
<div class="col-md-12 text-center">
<h1>“Here is a great title about a whole bunch of cool stuff”</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center presenters">
left col
</div>
<div class="col-md-6 text-left">
<div class="text-center">
<a href="#" class="btn btn-lg btn-primary ctaGrabber" data-hiddenForm="#hiddenCrmForm">
<span>YES! Watch The Training Now!</span>
<!-- <span class="elButtonSub" style="font-size: 14px; display: block;"></span>-->
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Why does my a.ctaGrabber button's font-size not cause the mobile "zoom" to be wider?
How can I either force the viewport zoom factor to honor this large font-size OR wrap the button text (without me specifying a button width)?
Ahhh, I figured it out:
I needed to add white-space: normal; to my .ctaGrabber style to override the white-space: nowrap; style of .btn in Bootstrap's buttons.less file.
Update:
The way to narrow down what element is causing the horizontal scroll bar is to use the Inspect panel and remove elements one at a time.
Then, once you’ve figured out the offending element, remove/edit one CSS property at a time.
In my case just recently, I found that an img was using the Bootstrap img-responsive class but also had max-width: 450px;, which overrode Bootstrap's max-width: 100%;. The solution (https://stackoverflow.com/a/50194061/470749) was to wrap the img in a div with this class:
.imgMaxWidthWrapper{
max-width: 450px;
margin: auto;
}
I created pdf with Symfony by helping me with KnpSnappyBundle which uses wkhtmltopdf.
In one of my pdf files, I have a column on the left and one on the right. I would like the two columns to finish at the bottom of the page, so I put a style css "height: 100%".
This works fine if the pdf only makes one page, but if the contents of one of the columns overflow on another page, the divs are not extended to the second page.
So I would like that if the content goes beyond the first page, the two columns finish at the bottom of the second page.
Here is the current code of my html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="<?php echo $baseUrl; ?>css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo $baseUrl; ?>css/font-awesome.min.css">
<style>
#colonneGauche {
width: 25%;
height: 100%;
background-color: #4c5667;
float: left;
}
#content {
width: 75%;
height: 100%;
background-color: #bacbe1;
float: left;
}
</style>
</head>
<body>
<div id="colonneGauche">
<p>lorem</p>
</div>
<div id="content">
<p>ipsum</p>
</div>
</body>
</html>
I tested the css "page-break-after: avoid;" but it did not work.
If one of you has an idea...
Thank you in advance !
I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
A bit of help would be very much appreciated...Thanks very much indeed
Edit: the code has now been added
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#link1{
font-size: 33px;}
#pic1 {
position:fixed;
left:30%;
top:30%;
margin-left:-382px /*half the width*/
margin-top:-370px /*half the height*/
}
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
LogIn
<img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">
</body>
</html>
You can try creating a div container in your body and setting the borders, something along these lines:
<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
<div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
Page contents go here
</div>
</body>
Preview: http://jsfiddle.net/pbj4xxh0/
I'm trying to follow a Bootstrap tutorial but the first div I'm creating, that should be spanning the entire width of my browser/device, seems to be limited at ~1000 pixels. Any ideas as to why this is?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing the Bootstrap 3.0 Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12 {
height: 100px;
background-color: blue;
color:white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
</body>
</html>
Thanks in advance for any help.
If you're using the latest 3.1, you can use the container-fluid class instead of container like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
3.1 full width: http://www.bootply.com/116382
For Bootstrap 3.0.x you'd need to use a custom container like this...
.container-full {
margin: 0 auto;
width: 100%;
}
3.0 full width: http://www.bootply.com/107715
The container class has a width specified depending on the media query. Your content is within this div so its width is based upon it.
You can see this in the dev tools in all major browsers, find that element and view the CSS styles/properties.
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.