1 reply [Last post]
Stephienewby
Stephienewby's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT+1
Joined: 2014-07-13
Posts: 1
Points: 2

Hi All,
VERY new to this, please bare with me!
I can't figure out how to keep the 'buy' and 'price' buttons in place when the page changes size. I've checked it on the screen I'm working on but when I check it in other browsers, it's all broken up.
I've tried what I know to change but I'm stumped, anyone help?

Thank you..,.
Http:mallowandcrunch.co.uk

<!--<![endif]--><head>
 
    <meta name="Artisan Mallow Crispy Treats" content="At Mallow &amp; Crunch we use homemade mallow to create delicious crispy treats, traditional Marsh Mallows &amp; celebration pieces. By using the best ingredients and artisan methods, Mallow &amp; Crunch brings an old fashioned favourite into the modern day.">
 
 
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link href="http://fonts.googleapis.com/css?family=Average|Courgette" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=Amatic+SC|Open+Sans +Condensed|Sue+Ellen+Francisco|Lato" rel="stylesheet" type="text/css">
        <title>Mallow &amp; Crunch - Home page</title>
        <meta name="description" content="Artisan Mallow Crispy Treats" "="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/four.css">
        <script async="" src="//www.google-analytics.com/analytics.js"></script><script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <meta name="keywords" content="marshmallows, mallow crispy cakes, crispy cake recipe, birthday cake, mallow pops, s'mores, mallow pie, mallow cream,  ">
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-52229824-1', 'mallowandcrunch.co.uk');
  ga('send', 'pageview');
 
</script>
 
 
    <title>Mallow &amp; Crunch. Artisan crispy treats made traditionally with the best quality ingredients. </title></head>
 
<body>
 
 
 
 
<div class="top">
<div class="navBox">
    <ul class="navList">
        <li><a href="index.html">Home</a></li>
        <li><a href="who.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="delivery.html">Delivery</a></li>
        <li><a href="stock.html">Stock Us</a></li>
        <li><a href="accessories.html">Accessories</a></li>
        <li><a href="terms.html">Terms</a></li>
        </ul>
</div>
 
<div class="title"><p>S'Mores S'Mores S'Mores!</p></div>
 
 
<div class="imageBlock1"> <img src="img/mallow.png"></div>
 
 
 
<div class="text1"><p>10 Vanilla S'Mores</p></div>
<div class="info1"><p>
Our version of the traditional American S'More. Ten double crumbly vanilla shortbread biscuits, sealed together with milk choclate and melted marshmallow.</p></div>
 
<div class="buy"> <p>Buy Me</p></div>
 
<div class="price1"> <p>£10.00</p></div>
 
 
 
<div class="imageBlock2"> <img src="img/mallow.png"></div>
 
<div class="text2">10 Milk Chocolate S'Mores</div>
 
<div class="info2"><p>Ten milk chocolate S'Mores filled with white chocolate and melted mallow. Chocolate shortbread, mallow and sweet white chocolate. Hmmm ...</p></div>
 
 
 
<div class="buy2"><p>Buy Me</p></div>
 
 
<div class="price2"><p>£10.00</p></div>
 
 
 
 
 
<!--<div class="imageBlock3"> <img src="img/mallow.png"/></div>
<div class="text3">White &amp Milk Chocolate Dipped Pops</div>
 
<div class="info3"><p>Twelve crispy mallow pops dipped<br> in Milk Chocolate &amp decorated with<br> luscious lines of White Chocolate!*</p></div>
<div class="buy3"><p>Buy Me</p></div>
<div class="price3"><p>&pound10.00</p></div>-->
<div class="nuts"><p>* This product has been made in a kitchen where nuts are used, so its possible this product could contain nut traces.</p></div>
 
<!--<div class="text2">Artisan Mallows &amp Mallow Pops</div> <div class="text3">Marshmallow Cream</div>--></div></body>

CSS

body {font:20px sans-serif; *font-size:small; *font: x-small; line-height:1.22;}
table {font-size:inherit; font:100%;}
select, input, textarea {font:99% sans-serif;}

.introContainer {
margin: 0 auto;
padding:10%;
text-align: left;
}

.IntroCopy {
font-size: 30px;
font-family: 'Amatic SC';
margin:0;
padding:0;
}

.MallowTitle {
font-family: 'Sue Ellen Francisco';
font-size: 50px;
margin:0;
padding:0;
}

.Est {
font-family: 'Sue Ellen Francisco';
font-size: 20px;
margin:0;
padding:0;
}

.navBox {
background-color: #white;
margin:0;
padding:0;
/*margin-top: 10px;
margin-left: auto;
border: 1px solid red;*/
}

