Materialize grid s12 not working in mobile view or on Chrome's developer tools
Question
I am using materialize to do my styling and grid on the Google Web App that I am working on, but I cannot get the grid to work on mobile devices.
I did put the code suggested on Materialize documentation on my section and as also suggested on this question materialize grid s12 not working in mobile view however it is not working for me.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What could I be doing wrong? My full HTML is
<!DOCTYPE html>
<html>
<head>
<title>Getting started</title>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("css"); ?>
<style>
body, html {
height: 100%;
margin: 0;
background-color: #26A69A;
}
</style>
</head>
<body>
<div class="col s12">
<!-- Preloader -->
<div id='preloader' class="fade col s12"></div>
<!-- End Preloader -->
<div class="title-text col s12" id="startingtitle">
Select Language / Επιλογή Γλώσσας
</div>
<div id="themessage" class="col s12">
<div class="row">
<div class="container divblock">
<div class="col m2 l3 hide-on-small-only"></div>
<div class="col s6 m5 l4">
<a onclick="gettingStarted('EN')"><div class="langselector">
<div class="langselectorcenter">
<img src="<?= flagEN; ?>" class="langselectorimg"> English
</div>
</div></a>
</div>
<div class="col s6 m5 l4">
<a onclick="gettingStarted('EL')"><div class="input-field langselector">
<div class="langselectorcenter">
<img src="<?= flagEL; ?>" class="langselectorimg"> Ελληνικά
</div>
</div></a>
</div>
<div class="col m2 l4 hide-on-small-only"></div>
</div> <!-- closing container -->
</div> <!-- closing row -->
</div> <!-- closing themessage -->
<div class="bottom col s12">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2020-03-28 09:02:38
Simple - you are not using the grid markup correctly. If you follow the guidelines from the documentation, you'll see that responsive grids are made up of three elements, nested in a very particular way:
1. Container
This is the outermost element and everything sits inside it. You can have one per page, or one per section, depending on the design, but very rarely would you have a container inside a row or a col. It's name suggests what it does - it contains the content, ie, sets a maximum width that it can be:
Mobile: 90%
Tablet: 85%
Desktop: 70%
2. Row
Rows sit in containers. They span the container, have a margin bottom for spacing, and are used to group columns.
3. Col
Cols sit inside rows, and these are the actual element that has media query styling to provide responsiveness:
s12 = take up 12 columns (half the space) at all screen widths
s6 = take up 6 columns (half the space) at all screen widths
m6 take up 6 columns (half the space) at tablet width
l6 = take up 6 columns (half the space) at desktop width
You can nest rows inside cols to provide nested grids, but it is very rarely needed - you can use flexbox for spacing inside cols.
The structure is very simple but very specific:
<div class="container">
<div class="row">
<div class="col">
[content goes here]
</div>
<div class="col">
[content goes here]
</div>
</div>
</div>
I have built a codepen here demoing the basics, and added border to each of the element so that you can see how much space each ones takes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.