We Keep Coding

vanilla javascript & css image slider not working properly

I have created an image slider with many images using some javascript and css. I just used client width to get the size of the image (which vary slightly) and calculated the translateX distance with a counter variable. Added a css transition in the end. However I can't seem to get the slider to translate the whole image correctly. I don't know why it's going wrong. I have used 'vw' in the calculations for responsiveness. I am new to javascript and would love any tips for other parts for other parts of code as well.
here is the JS fiddle link- https://jsfiddle.net/n6smpv2j/15/
HTML
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider">
<img src="https://loremflickr.com/640/360" id="lastClone" alt="">
<img src="https://picsum.photos/640/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/640/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/640/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/600/400">
<img src="https://fillmurray.com/600/330">
<img src="https://picsum.photos/600/400">
<img src="https://fillmurray.com/600/330">
<img src="https://picsum.photos/600/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/600/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/600/400" id="firstClone" alt="">
</div>
</div>
</div>
JS
const slider = document.querySelector('.slider');
const sliderImages = document.querySelectorAll('.slider img');
const leftbtn = document.querySelector('#left');
const rightbtn = document.querySelector('#right');
let counter = 1;
const size = sliderImages[0].clientWidth;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)';
rightbtn.addEventListener('click', () => {
if (counter >= sliderImages.length - 1) return;
slider.style.transition = "transform 0.4s ease-in";
counter++;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)'
})
leftbtn.addEventListener('click', () => {
if (counter <= 0) return;
slider.style.transition = "transform 0.4s ease-in";
counter--;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)'
})
slider.addEventListener('transitionend', () => {
if (sliderImages[counter].id === "lastClone") {
slider.style.transition = "none";
counter = sliderImages.length - 2;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)'
}
if (sliderImages[counter].id === "firstClone") {
slider.style.transition = "none";
counter = sliderImages.length - counter;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)'
}
})
CSS
#lookbook {
width: 100vw;
height: 100vh;
}
.lookbook-nav {
width: 70vw;
height: 10vh;
margin-left: 15vw;
margin-top: 45vh;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
}
button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
}
.lookbook-nav button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
}
button:hover {
opacity: 0.4;
}
.lookbook {
width: 56vw;
height: 91vh;
margin: auto;
overflow: hidden;
}
.lookbook img {
width: 100%;
height: auto !important;
}
.slider {
margin-top: 10vh;
display: flex;
width: auto;
}

