I have the following base layout, which I now would like to transform into a responsive grid using pure css.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ... -->
</head>
<body>
<div class="pure-g">
<div class="pure-u-1">Navigation</div>
<div class="pure-u-5-24">left space</div>
<div class="pure-u-11-24">content</div>
<div class="pure-u-3-24">ToC</div>
<div class="pure-u-5-24">right space</div>
<div class="pure-u-1">Footer</div>
</div>
</body>
</html>
Unfortunately I have no clue how I can hide e.g. <div class="pure-u-3-24">ToC</div> on a specific breakpoint.
I had a look into the base file pure.css as well as the css containing the classes for the grid grids-responsive.css. There seems to be no such thing as .hidden-*-down class known from Bootstrap. Also I coudn't find any (purecss-) utilities to accomplish this.
How can I accomplish my goal and hide an element on a specific breakpoint using PureCSS?
You can use media queries. ToC will hide under 728px.
#media screen and (max-width:728px){
.pure-u-3-24 {
display:none;
}
}
<div class="pure-g">
<div class="pure-u-1">Navigation</div>
<div class="pure-u-5-24">left space</div>
<div class="pure-u-11-24">content</div>
<div class="pure-u-3-24">ToC</div>
<div class="pure-u-5-24">right space</div>
<div class="pure-u-1">Footer</div>
</div>
First you can add this css to your css files :
/* pure-hidden-md *
#media screen and (max-width:48em) {
.pure-hidden-md {display:none}
}
Now add class "pure-hidden-md" to anywhere:
<div class="pure-u-3-24 pure-hidden-md">ToC</div>
Related
So i created a footer with a green background and added a green backgroun inside a container as you can see on the image. But somehow the length of the green is longer than the other container.
CODE HERE
HTML
CSS
I will suggest put your green class inside container not with container. Check below snippet, you will see the difference.
.green {
background: green;
}
.container {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="green">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-4">4</div>
<div class="col-xs-5">5</div>
</div>
</div>
</div>
I hope this will help.
Looking at your html code it seems that you are using twitter bootstrap framework.
if you want to use the column structure then you should follow the markup standard set by bootstrap
HTML STRUCTURE
<div class="container">
<div class="row">
<div class="col-md-3">
HTML code
</div>
</div>
<div>
don't forget to set the hierarchy as per standards.
checkout the documentation for more details https://getbootstrap.com/docs/4.0/layout/grid/
I am very sorry if my question or codes are confusing to you. I am trying to Position 3 divs, one on the left, two on the right (above and bottom) respectively. I want it to be like the following image:
I am using the following codes, and I can get the icon displayed correctly, but the text "ferrari' and ion-checkbox are not displayed similarly as the image attached below. And the div that contains the text 'Some Icons' is not similarly as the image attached below. At first I thought this is simple task and I tried but cannot make this work. I have been stuck for this. Can any CSS expert help me please?
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<div class="container" style="width:25%;height:25%;display:inline-block;">
<img style="width: 100%;
height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " />
</div>
<div style="width:75%;height:25%;display:inline-block;">
<b style="width:100%;height:50%;">Ferrari</b>
<!-- Will display some icons in it later-->
<div style="width:100%;height:50%;">Some Icons</div>
</div>
<div style="height:25%;width:75%;">
<ion-checkbox>
Please check me and ETC. !!!
</ion-checkbox>
</div>
The Some Icons Box is not displayed because you lost a " at the end of your style attribute.
Have a look at the ionic framework docs to wrap your boxes easy: https://ionicframework.com/docs/v2/components/#grid
You should use Ionic's in built grid system by assigning a row as a container, and within that row, defining columns. You can do something like this..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content >
<div class="row">
<div class= "item item-image col col-25">
<img src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg">
</div>
<div class= "list col col-75">
<div class="item item-text-wrap">
some text here
</div>
<ion-checkbox class="item item-text-wrap item-checkbox-right">
othet text here
</ion-checkbox>
</div>
</ion-content>
</ion-pane>
</body>
</html>
You will need to remove the padding that the rows and columns have by default like so.
/* Styles here */
.row,
.col{
padding:0;
}
Working Example http://play.ionic.io/app/296ddd83faf9
You can use float to align the div side by side. Using display: inline-block; have some small extra space after them so using exact width won't work. You need to remove that space if you want to achieve it using inline-block property. Here is an article that explains how you can do that.
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Or you can use float instead. You need to clear floats that I've done using clearfix css.
.clearfix:after {
display: table;
content: "";
clear: both;
}
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<div class="container clearfix" style="width:25%;height:25%;float:left;">
<img style="width: 100%;
height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " />
</div>
<div class="clearfix" style="width:75%;height:25%;float:left;">
<b style="width:100%;height:50%;">Ferrari</b>
<!-- Will display some icons in it later-->
<div style="width:100%;height:50%;">Some Icons</div>
</div>
<div style="height:25%;width:75%;">
<ion-checkbox>
Please check me and ETC. !!!
</ion-checkbox>
</div>
I have a Wordpress template that uses Bootstrap 2.3.1.
I currently have my two areas set up via an SPAN4 and SPAN8.
The resolution is locked at 1170px, therefore the lg component of Bootstrap is not needed to be configured.
I would like some help with the areas shown in red, as to how to configure my nested columns, so they work properly. They are within an area already defined as Span 8, so in effect, it is an 8 wide grid that needs to be configured to show 3 columns on medium devices, 2 columns on small devices and 1 column on the extra small devices.
I am relatively new to CSS, but have some understanding of basic coding, it's just doing my head in at the moment.
The attached picture show what I am after
My Wordpress layout
I can't seem to get any bootstrap to work with the sizes I would like to display.
I suggest you to use bootstrap version 3
http://getbootstrap.com/css/#grid-responsive-resets
unlike version 2, it has classes like col-lg-* col-md-* col-sm-* col-xs-*, which can get your job done more easily.
trying to understanding your problem.
try the demo code below to see if it's the layout you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#3.3.7/dist/css/bootstrap.css">
<style>
.b {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">aside</div>
<div class="col-xs-8">
main
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12" style="background-color:red;">
dfsasfssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>
</body>
PLUNK to edit
This is probably something very obvious, but I thought bootstrap columns expanded vertically with content. Mine do not.
Bonus question: Was it always default behavior for bootstrap to indent "container" - how do I avoid this?
That's bootstrap normal behavior, because col-*-* is set float:left, so you need to use word-wrap:break-word, because you don't have spaces in your text.
To avoid the indent you mentioned (the default padding that bootstrap add to .container), you can reset by set .container {padding:0}
.col-xs-12 {
background:red; /* demo */
word-wrap: break-word
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
dfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssss
</div>
</div>
</div>
I have a bootstrap website that's setup statically, it doesn't adjust according to different view sizes. So I would like to make it responsive but not sure how. I'm also using LESS to do my modifications and such to the twitter bootstrap css. So far my site is set up like so..
<div id="wrapper">
<header>
<div class="container">
<div class="row">
<div class="span12">
<!-- LOGO HERE -->
</div>
</div>
</div>
</header>
<div id="main-content" class="container">
<div class="row">
<div class="span8">
<!-- My content -->
</div>
<div class="span4">
<!-- My content too -->
</div>
</div>
</div>
</div>
Also, the website was built for 940px so when I make it responsive I want to set the maximum veiw of the page to 940px instead of 1200px and have my div.wrapper still in the center of the page.
Hopefully all this makes sence haha.
To turn on responsive layout, you need to add the following code in the <head> of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
You'll have to adjust your reference to the stylesheet to your specific structure, since you're using the .less source.
In responsive.less comment out or delete the following line:
#import "responsive-1200px-min.less";
This will respond to smaller screen resolutions, but keep your maximum .container width at 940px.
Change .container to .container-fluid and .row to .row-fluid. Take a look at this: http://jsfiddle.net/ypkJQ/. You have to also remember that every .row-fluid class resets span* width counter, that is span* width under .row-fluid is taken from percentage width of parent(.row-fluid).