I am practicing with css-grid and media queries. When I add the media query for max-width 768px nothing happens when I shrink the screen to that size and I still see the 4 columns instead of the 2 I am trying to apply.
I am using Visual Studio Code and the live server. I already tried opening the html directly in Finder (I am using mac os), i have refreshed the page and still have the same issue.
Something is overriding that media query when I have a screen size under 768px and when I inspect the file I see these messages below. How can I solve this or what am I doing wrong here?
Very thankful for any help!
body {
background: green;
}
.grid {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 1rem;
}
#media (max-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat (2, auto);
}
}
<body>
<div class="grid">
<div class="item">
<h3>Heading 1</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading 2</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading 3</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading X</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
</div>
</body>
There is a space between the word repeat and the opening bracket. Remove that and all should be OK.
The yellow warning triangle shows that something was wrong with that line.
Related
I have an ion-slides page:
<ion-content padding>
<ion-slides pager="true">
<ion-slide class="step-one">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, massa nam ante. Vel lacus viverra volutpat tortor ligula ornare, varius ut mauris ipsum mus torquent, scelerisque suspendisse penatibus, purus et arcu ipsum vehicula quam luctus. Consectetuer sed urna accumsan. Nec viverra felis varius pretium, volutpat in et cras, odio consectetuer lacinia risus feugiat sit etiam, commodo pulvinar, dolor non et inventore.</p>
<p> </p> <!-- TODO: figure out how to add spacing properly -->
</ion-slide>
<ion-slide class="step-two">
<h1>Heading</h1>
<p>blah, blah</p>
</ion-slide>
<ion-slide class="step-three">
<h1>Heading</h1>
<p>blah, blah</p>
<ion-button (click)='finish()'>FINISH!</ion-button>
</ion-slide>
</ion-slides>
</ion-content>
How can I vertically centre the ion-slide? Currently it sits at the top of the page.
The solution for me was to add this css:
.slides {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100%;
}
I'm pretty new using Onboarding component from Vue Material. I'm looking to use it as a carrousel for photos. I'm trying to implemented on my project but looks a bit messy. Anyone know some documentation a part from the official website?
THANKS
<md-layout md-row md-align="center" md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50">
<md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true" :md-controls="true" md-swipe-distance="50">
<md-board id="slide1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
</md-boards>
</md-layout>
all the Lorem P tags are showed on the same slide (num.1), and the other 3 appears empty.
Looks good (but one sytax error - missing : character before 'md-swipe-distance="50"'.
I think it should work if you:
a.) include all required dependencies (CSS, JS)
b.) initialize Vue with material
Code:
HTML:
<div id="app">
<md-layout md-row md-align="center" md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50">
<md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true" :md-controls="true" :md-swipe-distance="50">
<md-board id="slide1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
</md-boards>
</md-layout>
</div>
JS:
Vue.use(VueMaterial);
new Vue({
el: '#app'
, methods: {
}
});
And include "dependencies";
CSS:
//unpkg.com/vue-material#0.7.4/dist/vue-material.css
//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic
//fonts.googleapis.com/icon?family=Material+Icons
JS:
//unpkg.com/vue#2.2.4
//unpkg.com/vue-material#latest
Codepen to play with it:
https://codepen.io/anon/pen/vZMqEx
Good luck :D
Am trying Bootstrap 3.
2 columns but they are not between gutters.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 box">
<div>
<h3 class="green size-16">Test</h3>
</div><!--first stack-->
<div class="col-md-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tellus cursus, porttitor nisi vitae, laoreet metus. Pellentesque felis sapien, ullamcorper vel massa vel, pharetra efficitur diam.
</div><!--second stack-->
</div><!--first box-->
<div class="col-xs-12 col-sm-6 col-md-6 box">
<div>
<h3 class="green size-16">Test</h3>
</div><!--first stack-->
<div class="col-md-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tellus cursus, porttitor nisi vitae, laoreet metus. Pellentesque felis sapien, ullamcorper vel massa vel, pharetra efficitur diam.
</div><!--second stack-->
</div><!--second box-->
</div>
Bootstrap css in head and js at bottom of the body. I do see the padding showing on inspect element, but all boxes are glued to one another so it looks like all in a box.
I might have overlooked smthing, but I tested on jsfiddle and it showed that it worked correctly. It is strange that on html file, it wasnt working as it should.
help appreciated
One more thing
Even with cheating addition to css: margin: 15px, the col-md-4 boxes becomes 2 columns instead of 3 columns. Is it because of the wrapper being in max-width: 1200px?
Actually, this is correct and it's how Bootstrap is designed. The padding affects the content within the grid divs, not the div themselves. I've tweaked your example and made a bootply (my prefered tool - sorry) http://www.bootply.com/8hj7p5Engy.
The content is nicely "guttered" and padded away from neighbor content, but when you add a background or border to the div, then it looks off.
If you're looking for bordered or colored containers around your content, you should probably look at using a Bootstrap .well or .panel
I've used the previous version of Bootstrap and had no problem with this, but I'm trying with 3.0 and my classes just lie on top of each other rather than floating from keft to right, what am I doing wrong?
I followed this tutorial http://www.w3resource.com/twitter-bootstrap/grid-system-tutorial.php and even copied it across as it was driving me insane, but it didn't even work.
This is my current HTML
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./css/global.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#emproium-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Branding</a>
</div>
<div class="collapse navbar-collapse" id="emproium-navbar-collapse">
<ul class="nav navbar-nav">
<li>Core Collection</li>
<li>Antiques</li>
<li>Art</li>
<li>Furniture</li>
<li class="dropdown">
Home Decor <b class="caret"></b>
<ul class="dropdown-menu">
<li>Rugs</li>
<li>Throws</li>
<li>Quilts</li>
<li>Accent Pillows</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Cart</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="banner span12">
</div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
</div><!-- end of row-->
</div><!-- container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
That's my full code, if anyone could point out what is wrong here i'd be grateful. I'm sure it's pretty simple.
Jonny
span* have been replaced by the col-xs|sm|md|lg-* naming convention. Just looking at your code, that is probably your main issue in migrating to BS3. See http://getbootstrap.com/getting-started/#migration for a full list of what has changed.
I like to add value when I type zen coding. For example, input:text becomes :. How do I make it so that input:text becomes and place keyboard cursor between '' of value property?
#Moon
Here is a trick that I use.
select>option#$*5 // this would give the following HTML <select>
<select>
<option id="1"></option>
<option id="2"></option>
<option id="3"></option>
<option id="4"></option>
<option id="5"></option>
</select>
then, you select the whole <select> block in your text editor.
Then, replace all "<option id" with "<option value".
Cheers :-)
If you ment the value by defining what value should be wrapped (between open and closing tags), then use following pattern
b{this is a bold text}
which results to
<b>this is a bold text</b>
Allthough I'm not aware of the editors and IDE's supporting this feature, but all I can say is it works for IntelliJ and Notepad++.
Adding this table>tr*5>td*5>lorem10
Will generate:
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, aperiam.</td>
<td>Sit eius temporibus optio reprehenderit itaque blanditiis harum consectetur rerum.</td>
<td>Ex, odit, nostrum quia nemo consequuntur quisquam corrupti ipsam quis.</td>
<td>Voluptatibus, cum, aspernatur rem officia recusandae similique saepe praesentium nulla.</td>
<td>Labore, obcaecati iure rerum beatae dignissimos fugit sapiente! Sequi, fugit.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, totam.</td>
<td>Officiis, dolores facilis non vitae eius accusamus consequatur magnam incidunt!</td>
<td>Voluptates repellendus delectus illo facilis at provident unde sint error!</td>
<td>Quibusdam, nisi, reprehenderit incidunt rem a ducimus sint expedita molestias?</td>
<td>Quam, laborum rerum unde quaerat fuga architecto odio voluptatum nemo.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, architecto.</td>
<td>Maiores, voluptatum modi sunt iure aperiam aut quisquam nobis suscipit?</td>
<td>Repellendus, amet vero modi inventore ipsam libero culpa animi debitis.</td>
<td>Earum consequuntur ut totam possimus provident libero ad commodi esse!</td>
<td>Reprehenderit, quo, et laboriosam inventore error quas facilis dignissimos voluptate.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, necessitatibus.</td>
<td>Officiis maxime praesentium repellendus distinctio cum atque aspernatur animi dolorum.</td>
<td>Culpa pariatur quos quis voluptate ratione eos unde accusantium quisquam.</td>
<td>Id possimus nisi sequi nostrum cum pariatur eius vel commodi.</td>
<td>Velit, et, iure incidunt illum culpa cum nihil quidem perferendis.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, ab?</td>
<td>Labore, voluptatem quasi temporibus fugit cumque possimus obcaecati id dolor?</td>
<td>Asperiores hic maiores architecto alias commodi ea in suscipit unde!</td>
<td>Distinctio, quasi reprehenderit tempora ipsa nisi ad ut eaque numquam!</td>
<td>Nobis, illum ex excepturi quaerat mollitia animi vero repellat quam.</td>
</tr>
</table>
As far as I know, you can't - at least not in the default Zen Coding standard. There is at least one project that tries to add values and some rudimentary logic (like looping) to Zen Coding though, see https://github.com/zodoz/jquery-ZenCoding. This is a Javascript implementation, mind.
You can add attributes to tags using the square brackets, so writing input:text[value] would create <input type="text" name="|" id="|" value="|"> — the input with three places for placeholders, two generic, that come with :text and the value attribute which comes from [value].
Something I used once ..
select>option[value=$].gameSize${$x$}*10
will generate
<select name="" id="">
<option value="1" class="gameSize1">1x1</option>
<option value="2" class="gameSize2">2x2</option>
<option value="3" class="gameSize3">3x3</option>
<option value="4" class="gameSize4">4x4</option>
<option value="5" class="gameSize5">5x5</option>
<option value="6" class="gameSize6">6x6</option>
<option value="7" class="gameSize7">7x7</option>
<option value="8" class="gameSize8">8x8</option>
<option value="9" class="gameSize9">9x9</option>
<option value="10" class="gameSize10">10x10</option>
</select>
So, $ would expand to corresponding number...wherever you put it!
I was using Emmet plugin with Sublime Text 2.