The answer from #DecjazMach solves the most important problem but doesn't cover everything. For example, the solution also still uses the width of the first image to set the width of the visible slider. This will be fine in many cases, but what if the first image is a skinny tall portrait and the rest landscape or vice versa?
#Laiqa Mohid also welcomed any other suggestions so here are some which come out of trying to simplify things, for example minimising the calculation needed in the JS and the 'work' the system has to do on a click.
You can try it here http://bayeuxtapestry.rgspaces.org.uk/slider
Notes:
The size of the visible portion of the slider is not dependent on the dimensions of the first image
imgs have been replaced with divs + background-image so that different sizes/aspect ratios can be accommodated without any need for javascript calculation - this automatically helps responsiveness
these divs are all of the same dimensions so the amount the slider needs to move does not depend on the size of the image
images that do not fill the whole width (because they are too tall relatively) will be centred
images are also centred vertically. This can be changed if required (e.g. to align to the top of the slider) by changing the background-position in .slider div
Using a transform:translateX works but requires a calculation in the Javascript. We can use CSS animation instead and need only move the currently visible slide and the one that is to be shown next.
The image serving services sometimes did not serve an image so I have used my own - deliberately of different sizes and aspect ratios (including portrait)
Using this method it is possible to have a continuous slider - showing the first slide if the user clicks past the last one.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8">
<style>
#lookbook {
width: 100vw;
height: 100vh;
margin:0;
padding:0;
overflow:hidden;
}
.lookbook-nav {
width: 70vw;
height: 10vh;
margin-left: 15vw;
margin-top: 45vh;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
}
button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
}
.lookbook-nav button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
}
button:hover {
opacity: 0.4;
}
div .lookbook {
width: 56vw;
}
.lookbook {
height: 91vh;
margin: auto;
overflow: hidden;
}
div.slider{
margin:0;
margin-top: 10vh;
height:81vh;/* this is height of (lookbook - margin-top) - probably better done through flex */
position:relative;
top:0;
padding:0;
width:100%;
}
#keyframes slideouttoleft {
from {
left: 0;
visibility:visible;
}
to {
left: -100%;
visibility:hidden;
}
}
#keyframes slideinfromright {
from {
left: 100%;
visibility:visible;
}
to {
left: 0;
visibility:visible;
}
}
#keyframes slideouttoright {
from {
left: 0;
visibility:visible;
}
to {
left: 100%;
visibility:hidden;
}
}
#keyframes slideinfromleft {
from {
left: -100%;
visibility:visible;
}
to {
left: 0;
visibility:visible;
}
}
.slider div {
position:absolute;
top:0;
left:0;
overflow:hidden;
visibility:hidden;
margin: 0;
padding: 0;
width:100%;
height:100%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat no-repeat;
animation-duration: 0.4s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider">
<!-- images taken from Reading (UK) Museum's Victorian copy of the Bayeux Tapestry -->
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/boat-and-horses-768x546.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/two-horses-300x212.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/woman-and-child-1200x901.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/archer-2-768x1100.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/boat-builder-2-878x1024.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/group-1-768x603.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/pointing-horseman-768x853.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/group-2-768x619.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/carrying-casket-768x556.png);"></div>
</div>
</div>
</div>
<script>
const slider = document.querySelector('.slider');
const sliderImages = document.querySelectorAll('.slider div');
const leftbtn = document.querySelector('#left');
const rightbtn = document.querySelector('#right');
const numImgs=sliderImages.length;
let curImg = 0;
rightbtn.addEventListener('click', () => {
sliderImages[curImg].style.animationName='slideouttoleft';
curImg=(curImg+1)%numImgs;
sliderImages[curImg].style.animationName='slideinfromright';
})
leftbtn.addEventListener('click', () => {
sliderImages[curImg].style.animationName='slideouttoright';
curImg=curImg==0? numImgs-1 : Math.abs((curImg-1)%numImgs);
sliderImages[curImg].style.animationName='slideinfromleft';
})
function initialize() {
sliderImages[0].style.animationName='slideinfromright';
}
window.onload=initialize;
</script>
</body>
</html>

That is because the size is being calculated in pixels as you can see here. So to get the width in vw you can use the following function as
const size = vw(sliderImages[0].clientWidth);
function vw(v) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
return (v * w) / 100;
}

For some reason, the images loaded from that source didn't work so I downloaded them locally and they did work and I've done some modification to your CSS as well.
var slider = document.getElementById("slider");
var slides = slider.childElementCount;
var i = 0;
document.getElementById("right").addEventListener("click", function () {
i == slides - 1 ? (i = 0) : i++;
slider.style.transform = "translate(-" + 600 * i + "px)";
});
body {
background-color: aqua;
}
#lookbook {
position: relative;
box-sizing: content-box;
height: auto;
max-width: 600px;
margin: auto;
}
.lookbook-nav {
position: absolute;
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
}
button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
cursor: pointer;
}
.lookbook-nav button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
color: beige;
z-index: 2;
}
button:hover {
opacity: 0.4;
}
.lookbook {
width: auto;
height: 91vh;
margin: auto;
overflow: hidden;
}
.lookbook img {
width: 600px;
height: auto !important;
}
.slider {
margin-top: 10vh;
display: flex;
/* align-items: flex-end; */
width: auto;
/* height: 700px; */
transition: 0.5s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slider</title>
</head>
<body>
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider" id="slider">
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
</div>
</div>
</div>
</body>
</html>
I just made one navigation arrow work but should be the same thing just in reverse order also you don't have to worry about the counter as it will detect how many images you have inside the slider.

How do I create a fixed amount of space between a responsive image and an element below?

I have a responsive slider with elements below. I've tried using margin-top on the element below and margin-bottom on the image. In both cases, when the view-port reduces, the image and the other elements part company...ie the gap widens. I've tried px, vw and vh as the unit for the margin.
Is there a technique to resolve this?
The code is:
<div id="slider">
<div class="container">
<div>
<img class="slider_img" src="images/hands-coffee-cup-apple_1920x965.jpg"/>
</div>
<div>
<img class="slider_img" src="images/macbook-apple-imac-computer-39284_1920x965.jpg"/>
</div>
<div>
<img class="slider_img" src="images/ipad-tablet-technology-touch_1920x965.jpg"/>
</div>
</div>
</div>
<div class="promises_hdr">Our promise to you</div>
<div class="promises">
<div class="promise">
<img class="promise_img" src="images/iconfinder_ecommerce.png"/>
<div class="promise_hdr">Get Noticed, Get Customers</div>
<div class="promise_txt">
<p>The progression from the Get Noticed Online step to the Create Customer step goes through 2 other stages. These are Convert and Close. Inward Marketing: webThemes understands.</p>
</div>
</div>
#slider{
width:100%;
height: 100vh;
position: relative;
}
.container {
max-width: 100%;
height: 100%;
margin: auto;
position: absolute;
}
.container div {
display: inline-block;
width: 100%;
height: 940px;
display: none;
}
.slider_img {
width: 100%;
height: auto;
z-index: -1;
}
.promises_hdr {
font-family: "Century Gothic", Sans-serif;
font-size: 2.3em;
color: #0150E2;
position: relative;
text-align: center;
margin-top: 4vw;
}
$( document ).ready(function() {
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 4000);
});

