2 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 15 weeks 2 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Hi
My web page heading "Coastal Coffee" in the slides appears too small when minimised...I've tried different ways of styling the font and ended up with "style="font-size:3vw;"....is this the best/only way to rectify this?
Thanks for any guidance!
Emma

<!DOCTYPE html>
<html lang="en">
<head>
<title>Coastal Coffee, Whitehead</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body, html {
color: #808080;
font-family: Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 0;
font: 400 15px/1.8 "Lato", sans-serif;
}
@media (max-width: 700px) {
    .row, .navbar {   
        flex-direction: column;
    }
}
.mySlides {display: none}
img {vertical-align: middle;}
 
 
h1{
    font: bold 34px Verdana, sans-serif;
    text-transform: uppercase;
    color: #808080;
}
h2{
    font: bold 24px Verdana, sans-serif;
    text-transform: uppercase;
    color: #808080;
}
 
h4{
    font: bold 12px Verdana, sans-serif;
    text-transform: uppercase;
    color: #fff;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
}
 
li {
   display: inline;
}
 
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
li a:hover, .dropdown:hover .dropbtn {
color: #33ccff; TEXT-DECORATION: none;
    background-color: grey;
 
}
li.dropdown {
    display: inline-block;
}
 
 
/* Slideshow container */
.slideshow-container {
  max-width: 1920px;
  position: relative;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
 
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
 
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
 
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
 
/* Caption text */
.text {
  color: #f2f2f2;
  font: bold 52px Verdana, sans-serif;
  letter-spacing: 3px;
  max-width: 80%;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px #000;
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active, .dot:hover {
  background-color: #717171;
}
 
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
.info {
  margin: auto;
  font-size: 15px;
  width: 70%;
  font-family: Verdana, sans-serif;
  padding: 10px;
}
.location{
  margin: auto;
  font-size: 17px;
  width: 70%;
  color: #808080;
  font-family: Verdana, sans-serif;
}
 
p{
  color: #808080;
  font-family: Verdana, sans-serif;
}
.bgimg {
display: inline-block;
float: left;
background-image: url('icec.jpg');
width: 50%;
padding: 20px;
}
.bgpic {
display: inline-block;
float: right;
background-image: url('dish.jpg');
width: 50%;
padding: 20px;
}
.img-circle {
border-radius: 50%;
margin: 15px;
}
.text-block {
background-color: #000;
color: #fff;
max-width: 100%;
text-align:center;
padding: 20px;
margin: auto;
overflow: auto; 
background: rgba(0, 0, 0, 0.5);
}
.sample {
position: relative;
display: inline-block;
width: 60%;
margin: auto;
overflow: auto; 
}
.footer{
   padding: 20px;
   margin-top: 20px;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #444;
   font-size: 12px;
   color: #fff;
   text-align: center;
   clear: left;
}
</style>
</head>
<body>
<!-- Navbar (sit on top) -->
 
  <div class="bar" id="myNavbar">
    <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#port">Menu</a></li>
  <li><a href="#contact">Contact</a></li>
<li class="fa fa-facebook-official" style="font-size:22px; color:white"></li>
</ul>
  </div>
 
<div class="slideshow-container">
 
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="fishchips.jpg" style="width:100%" alt="Fish and Chips">
  <div class="text" style="font-size:3vw;">Coastal Coffee</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="sandwich.jpg" style="width:100%" alt="Sandwich">
  <div class="text" style="font-size:3vw;">Fresh Sandwiches</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="pizza.jpg" style="width:100%" alt="Pizza">
  <div class="text" style="font-size:3vw;">Daily Specials</div>
</div>
 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
 
</div>
 
<br>
 
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
 
<script>
var slideIndex = 1;
showSlides(slideIndex);
 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>
<div class="info"> 
<h2>Cafe in Whitehead</h2>
                <p>Drop in to sample our Italian roast coffee and fresh sandwiches and salads. 
Or try our tempting range of scones, cupcakes and traybakes. Hot meals are also on the menu including fish and chips, pizza and daily specials.</p> 
<p>We are located just up from the train station in Victoria Avenue in the conservation village of Whitehead.<p>
  <p> We are open 9am - 6pm every day,  9am - 4.30pm on Saturdays, closed Sundays. </p>
 
<p style="text-align: center;"><img src="coffee1.jpg" class="img-circle" alt="Coffee"><img src="cake.jpg" class="img-circle" alt="Cake"><img src="wrap.jpg" class="img-circle" alt="Wrap"></p>      
 
 
<h2>Where We Are</h2><div class="location">
 
                                  <p><i class="fas fa-address-card"> 12 Victoria Avenue, Whitehead, BT38 9QF</i></p>
 
                                    <p><i class="fas fa-phone-square"> Tel 02893 372688</i></p>
 </div>
</div>
<div class="bgimg">
<div class="sample">
  <div class="text-block">
    <h4>Serving Mauds Ice Cream</h4>
</div>
</div>
  </div>
 
 <div class="bgpic"> 
<div class="sample">
  <div class="text-block">
    <h4>Hot Meals and Snacks</h4>
</div>
</div>
  </div>
 
 
<div class="footer">
@2018 - All Rights Reserved. Coastal Coffee
</div>
</body>
</html> 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 35 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9715
Points: 3791

I think I fixed it.

Not thoroughly tested.

Some issues:

Using {position: relative/absolute/fixed;} is nearly always a bad idea. Try to allow natural flow instead.

Using px metrics for most things, think fonts and widths, is a poor practice. Make your metrics relate to your visitors' default settings. Px measures don't let him change sizes to his benefit. In the EU and UK (if you ever get off the pot), an inaccessible site can get you sued.

Likewise, so can a site that doesn't work when javascript is disabled. Bad for SEO too.

Avoid shiny doo-dads until the site is fully functional on bare naked html.

Try using serif fonts for headings. In the larger display sizes, they're more readable and eye catching.

Use your headings to lead sections of the page. Use them in order. h1 is the heading for the page. h2 heads subsections of the page. h3 heads subsections of the h2 sections, etc. You had no h1 (I gave you one). The h2s were ok, but you skipped any h3s and went to h4. But they weren't actually headings and should have been marked as p elements (with appropriate stylings).

Never, and by never I mean not ever, should you use the style attribute within an element. It makes debugging and maintenance a royal pita.

Format your source for easy reading by you. The machine doesn't care, but good formatting will save you a lot of headaches.

<!DOCTYPE html>
 
<html lang="en">
  <head>
    <meta charset="utf-8">
 
    <title>Coastal Coffee, Whitehead</title>
 
    <link rel="stylesheet"
	    href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
	    integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
	    crossorigin="anonymous">
 
    <meta name="viewport"
	    content="width=device-width,initial-scale=1">
 
    <style>
    /*<![CDATA[*/
 
    * { box-sizing: border-box }
 
    body, html { color: #444; font-family: Verdana, sans-serif; text-align:
	center; margin: 0; padding: 0; font: 100%/1.8 "Lato", verdana,
	sans-serif; }
 
    p { font-size: 1em; }
 
    @media (max-width: 700px) {
	.row, .navbar {
	    flex-direction: column;
	}
    }
 
    .mySlides { display: none }
 
    img { vertical-align: middle; }
 
 
    h1 {
	font: 2em serif; text-transform: uppercase; color: #808080;
    }
 
    h2 {
	font: 1.5em serif;
	text-transform: uppercase;
	color: #444;
    }
 
    h4 {
	font: bold 12px Verdana, sans-serif;
	text-transform: uppercase;
	color: #fff;
    }
 
    ul.bar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	text-align: center; }
 
    ul.bar li {
	display: inline;
    }
 
    li a,
    .dropbtn {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
    }
 
    .bar li a:hover,
    .dropdown:hover .dropbtn {
	color: #33ccff;
	text-decoration: none;
	background-color: grey;
    }
 
    li.dropdown {
	display: inline-block;
    }
 
    .slideshow-container {
	max-width: 1920px;
	position: relative;
	margin: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    }
 
    /* Next & previous buttons */
 
    .prev, .next {
	cursor: pointer;
	padding: 16px;
	color: black;
	font-weight: bold;
	font-size: 1.25em;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
    }
 
    /* Position the "next button" to the right */
 
    .next {
	float: right;
	border-radius: 3px 0 0 3px;
    }
 
    .prev {
	float: left;
    }
 
    /* On hover, add a black background color with a little bit see-through */
 
    .prev:hover,
    .next:hover {
	background-color: rgba(0,0,0,0.8);
	color: white;
    }
 
    /* Caption text */
 
    .text {
	color: #f2f2f2;
	font: 3em Verdana, serif;
	letter-spacing: 3px;
	margin: 1rem auto 1.8rem;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px #000;
    }
 
    /* Number text (1/3 etc) */
 
    .numbertext {
	color: #f2f2f2;
	font-size: .75em;
	padding: 8px 12px;
	position: absolute;
	top: 0;
    }
 
    /* The dots/bullets/indicators */
 
    .dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
    }
 
    .active, .dot:hover {
	background-color: #717171;
    }
 
    /* Fading animation */
 
    .fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
    }
 
    @-webkit-keyframes fade {
	from {opacity: .4} to {opacity: 1}
    }
 
    @keyframes fade {
	from {opacity: .4} to {opacity: 1}
    }
 
    /* On smaller screens, decrease text size */
 
    @media only screen and ( max-width: 30em) {
	body {
	    font-size: .75em;
	}
    }
 
    .info {
	margin: auto;
	font-size: 1em;
	width: 70%;
	font-family: Verdana, sans-serif;
	padding: 10px;
    }
 
    .location {
	margin: auto;
	font-size: 1em;
	width: 70%;
	color: #808080;
	font-family: Verdana, sans-serif;
    }
 
    .bgimg {
	display: inline-block;
	float: left;
	background-image: url('icec.jpg');
	width: 50%;
	padding: 20px;
    }
 
    .bgpic {
	display: inline-block;
	float: right;
	background-image: url('dish.jpg');
	width: 50%;
	padding: 20px;
    }
 
    .img-circle {
	border-radius: 50%;
	margin: 15px;
    }
 
    .text-block {
	background-color: #000;
	color: #fff;
	max-width: 100%;
	text-align:center;
	padding: 20px;
	margin: auto;
	overflow: auto;
	background: rgba(0, 0, 0, 0.5);
    }
 
    .sample {
	position: relative;
	display: inline-block;
	width: 60%;
	margin:	auto;
	overflow: auto;
    }
 
 
    .footer {
	padding: 20px;
	margin-top: 20px;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #444;
	font-size: .75em;
	color: #fff;
	text-align: center;
	clear: left;
    }
 
    /*]]>*/
    </style>
  </head>
 
  <body> <!-- Navbar (sit on top) -->
 
    <ul class="bar" id="myNavbar">
      <li><a href="#home">Home</a></li>
 
      <li><a href="#port">Menu</a></li>
 
      <li><a href="#contact">Contact</a></li>
 
      <li class="fa fa-facebook-official"> </li>
    </ul>
 
    <div class="slideshow-container">
      <div class="mySlides fade">
	<div class="numbertext">1 / 3
	</div>
 
	<img src="fishchips.jpg"
		width="100%"
		alt="Fish and Chips">
 
	<h1 class="text">Coastal Coffee</h1>
      </div>
 
      <div class="mySlides fade">
	<div class="numbertext">2 / 3
	</div>
 
	<img src="sandwich.jpg"
		width="100%"
		alt="Sandwich">
 
	<h1 class="text">Fresh Sandwiches</h1>
      </div>
 
      <div class="mySlides fade">
	<div class="numbertext">3 / 3
	</div>
 
	<img src="pizza.jpg"
		width="100%"
		alt="Pizza">
 
	<h1 class="text">Daily Specials</h1>
      </div>
 
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
 
      <a class="next" onclick="plusSlides(1)">&#10095;</a> </div>
 
    <div style="text-align:center">
      <span class="dot"
	      onclick="currentSlide(1)"></span>
      <span class="dot"
	      onclick="currentSlide(2)"></span>
      <span class="dot"
	      onclick="currentSlide(3)"></span>
    </div>
 
    <script> var slideIndex = 1; showSlides(slideIndex);
 
    function plusSlides(n) { showSlides(slideIndex += n); }
 
    function currentSlide(n) { showSlides(slideIndex = n); }
 
    function showSlides(n) { var i; var slides =
       document.getElementsByClassName("mySlides"); var dots =
       document.getElementsByClassName("dot"); if (n > slides.length)
       {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i <
       slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i <
       dots.length; i++) { dots[i].className = dots[i].className.replace("
       active", ""); } slides[slideIndex-1].style.display = "block";
       dots[slideIndex-1].className += " active"; }
    </script>
 
    <div class="info">
      <h2>Cafe in Whitehead</h2>
 
      <p>Drop in to sample our Italian roast coffee and fresh sandwiches and
	salads.  Or try our tempting range of scones, cupcakes and
	traybakes. Hot meals are also on the menu including fish and chips,
	pizza and daily specials.</p>
 
      <p>We are located just up from the train station in Victoria Avenue in the
	conservation village of Whitehead.<p>
 
	<p> We are open 9am - 6pm every day, 9am - 4.30pm on Saturdays, closed
	Sundays. </p>
 
	<p style="text-align: center;">
	  <img src="coffee1.jpg"
		  class="img-circle"
		  alt="Coffee">
 
	  <img src="cake.jpg"
		  class="img-circle"
		  alt="Cake">
 
	  <img src="wrap.jpg"
		  class="img-circle"
		  alt="Wrap"> </p>
 
	  <h2>Where We Are</h2>
 
	  <div class="location">
	    <p><i class="fas fa-address-card"> 12 Victoria Avenue, Whitehead,
	      BT38 9QF</i>
	    </p>
 
	    <p><i class="fas fa-phone-square">
	      Tel 02893 372688</i>
	    </p>
	  </div>
    </div>
 
    <div class="bgimg">
      <div class="sample">
	<div class="text-block">
	  <h4>Serving Mauds Ice Cream</h4>
	</div>
      </div>
    </div>
 
    <div class="bgpic">
      <div class="sample">
	<div class="text-block">
	  <h4>Hot Meals and Snacks</h4>
	</div>
      </div>
    </div>
 
    <p class="footer"> @2018 - All Rights Reserved. Coastal Coffee </p>
  </body>
</html>

gary

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

Emma
Emma's picture
Offline
Enthusiast
Last seen: 15 weeks 2 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Thanks

Thanks for all the information, I had no idea about potentially being sued if the site was not accessible! I thought if it validated then it was accessible (!) I will try altering the code as described,
cheers
Emma