I'm making a webpage for my mums baking business (and to practice my novice coding skills, otherwise I'd just use a simpler solution rather than learning bootstrap).
I've got a header, then 3 bootstrap columns below it, one with an order form, one with images of her bakes, then one with links. I've sized them 3-6-3. I like the way the page looks fullscreen on my desktop but I want the columns to stack when browser gets smaller, or on another device. Currently they just smoosh together, the images get smaller, and after a certain point, a horizontal scrollbar appears. No stacking.
I'm sure I'm either trying to use bootstrap completely wrong, or there's a few glaring errors. I've been staring at it, and trying 'fixes' on here for so long, but I can't solve my issue. Some advice would be greatly appreciated.
one problem I know, is that the and aren't all formatted correctly, I can solve this myself with a bit of time, I just styled it whilst I had it wrongly formatted and when I do it correctly it all looks ugly again, so I'm leaving it for another day. My main problem is the stacking issue.
body {
background-image: url(../images/background.jpg);
}
* {
list-style: none;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
header {
margin: 10px 10px 10px 0px;
width: 100%;
height: 100px;
display: block;
background-color: #539e8a;
}
#inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
header h1 {
font-family: 'Redressed', cursive;
font-size: 333%;
color: #f6c5be;
top: 15px;
left: 43%;
position: absolute;
}
#logo {
float: left;
padding: 17px 0px 0px 0px;
}
#myname {
float: right;
color: #f6c5be;
margin: 40px 0px 0px 0px;
font-size: 130%;
font-weight: 200;
}
/* ----------------------------------------------- */
.row {
display: table;
margin: 0px 5px 0px 5px;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.row div {
background: #f6c5be;
/*border: 2px solid #539e8a;*/
}
.pics img {
width: auto;
height: auto;
margin: 20px 0px 20px 0px;
display: block;
}
.main2 {
width: 100%;
}
#media-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
#links-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
a:link {
color: #539e8a;
}
a:visited {
color: darkolivegreen;
}
a:hover {
color: #539e8a;
}
#orderform-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
input[type=text] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=date] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=tel] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
select[name=orderItems] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
textarea[name=orderBrief] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=checkbox] {
border: 0;
margin-top: 15px;
}
input[type=submit] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}<head>
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:wght@300&family=Redressed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/mysite.css">
</head>
<body>
<header>
<div id="inner_header">
<img id="logo" src="images/newlogo.png" alt="logo, a cupcake">
<h1>redacted</h1>
<div id="myname">
<p>
by redacted
</p>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div id="col1" class="col-xs-3">
<div class="row" id="orderform-text">
<div class="col-xs-12">
<h2><b>Order Form</b></h2>
</div>
</div>
<form action="xxx.xxx.xxx" method="post">
<div class="tableRow">
<p></p>
</div>
<div class="tableRow">
<p>
<label for="name">Name:</label>
<input type="text" name="name">
</p>
</div>
<div class="tableRow">
<p>
<label for="address">Address:</label>
<input type="text" name="Address">
</p>
</div>
<div class="tableRow">
<p>
<label for="contactNumber">Contact Number:</label>
<input type="tel" name="contactNumber">
</p>
</div>
<div class="tableRow">
<p>
<label for="deliveryDate">Delivery Date:</label>
<input type="date">
</p>
</div>
<div class="tableRow">
<p>
<label for="orderItems">What would you like?:</label>
<select name="orderItems">
<option value="Cake">Cake</option>
<option value="Cupcakes">Cupcakes</option>
<option value="Brownies">Brownies</option>
<option value="Scones">Scones</option>
<option value="Wedding Cake">Wedding Cake</option>
<option value="Custom Order">Custom Order (detail below)</option>
</select>
</p>
</div>
<div class="tableRow">
<p>
<label for="orderBrief">Order brief:
<br>
<br>
<textarea name="orderBrief" rows="5" cols="50" placeholder="Tell me in detail what you would like to order!"></textarea></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="DietaryRequirements">Dietary requirements?:
Vegan<input type="checkbox" name="dietaryRequirements" value="Vegan">
Dairy-Free<input type="checkbox" name="dietaryRequirements" value="Dairy-free (can eat egg)">
Gluten-Free<input type="checkbox" name="dietaryRequirements" value="Gluten-free"></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="giftwrap">Giftwrap?
yes <input type="radio" name="giftwrap" value="yes">
no <input type="radio" name="giftwrap" value="no"></label>
</p>
</div>
<div class="tableRow">
<p>
<input type="submit" value="Place Order">
</p>
<br>
</div>
<br>
</form>
</div>
<div id="col2" class="col-xs-6">
<div class="row" id="media-text">
<div class="col-xs-12">
<h2><b>Media</b></h2>
</div>
</div>
<div class="row">
<div class="col-xs-4 pics">
<img src="images/cake1.jpg" id="picture1" class="img-responsive" alt="wedding cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake2.jpg" id="picture2" class="img-responsive" alt="birthday cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake3.jpg" id="picture3" class="img-responsive" alt="cupcakes">
</div>
</div>
</div>
<div id="Links" class="col-xs-3">
<div class="row" id="links-text">
<div class="col-xs-12">
<h2><b>Links</b></h2>
<a href="link removed">
<h3>Facebook</h3>
</a>
<a href="link removed">
<h3>5 star hygiene rating</h3>
</a>
<a href="">
<h3>Reviews!</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