Try to use % value for the margin as well. It's the most confident way to resolve many problems in CSS, especially in tweaking site's responsiveness.

Why don't images load on mobile?

So when it comes to loading the page on mobile devices, images start loading but they fail to load completely. I have already tried to preload the images before the page is displayed, but it still fails to load. I also tried to minimize the amount of images, but even with one image it fails to load. The images are also compressed, so size is not the issue with loading. Sometimes when the page is refreshed, the images load; however, other times they don't. Is this an ios/browser issue? Possibly something with css? Maybe too much going on at once?
By the way, the images load fine locally, but on the live site, the loading issue persists. Could it be the hosting service?
HERE IS THE LIVE PAGE (loads fine on desktop but not mobile)
http://thelittlepenguinshop.com/shop.php
All help is appreciated.
<?php
include 'db/connect.php';
?>
<!DOCTYPE html>
<html>
<head>
<?php include 'includes/head.php' ?>
</head>
<script type="text/javascript">
var imgs = [
"img/shopView/IMG_1932.jpg",
"img/shopView/DSCF2657.jpg",
"img/shopView/DSCF2655.jpg",
"img/shopView/DSCF2654.jpg",
"img/shopView/DSCF2652.jpg",
"img/shopView/DSCF2647.jpg",
"img/shopView/DSCF2645.jpg",
"img/shopView/DSCF2643.jpg",
"img/shopView/DSCF2641.jpg",
"img/shopView/DSCF2639.jpg",
"img/shopView/DSCF2637.jpg",
"img/shopView/DSCF2635.jpg",
"img/shopView/DSCF2633.jpg",
"img/shopView/DSCF2628.jpg",
"img/shopView/DSCF2627.jpg",
"img/shopView/DSCF2624.jpg",
"img/shopView/DSCF2623.jpg",
"img/shopView/DSCF2619.jpg",
"img/shopView/DSCF2618.jpg",
"img/shopView/DSCF2615.jpg",
"img/shopView/DSCF2610.jpg",
"img/shopView/DSCF2608.jpg",
"img/shopView/DSCF2606.jpg",
"img/shopView/DSCF2602.jpg",
"img/shopView/DSCF2600.jpg",
"img/shopView/DSCF2598.jpg",
"img/shopView/DSCF2594.jpg",
"img/shopView/DSCF2591.jpg",
"img/shopView/DSCF2589.jpg",
"img/shopView/DSCF2587.jpg",
"img/shopView/DSCF2584.jpg",
"img/shopView/DSCF2580.jpg",
"img/shopView/cELSM.jpg",
"img/shopView/cBae.jpg",
]
function preload(all_imgs) {
$(all_imgs).each(function() {
$("<img/>")[0].src = this;
});
}
preload(imgs);
</script>
<body>
<?php include 'includes/body-internals/mainnav.php' ?>
<input type="hidden" class="activeCheck" id="shop">
<div id='sh-ul-wrap' class='card'>
<div id="sh-ul">
<?php
$start_from = 1;
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * 12;
$sql = "SELECT * FROM items LIMIT $start_from, 12";
if ($result = $db->query($sql)) {
if ($count = $result->num_rows) {
while($row = $result->fetch_object()) {
echo '
<div class="li">
<a href="itempage.php?item_id=', $row->item_id, '">
<div class="sh-it-wrap">
<div class="sh-it-names">', $row->item_name, ' <span style="font-weight:300"> | ', $row->item_type, '</span></div>
<div class="sh-it-prices">$', $row->item_price, '</div>
<img src="img/shopView/', $row->item_img, '">
</div>
</a>
</div>
';
}
$result->free();
}
}
?>
</div>
</div>
<div id='shop_pg_num'>
<ul class='card'>
</ul>
</div>
<?php include 'includes/body-internals/footer.php' ?>
</body>
<script type="text/javascript">
//keeps the list within the widths of 500 and 950 pixels
$(document).ready(function() {
function sh_ul_wrap_width() {
$('#sh-ul-wrap').css('width', '950');
if (window.innerWidth >= 1500) {
$('#sh-ul-wrap').css('width', '950');
} else if (window.innerWidth <= 500) {
$('#sh-ul-wrap').css('width', '500');
}
$('.sh-it-wrap').css('height', String($('.sh-it-wrap img').height()));
}
setInterval(sh_ul_wrap_width, 500);
//displays number of pages based on how many items are in the database
function num_pages() {
var x = '<?php $v = $db->query("SELECT * FROM items"); $count = $v->num_rows; echo $count; ?>';
var num_pages = Math.ceil(x / 12);
for (var i = 1; i <= num_pages; i++) {
$('#shop_pg_num ul').append(
'<li>' + String(i) + '</li>'
);
}
}
num_pages();
});
</script>
</html>
HERE IS THE CSS
#sh-ul-wrap {
width: 950px;
margin: 0 auto;
}
#media only screen and (max-width: 1000px) {
#sh-ul-wrap {
width: 90vw;
}
}
#sh-ul {
position: relative;
width: 100%;
display: block;
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
/*large screen DEFAULT 4 items per row*/
#sh-ul .li {
width: 25%;
float: left;
padding: 0;
margin: 0;
text-align: center;
margin: 10px 0;
}
#sh-ul .li a {
color: white;
text-decoration: none;
transistion: 0.2s ease color;
}
#sh-ul .li a:hover {
color: #60DFE5;
}
/*#sh-ul .li > span {
display: block;
}*/
.sh-it-wrap {
margin: 0 auto;
width: 200px;
position: relative;
}
.sh-it-wrap img {
height: 100%;
width: 100%;
}
.sh-it-names {
width: 100%;
background-color: rgba(0,0,0,0.6);
position: absolute;
bottom: 0;
line-height: 50px;
font-size: 15px;
}
.sh-it-prices {
width: 50px;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
right: 0;
font-size: 25px;
line-height: 50px;
}
/*medium screen causes 3 items per row*/
#media only screen and (max-width: 1500px) {
#sh-ul .li {
width: 33.3%;
}
}
/*small screen causes 2 items per row*/
#media only screen and (max-width: 1000px) {
#sh-ul .li {
width: 50%;
}
.sh-it-wrap {
width: 75%;
}
}
#shop_pg_num {
text-align: center;
}
#shop_pg_num ul {
list-style-type: none;
padding: 10px;
margin-top: 10px;
border: 0;
display: inline-block;
}
#shop_pg_num ul li {
text-align: center;
font-size: 20px;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
FIXED (our stupidity)
We fixed the issue. There was some old code that made the page responsive that was somehow messing up the styling for the images. We got rid of that old code and now it is working beautifully now. Thanks for all the help :)

