.small_only {
display: block;
}
.large_only {
display: none;
}
/* === Media Queries === */
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
.small_only {
display: none;
}
.large_only {
display: block;
}
}
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12">
<div class="small_only">
<h1>SMALL</h1>
</div>
<div class="large_only">
<h1>This should only be visible in large windows</h1>
</div>
</div>
</div>
</div>
Problem: The output contains only the word "SMALL" no matter how wide the screen is.
I feel like I'm missing something obvious, but for the life of me I can't figure out what it is.
Don't use // for comments in CSS..
Use /*..*/
http://www.codeply.com/go/uMSHCzymw3
.small_only {
display: block;
}
.large_only {
display: none;
}
/* === Media Queries === */
/* Extra large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.small_only {
display: none;
}
.large_only {
display: block;
}
}
EDIT
Codeply's CSS compiler which uses ACE editor picked it up..
Related
I am using next/image to render my image like this:
<Image
src={imageLink}
width="1920"
height="512"
alt="Hero Image"
/>
This is fine for screen widths above 750px.
How to update the height to "612" when the user visits on mobile or tablet (below 750px screen width)?
Put Image inside div and put the following props on the Image:
<div className="div-class">
<Image src={imageLink} layout="fill" objectFit="cover" />
</div>
The div in this example needs to have position: relative. Now you will be able to give this div any height/width you need with media queries
You create a css class (in your custom.css or anywhere)
Then you define props you need (height, styling etc)
#media (min-width: 576px) {
.custom_class {
max-width: 540px;
}
}
#media (min-width: 768px) {
.custom_class {
max-width: 720px;
}
}
#media (min-width: 992px) {
.custom_class {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.custom_class {
max-width: 1140px;
}
}
put your Image inside div like this and you can change height and width now
<div className='relative h-96 md:h-3/4'>
<Image className='h-full sm:h-64'
src="/static/images/desktop/image-header.jpg" alt="sun"
layout='fill' objectFit='cover' width={400} height={350} />
</div>
In 2023 and with NextJS 13, the Image-API has changed. Working with the new app directory and new naming-convention of NextJS 13, this is what I did to accomplish requested behavior:
// page.jsx
import styles from './page.module.css';
import logo from '../public/logo.png';
export default function Home() {
return (
<div className={styles.logoContainer}>
<Image src={logo} alt='Argo Logo' fill />
</div>
);
}
/* page.module.css */
.logoContainer {
position: relative;
overflow: hidden;
width: 158.57px;
height: 30.93px;
}
#media (max-width: 500px) and (orientation: portrait) {
.logoContainer {
width: 79.285px;
height: 15.465px;
}
}
I have a particle-slider effect for a logo on a site which transitions to a flat logo image file for screen sizes less than 960px. It works fine on Safari and chrome but on Firefox the image stretches out of shape.
Safari/Chrome
Firefox
Do I need to add some specific code for Firefox to make this work?
Here's how I have the code at the moment -
style.css
/* RWD for logo */
#media screen and (max-width: 960px) {
#particle-slider {
display: none;
}
}
#media screen and (min-width: 960px) {
#logo img {
display: none;
}
}
#media screen and (min-width: 320px) and (max-width: 960px) {
#logo {
height: auto;
}
#logo img {
width: 70%;
height: 30%;
position: relative;
top: 50px;
padding-bottom: 50px;
left: 15%;
}
}
/* ----------------------------------------- */
particle-slider.php
<?php /* Template Name: particle-slider */ ?>
<!-- particle-slider template -->
<div id="particle-slider">
<div class="slides">
<div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div>
</div>
<canvas class="draw" style="width: 100%; height: 100%;"></canvas>
</div>
<script type="text/javascript">
var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
</script>
<div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div>
<!-- particle-slider template -->
This has only appeared as an issue after I loaded the front-end files onto a Wordpress CMS (I'm using a HTML5 Blank Child theme), they worked fine as a stand-alone front-end site. How do I fix this?
Try is removing the height: 30% style from the img. I am guessing you want the image to retain its aspect ratio so height: auto might work better?
How can I make an element with class properties display as inline-block for laptops and desktops and a list for tablets and mobiles?
Whenever I shrink the width of my browser, iPad design elements do not fit properly.
.properties {
display: inline-block;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.properties {
display: inline-block;
}
.propertyButton {
display: inline-block;
}
}
#media (max-width: 900px) {
.properties {
display: list-item;
list-style-type: none;
}
.propertyButton {
margin-top: -2%;
margin-left: 30%;
}
}
<div class="propertyWrapper" style="width:100%;">
<div style="float:right">
<span ng-click="addProperty()" class="button buttonPrimary pull-right">Add Property</span>
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>Name</label>
<input type="text" />
</div>
<div class="properties">
<label>
IsRequired(TE):
</label>
<input type="checkbox" ng-model="property.TradeEarthRequired" name="UsedEquipmentPropertyList[0].TradeEarthRequired" class="ng-pristine ng-valid">
</div>
<div class="propertyButton">
<span class="button primaryAction" ng-click="addProperty()">Add</span>
<span class="button primaryAction" ng-click="removeProperty(property,$index)">Delete</span>
</div>
</div>
Sometimes, you just need to duplicate the code.
Keep an inline-block view for windows sized over 1200.
When you are under 1200, just hide it and show a fresh new list ?
I think you've just got your CSS a bit wrong - the media queries shouldn't be nested like that, as far as I can tell. Is this JSFiddle more like what you wanted?
.properties {
display: inline-block;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.properties {
display: inline-block;
}
.propertyButton {
display: inline-block;
}
}
#media screen and (max-width: 900px) {
.properties {
display: list-item;
list-style-type: none;
}
.propertyButton {
margin-top:-2%;
margin-left: 30%;
}
}
I have a row with X possible columns.
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<div class="col-lg-3 col-sm-4 col-xs-6">content</div>
<!-- ... and so on ... -->
</div>
</div>
Now I would like to add margin-top:20px to all small screen columns and the same margin for big screen columns, if there are more than 4 as that would cause two "rows" to be shown and would therefore require some space between.
Is that somehow possible with only the use of CSS?
You can use a media query for whenever you want the top margin..
#media (max-width: 767px) {
.col-xs-6 {
margin-top:20px;
}
}
http://www.bootply.com/126007
P.S. - There is nothing wrong with having the total of .col-* in a .row exceeding 12 (ie: http://getbootstrap.com/css/#grid-example-mixed). It simply causes a wrap. There are several examples in the docs that use this technique. It's generally not ideal for nested rows.
I needed something similar and following is the solution I came up with. Documenting it for future readers (and myself)
$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);
#for $r from 1 through 10{
#each $res-abbr, $res-vals in $res-list{
#media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
#each $dir-abbr, $dir-name in $dir-list{
$x: $r * 5;
.m#{$dir-abbr}-#{$res-abbr}-#{$x}{
margin-#{$dir-name}: #{$x}px;
}
.m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
margin-#{$dir-name}: #{$r}unquote('%');
}
}
}
}
}
This SASS code generates classes along the lines of following
#media (min-width: 0px) and (max-width: 767px) {
.mt-xs-5 { margin-top: 5px; }
.mt-xs-1p { margin-top: 1%; }
.mr-xs-5 { margin-right: 5px; }
.mr-xs-1p { margin-right: 1%; }
.mb-xs-5 { margin-bottom: 5px; }
.mb-xs-1p { margin-bottom: 1%; }
.ml-xs-5 { margin-left: 5px; }
.ml-xs-1p { margin-left: 1%; }
}
So the content editor can use .mt-xs-10 to apply margin-top: 10px to given element on extra-small screen.
I hope it helps somebody.
This is an old post but below is a clean solution.
[class*="col-"] {
margin-bottom: 15px;
}
This works well for some situations but it adds extra, unnecessary margin when it's not needed.
To solve this, we can create a new css class that applies top margin to columns when they get stacked. I create a class named .row-grid
.row.row-grid [class*="col-"] + [class*="col-"] {
margin-top: 15px;
}
#media (min-width: 1200px) {
.row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
margin-top: 0;
}
}
#media (min-width: 992px) {
.row.row-grid [class*="col-md-"] + [class*="col-md-"] {
margin-top: 0;
}
}
#media (min-width: 768px) {
.row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
margin-top: 0;
}
}
I use this simple and clean solution:
.row { margin-top: -15px; }
.row > div { margin-top: 15px; }
In that manner, every <div class='col-*-*'> has 15px margin on top, except those on the first row (or, on mobile, except the one on the top).
This simple solution automatically applies a top margin to all columns except the first, at extra small screen sizes. No special class names or other modifications to HTML or CSS are necessary. (Change the margin-top value below to whatever you prefer.)
#media (max-width: 767px) {
[class*="col-"]:not(:first-child) {
margin-top: 30px;
}
}
I can replace this code with
<div class="row">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
With this, to make it more semantic
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.makeRow();
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
How can I do this with the fluid grid though:
<div class="row-fluid">
<div class="span10">...</div>
<div class="span2">...</div>
</div>
<!-- Less stylesheet -->
.article {
???
.main-section {
.makeColumn(10);
}
.aside {
.makeColumn(2);
}
}
I have tried:
.article { #grid > .fluid(#fluidGridColumnWidth768, #fluidGridGutterWidth768);}
and some variations on it from some related stackoverflow posts but its not getting responsive.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
.article {
.makeFluidRow();
.main-section {
.makeFluidCol(10); //Spans 10 cols
}
.aside {
.makeFluidCol(1,1); //offset by one, spans 1
}
}
Ok, I think I have got it. I am updating the question to add offsets with the fluid layout as this is where I ran into the most trouble.
<div class="article">
<div class="main-section">...</div>
<div class="aside">...</div>
</div>
<!-- Less stylesheet -->
.article {
.main-section {
#grid > .fluid > .offset(2);
#grid > .fluid > .span(8);
}
.aside {
#grid > .fluid > .span(2);
}
}
I found your question looking for a way to use .makeColumn() for responsive grids (1200px, 768px, etc). The .makeColumn() mixin that is including with Bootstrap 2 accounts for only the 940px grid.
To fix it, I just extended the .makeColumn() mixin in a LESS file that loads after the Boostrap files.
// Improve .makeColumn to work with 1200px responsive grid
.makeColumn(#columns: 1, #offset: 0) {
#media (min-width: 1200px) {
margin-left: (#gridColumnWidth1200 * #offset) + (#gridGutterWidth1200 * (#offset - 1)) + (#gridGutterWidth1200 * 2);
width: (#gridColumnWidth1200 * #columns) + (#gridGutterWidth1200 * (#columns - 1));
}
}