.navList ul {
border:1px solid blue; margin;0; padding:0;
}

.navList li {display:inline}

a {display: inline-block;
height: 50px;
font-size: 35px;
font-weight: thin;
font-family: 'Amatic SC';
text-decoration: none;
color: black;
padding:0;
margin-top: 0%;
margin-left:2%;
}
img {height:300px;
width:300px;}
.title {margin-left:7%;
margin-top: 10%;
font-family: 'Sue Ellen Francisco';
font-size: 45px;}
.imageBlock1 {float:left;
height:300px;
width:300px;
margin-top:0;
border:2px solid red;
margin-left:7%;
position:relative;}
.text1 {clear:all;
margin-top:-1%;
text-align: center;
font-family: 'Amatic SC';
font-size: 35px;}
.info1 {text-align:center;
font-family:'Sue Ellen Francisco';
font-size: 30px;
line-height: 55px;}

.buy p {margin-left:7%;
margin-top:2%;
height: 40px;
width: 90px;
background-color: red;
clear:both;
position:relative;}

.buy p {color:white;
text-align: center;
font-family: 'Amatic SC';
font-size: 35px;
text-decoration: bold;}
/*.buy1 {margin-left:7%;
height: 40px;
width: 90px;
background-color: red;
margin-top:0;
}
.buy1 p {color:white;
text-align: center;
font-family: 'Amatic SC';
margin-top: 7%;
font-size: 35px;
text-decoration: bold;}*/

.price1 {height:40px;
width:90px;
background-color: red;
float:left;
position:inline-block;
margin-top:-20px;
margin-left: 7%;}
.price1 p{font-family:'Amatic SC';
color: white;
font-size: 35px;
text-align: center;
margin-top: 0;
text-decoration:bold;}
.imageBlock2 {float:left;
height:300px;
width:300px;
margin-top:50px;
border:2px solid red;
margin-left:7%;
position: inline-block;
clear: both;}

.text2 { clear:all;
margin-top:90px;
text-align:center;
position:relative;
font-family: 'Amatic SC';
font-size: 35px;}
.info2 {font-family: 'Sue Ellen Francisco';
font-size: 30px;
clear:all;
margin-top: 40px;
line-height: 50px;
text-align: center;
}

.buy2 {margin-left:7%;

height: 40px;
width: 90px;
background-color:red;
margin-top:10%;
/*position:relative;*/

}

.buy2 p {color:white;

text-align: center;
font-family: 'Amatic SC';

font-size: 35px;
text-decoration: bold;}

.price2 {height:40px;
width:90px;
background-color: red;
float:left;
position:inline-block;
margin-top:10px;
margin-left: 7%;}
.price2 p{font-family:'Amatic SC';
color: white;
font-size: 35px;
text-align: center;
margin-top: 0;
text-decoration:bold;}

.imageBlock3 {clear:both;
float:left;
height:300px;
width:300px;
margin-top:40px;
border:2px solid red;
margin-left:7%;
position: inline-block;
}
.text3 { margin-top:80px;
clear:all;
text-align:center;
font-family: 'Amatic SC';
font-size: 35px;}

.info3 { font-family: 'Sue Ellen Francisco';
font-size: 30px;
clear:all;
margin-top:20px;
line-height: 55px;
text-align: center;}

.buy3 {margin-left:7%;
clear:all;
height: 40px;
width: 90px;
background-color:red;
margin-top:15%;
position: relative;
}

.buy3 p {color:white;
clear:both;
text-align: center;
font-family: 'Amatic SC';

font-size: 35px;
text-decoration: bold;}

.price3 {height:40px;
width:90px;
background-color: red;
float:left;
position:inline-block;
margin-top:10px;
margin-left: 7%;}
.price3 p{font-family:'Amatic SC';
color: white;
font-size: 35px;
text-align: center;
margin-top: 0;
text-decoration:bold;}

.nuts {clear:both;

float:left;
margin-top: 10px;
font-family: 'Amatic SC';
font-size:20px;}

/* .text2 {clear:all;
margin-top: 90px;
text-align: center;
font-family: 'Amatic SC';
font-size: 35px;
position: inline-block;
/*float: right;*/

/*.text2 {clear:both;
margin-top: 40px;
text-align: center;
font-family: 'Amatic SC';
font-size: 35px;}*/
/*.text2{ clear:both;
margin-top:-1%;
text-align: center;
font-family: 'Amatic SC';
font-size: 35px;
}*/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Details?

I am unable to see any issues (in http://mallowandcrunch.co.uk/two.html) other than the expected when reducing the width. Can you be more specific about what browser sizes trigger your problem and just how do these elements move?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.