try this in your css file
#media only screen and (max-device-width: 480px) {
// css for image here.
}
if you want to know more specific. Share your code!.

Bootstrap + jQuery: Resizing diagram based on screen width

I made a diagram that changes its size based on the screen width (recreated (poorly) in the fiddle), but when I use this code on my page, the final circle/glyph falls to the following line when I decrease the screen width, when it should stay on the same line (as in the fiddle).
My fiddle
Here's my code:
html
<div class="glyphicon-belt">
<div id="rectangle"></div>
<div class="container circle-container circle-1">
<i class="icon-steak" style="font-size: 60px"></i>
</div>
<div class="container circle-container circle-2">
<i class="icon-brain" style="font-size: 60px"></i>
</div>
<div class="container circle-container circle-3">
<i class="icon-happy" style="font-size: 60px"></i>
</div>
</div>
css
.circle-container {
background-color: #FDA220;
width: 100px;
height: 100px;
border-radius: 100px;
text-align: center;
display: inline-block;
line-height: 100px;
margin-top: -60px;
}
.glyphicon-belt {
width: 50%;
left: 25%;
position: absolute;
text-align: center;
margin-top: 100px;
// background-color: black;
}
#rectangle {
width: 80%;
margin-left: 10%;
height: 20px;
background: #E7292A;
}
.circle-1 {
margin-right: 26%;
}
.circle-2 {
margin-right: 26%;
}
.circle-3 {
// margin-right: -5%;
}
.glyph-connect {
// left-margin: 25%;
text-align: center;
padding: 0px;
background-color: black;
}
jQuery
var screen = $(window).width();
var fontRatio = 60 / screen;
var circleRatio = 100 / screen;
var barRatio = 20 / screen;
$(window).on('resize', function() {
var screen = $(window).width();
var fontSize = screen * fontRatio;
var circleSize = screen * circleRatio;
var lineHeight = circleSize + "px";
var barHeight = screen * barRatio
$(".icon-steak").css("font-size", fontSize);
$(".icon-brain").css("font-size", fontSize);
$(".icon-happy").css("font-size", fontSize);
$(".circle-container").css("width", circleSize);
$(".circle-container").css("height", circleSize);
$(".circle-container").css("line-height", lineHeight);
$("#rectangle").css("height", barHeight);
});

