Creating this website was just a little project for me. I've been experimenting with different methods to ensure it's compatible with all devices and fits perfectly on each screen.
Unfortunately, I'm pretty clueless when it comes to @media queries and JavaScript. So, I'm not sure what options are available to me.
Here is the code I am currently using, although I still need to scroll right to see the entire page:
<meta name="viewport" content="width=device-width, initial-scale=0">
<link rel="stylesheet" href="/script/jquery.mobile-1.4.3.css">
<script type="text/javascript" src="/script/jquery.mobile-1.4.3.js"></script>
I'm no HTML expert, just tinkering around and trying to create things.
One solution I'm aware of is reducing the size of my images. However, this may not achieve the appearance I desire.
Also, how can I center my 'Back To Top' button on every page and device?
Javascript:
<script type="text/javascript>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Body Code:
<p style="text-align:center"><a href="#" class="back-to-top">Back to Top</a>
CSS:
.back-to-top {
position: fixed;
bottom: 0px;
right: 44%;
text-decoration: none;
color: transparent;
background-color: rgba(0, 230, 0, 0.10);
font-size: 13px;
padding: 1em;
display: none;
border: 1px solid #CCFF33;
border-radius: 4px;
box-shadow: 0 0 8px 1px #00E600;
color: #C1C1C1;
outline: none;
height: 10px;
width: 180px;
font-weight: 700;
letter-spacing: 2px;
text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;
text-align: center;
}
.back-to-top:hover {
background-color: rgba(255, 0, 0, 0.10);
}