I am new to CSS Grids (and web development in general) and have recently started using CSS Grids, which I find great except for one big problem: none of it seems to work on any mobile devices despite:
- having tried various mobile browsers including Firefox, Chrome, Samsung browser, Safari, UC browser and Baidu browser
- updating all browsers to latest versions
- testing display at all screen sizes by manually reducing size of browser in Firefox and Chrome on PC (displays perfectly at all sizes when testing in this way!)
- testing mobile version using Firefox's built-in mobile screen test feature (also displays perfectly when testing in this way!)
- tried testing on various mobile device models at http://responsivedesignchecker.com/ (all display almost exactly as intended!).
Here is the HTML (please forgive any obvious errors as I am a novice)
<!DOCTYPE HTML>
<html>
<head>
<title>Grid</title>
<meta charset="UTF8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="grid">
<menu>
<div>Home</div>
<div>News</div>
<div>Whitepaper</div>
<div>About</div>
</menu>
<!--HEADER-->
<header>
<h1 class="site-title">Silubium</h1><br>
<span class="motto">The currency of the future</span>
<br><br><br><br><br><br><br><br><br><br>
<div class="buttons">
<img src="images/buttonAndroid.png">
<img src="images/buttonIOS.png">
<img src="images/buttonWindows.png">
<img src="images/buttonLinux.png">
</div>
</header>
<!--CONTENT-->
<intro>
<div class="introText">
<h1 class="contentHeader">Silubium: a currency built for the future</h1>
<p>Silubium is the world's first 4th-generation cryptocurrency and has been designed from the outset to be a consumer currency. Silubium enjoys the advantages of high-level government support for the "one road, one belt" economic development strategy of China and is already being actively implemented by several large enterprises Hong Kong, Macao and elsewhere.
<a href="#">Read More<a>.</p>
</div>
<div class="iframe"><iframe src="iframe.html" height="200" width="400"></iframe></div>
</intro>
<whySilubium>
<h1>Why Silubium?</h1>
<div class="icons">
<div class="icon"><img src="images/icon_1.png"><p class="iconCaption">Designed for the consumer</p></div>
<div class="icon"><img src="images/icon_2.png"><p class="iconCaption">Cutting-edge 4th-generation<br> public ledger</p></div>
<div class="icon"><img src="images/icon_3.png"><p class="iconCaption">Unmatched security features</p></div>
<div class="icon"><img src="images/icon_4.png"><p class="iconCaption">24/7/365 support</p></div>
<div class="icon"><img src="images/icon_5.png"><p class="iconCaption">Designed for stability</p></div>
<div class="icon"><img src="images/icon_6.png"><p class="iconCaption">Globally accepted</p></div>
</div>
</whySilubium>
<!--FOOTER-->
<footer>
<div class="contact">
<div class="footerTitle">Contact Ryker Freegeld</div>
<div class="footerItem">Email: rygeld@silubium.com</div>
<div class="footerItem">Twitter: @Silubium</div>
<div class="footerItem">Youtube: "Silubium" (channel)</div>
</div>
<div class="links">
<div class="footerTitle">Related Links</div>
<div class="footerItem"><a href="djw.top">Silktrader Trading platform</a></div>
<div class="footerItem"><a href="www.silubium.org">www.silubium.org</a> (Chinese promotional site)</div>
</div>
</footer>
<!--COPYRIGHT-->
<div class="copyright">
<div class="copyrightText">Design and coding by <a style="color:white" href="#">Ryker Freegeld</a></div>
</div>
</body>
</div>
</html>
And here is the CSS using CSS Grids code:
/*
THEME: SILUBIUM GRID
AUTHOR: DON HARTIG
VERSION: 1.0
*/
body {background-color:#404040;
font-family:arial;}
menu {height:20px;
display:grid;
grid-template-columns:70% 1fr 1fr 1fr 1fr;
justify-items:end;
}
/*HEADER*/
header {
display:grid;
grid-area:header;
grid-template-columns:1fr;
grid-template-rows:auto;
justify-items:center;
color: white;
background-color:#404040;
background-image:url("images/blueSGbackground.png");
width:100%;
height: 720px;
padding-top:30px;
padding-bottom:100px;}
.site-title {padding-top:150px; font-size:50px;}
.motto { font-size:20px;}
.buttons {
text-align:center;
}
/*CONTENT*/
.contentHeader {
color:white;
display:grid;
justify-items:left;
font-size:40px;
}
intro {
display:grid;
grid-area:content;
color:white;
background-color:#404040;
grid-template-columns:1fr;
grid-template-rows:2fr;
justify-items:;
padding-bottom:0px;
}
whySilubium {display:grid;
grid-template-columns:1fr;
justify-items:center;
color:white;
padding-top:30px;}
.icons {display:grid;
grid-template-columns:1fr;
justify-items:center;
}
.iconCaption {text-align:center; margin-top:0px;}
.icon > img {padding:40px 40px 5px 40px;}
.iframe {display:grid;
justify-items:center;}
/*FOOTER*/
footer {
display:grid;
grid-template-columns:1fr;
grid-template-rows:auto;
grid-area:footer;
background-color:black;
color:white;
justify-items:center;
font-size:14px;
padding:30px;
}
.footerTitle {display:grid;
font-size:30px;
text-decoration:underline;
padding-bottom:20px;}
.footerItems {}
.grid {
grid-template-areas:
". header ."
"h1"
"content"
"footer footer footer"
}
/*COPYRIGHT*/
.copyright {
height:50px;
background-color:blue;}
.copyrightText {display:grid;
justify-items:center;
color:lime;
padding-top:6px;}
/*RESPONSIVE*/
@media only screen and (min-width: 500px) {
header {padding-bottom:;}}
footer {grid-template-columns:1fr 1fr;}
@media only screen and (min-width: 700px) {
intro {grid-template-columns:1fr 1fr;}
.icons {grid-template-columns:1fr 1fr;}}
@media only screen and (min-width: 1000px) {
.icons {grid-template-columns:1fr 1fr 1fr;
grid-column-gap:200px;}}
@media only screen and (min-width: 1200px) {
intro {padding-left:40px;}
.icons {grid-column-gap:300px;}}
@media only screen and (min-width: 1500px) {
header {padding-top:70px;}
.site-title {padding-top:50px;}
.motto {padding-top:0px; padding-bottom:0px;}}
Any help would be greatly appreciated as I am struggling to get this working under a deadline.
Thanks.