If I understand your question right and playing around with it, it looks like you need to fix the circle-3:
.circle-3 {
margin-right: 1%;
}
Not sure why you had it commented out, but that it seems to fix the problem when you uncomment it and play with the %'s.

Vertically align sans-serif font precisely using jquery/css

I'm trying to align a sans-serif headline precisely with menu elements in other div-Elements, so basically this:
Header
A B C
where A is aligned to the left end of the Header and C to the right end. I use float to distribute the -Elements and I compute the font-size to fit the header into the div width. The problem is that I use a sans-serif font. The problem is demonstrated in a fiddle
http://jsfiddle.net/ksuTQ/2/
<div id="Hideheader" class="Header" style="position: absolute;font-size:40pt;padding:0px;visibility: hidden;width:auto;height:auto;">HEADER</div>
<div id="header" class="Header">HEADER</div>
<div id="menubar" class="menubar">
<div class="menubutton_left">A
</div>
<div class="menubutton_middle">B
</div>
<div class="menubutton_right">C
</div> <span class="stretch"></span>
</div>
jscript
resizeHead("#Hideheader", "#header");
function resizeHead(p1, p2) {
var fontsize = parseFloat($(p1).css("font-size"));
var spacing = parseFloat($(p1).css("letter-spacing"));
var initWidth = $(p1).width();
initWidth = initWidth - spacing;
var outWidth = $(p2).width();
var s = outWidth / initWidth;
s = fontsize * s;
$(p2).css({
"font-size": s
});
}
CSS
div.Header {
font-family:sans-serif;
text-align:justify;
white-space: nowrap;
}
div.menubar {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
margin-bottom: 0px;
position: relative;
}
div.menubutton_left, div.menubutton_middle, div.menubutton_right {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
width:60px;
}
div.menubutton_left {
}
div.menubutton_middle {
text-align: center;
}
div.menubutton_right {
text-align: right;
}
.stretch {
border: 2px dashed #444;
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
How do I align the beginning of the A with the H of the header for a sans-serif font?

You can add margin-left:12px to left menubutton div.
See the Demo