I'm new to HTML5 and CSS3 and developing my first site/app for college. Ideally I need it to display on mobile phone image (which I haven't yet mastered) but for now all I'm trying to do it show flexible box working. As you will see text wraps when I adjust window size but logo remains unchanged. It was suggested that I could set image as background to a div which would adjust according to window size but not sure how to do this.
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<!-- CSS -->
<link rel="stylesheet" href="preposting.css">
<title>Title goes here</title>
</head>
<body>
<div id="container">
<header id="top_header">
<div id="logo">
<img class="logo_image" src="logo.gif" alt="" />
</div>
<div id="welcome">
<h1>Text wraps when I adjust window size but image doesn't. It was suggested that I should set image as background to div and that way it would adjust but not sure how to do this.</h1>
</div>
</header>
</div>
</body>
</html>
#container
{
text-align:left;
border: 10px solid black;
margin: 20px auto;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header
{
border:30px solid green;
padding:20px;
background:yellow;
display:-webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-flex: 1;
}
#img.logo_image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
I see that you are using the old flexible box model: -webkit-box;
the new one is basically only called flex; You would type: display: -webkit-flex;
They have great examples of it here: http://www.w3.org/TR/css3-flexbox/
css:
#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
#media all and (max-width: 600px) {
/* Too narrow to support three columns */
#main { flex-flow: column; }
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0; width: auto;
}
}
Related
I am trying to achieve a layout with multiple elements of different height stacked on mobile screens and some elements forming a sidebar for desktop, roughly looking like this:
My first idea was to achieve it via CSS grid, defining one row with two columns and then assigning the grid-area depending on the class (orange vs gray):
Codepen
.layout {
display: grid;
max-width: 860px;
margin: 0 auto;
gap: 20px;
}
#media(min-width: 860px) {
.layout {
grid-template-areas: 'main sidebar';
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: main;
}
Problem: as multiple sidebar elements now occupy the same grid cell, they overlap instead of just flow on top of each other. I've been trying to wrap my head around alternative solutions for a few days now, but I couldn't find any so far that did not involve reordering the dom with JavaScript. Am I missing the obvious?
EDIT
Flexbox as stated in the answers does not solve this problem (if the position of elements within the list would be known upfront maybe, but this is not the case). Some elements go in the sidebar, some go in the main bar while having a fixed order in the mobile layout.
Use Flexbox, then you can easily do this.
Refer following code,
.layout {
display: flex;
flex-wrap: wrap;
max-width: 860px;
margin: 0 auto;
gap: 20px;
}
set correct order of div (containers) as you need, (the following code is sample one)
<div id="main">
<div style="background-color:coral;" id="myRedDIV"></div>
<div style="background-color:lightblue;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:pink;" id="myPinkDIV"></div>
</div>
#main {
width: 100%;
height: 150px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
}
#main div {
width: 70px;
height: 70px;
}
/* Standard syntax */
div#myRedDIV {order: 1;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 2;}
Refer following links for more about Order in Flexbox
Link1 --> About Flexbox Order
Link2 --> About Flexbox Order
Why don't you try with flexbox. you can do it using display:flex, for more about the flex refer below sample.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
</body>
</html>
This might not be the answer to your question! (cause I've changed the grid layout into FlexBox)
In this example I'm changing flex-direction via screen breakouts.
More Information on CSS Flex box Direction
Code:
* {
border: 1px solid coral;
padding: 12px;
margin: 12px;
}
.layout {
display: flex;
flex-direction: column;
align-items: center;
}
.layout>* {
display: flex;
flex-direction: row;
}
.sidebar {
background-color: yellow;
}
.content {
background-color: grey;
}
#media(max-width: 860px) {
.layout {
display: flex;
flex-direction: column;
align-items: center;
}
.layout>* {
display: flex;
flex-direction: column;
}
.sidebar {
background-color: yellow;
}
.content {
background-color: grey;
}
.content {
background-color: green;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="layout">
<div>
<div class="content big">
Here's some text
</div>
<div class="sidebar small">
Sidebar Item
</div>
</div>
<div>
<div class="content big">
More Text
</div>
<div class="sidebar small">
another sidebar Item
</div>
</div>
</div>
</body>
</html>
I've got an issue on my webpage that involves margins popping up next to flexboxes when the site is viewed on mobile. I've distilled the issue down to some pretty simple code.
HTML Code
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- When you remove this period, issue goes away -->
.
<div class="smallboxes">
<div class="smallbox1">
</div>
<div class="smallbox2">
</div>
</div>
<div class="bigbox">
</div>
</div>
</body>
</html>
CSS code
.container {
display: flex;
height: 100px;
}
.bigbox {
flex: 2;
background-color: #6e6e6e;
display: flex;
}
.smallboxes {
flex: 1;
display: flex;
flex-direction: column;
}
.smallbox1 {
flex: 2;
background-color: #6e6e6e;
}
.smallbox2 {
flex: 1;
}
When you run the code in Chrome, right-click, click "Inspect", view as IPad Pro in horizontal mode and change the view to 75% or 125%. You'll see a white line between the two boxes. This is showing up on my Note 5 as well. There should be no line between the two grey boxes.
As I mention in the code, when you remove the period, the issue goes away.
Thanks a ton for the help!
P.S. I'm new to SO and can't seem to figure out how insert the "run codepen on this code" button. I'm including a link to the codepen version of this as well.
http://codepen.io/jasonhoward64/pen/XMpYXJ
edit: new answer based on comments of author
I've been playing with your Codepen and the problem is because of the use of "Flex: 1". Flex creates the needed space inside your "container". if you give ".bigBox" flex:2; and ".smallBoxes" flex:1; it will divide ".container" into 3 parts where bigBox will take up 2. When you add an item inside the container without giving it a flex-value, it will try to calculate the needed space.
Try placing the dot inside a span or div (or other element) and give it a flex-value. This will solve your problem.
.container {
display: flex;
height: 100px;
background: red
}
.bigbox {
flex: 5;
background-color: #6e6e6e;
display: flex;
}
.testBox {
background: yellow;
flex: 1;
}
.smallboxes {
flex: 3;
display: flex;
flex-direction: column;
}
.smallbox1 {
flex: 2;
background-color: #6e6e6e;
}
.smallbox2 {
flex: 1
}
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- When you remove this period, issue goes away --> <span class="testBox">test</span>
<div class="smallboxes">
<div class="smallbox1">
</div>
<div class="smallbox2">
</div>
</div>
<div class="bigbox">
</div>
</div>
</body>
</html>
You're code works, but when you add margin of 0 to the body, it breaks again. Do you know why?
body {
margin: 0;
}
.container {
display: flex;
height: 100px;
background: red
}
.bigbox {
flex: 5;
background-color: #6e6e6e;
display: flex;
}
.testBox {
background: yellow;
flex: 1;
}
.smallboxes {
flex: 3;
display: flex;
flex-direction: column;
}
.smallbox1 {
flex: 2;
background-color: #6e6e6e;
}
.smallbox2 {
flex: 1
}
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- When you remove this period, issue goes away --> <span class="testBox">test</span>
<div class="smallboxes">
<div class="smallbox1">
</div>
<div class="smallbox2">
</div>
</div>
<div class="bigbox">
</div>
</div>
</body>
</html>
Mobile View
I have upload my desktop and mobile view depective picture. I have given numbers to the div. I want to change the order of div as given in the below image.
Expected Behaviour
Can anyone please help me here to change the order of divs in mobile view?
Use bootstraps visible-xs hidden-xs classes to define html for both desktop and mobile views
You can do that by using media queries and css order property
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div[class^="d"]{
border: 3px solid black;
width: 100px;
height: 80px;
margin: 5px auto;
}
.ld{
border: 0;
width: 100px;
height: 90vh;
display: flex;
flex-wrap: wrap;
text-align: center;
margin: 0 auto;
font-size: 1.5em;
}
#media screen and (max-width:400px){
.d2{
order: 2;
}
.d3{
order: 4;
}
.d4{
order: 1;
}
.d5{
order: 3;
}
.d6{
order: 5;
}
}
</style>
</head>
<body>
<div class="ld">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
</div>
</body>
</html>
I'm having some trouble getting my image to take up no more than 100% of the available width of the parent container. I'm only noticing the issue in Firefox 36 (not IE or Chrome). So is it a firefox bug or am I missing something here?
Note: The image should never be larger than it's original size.
Chrome:
Firefox:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
You need to add min-width:0 on .middleColumn, if you want to allow it to shrink below its min-content width (the intrinsic width of its <img>-child).
Otherwise, it gets the new default min-width:auto, which on a flex item will basically make it refuse to shrink below its shrinkwrapped size.
(Chrome hasn't implemented min-width:auto yet. I'm told IE has, in their next-gen rendering engine, so I'd expect that version should behave like Firefox here -- as will Chrome, once they implement this feature.)
Snippet with that fixed:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexbox {
display:flex;
}
.flexbox .column {
flex:1;
background-color: red;
}
.flexbox .middleColumn {
flex:3;
min-width:0;
}
.flexbox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexbox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
I have to admit that I'm not sure why, but for some reason in Firefox it looks like you have to give the image a width/height (i.e. something other than "auto"). Our old friend 100% seems to do the trick:
.flexbox .middleColumn img {
width: 100%;
height: 100%;
display: block;
}
Here's a fiddle showing the working solution. Note that I changed the side columns to flex:2 to make the result a bit more apparent.
I seem to get this working with the following:
.flexbox {
display:flex;
}
.flexbox .column {
flex:1 1 0;
overflow:hidden;
background-color: red;
}
.flexbox .middleColumn {
flex-grow:3;
flex-shrink:3;
}
.flexbox .middleColumn img {
max-width:100%;
}
setting flex:1 1 0; on all columns sets them to equally grow and do so from the even and miniscule basis of 0px.
You then overide the grow and shrink on .middleColumn
max-width:100%; is needed as per usual
the magic seems to be overflow:hidden; on the item getting flexed.
the other stuff on the image is not needed.
In my experience, the approach is slightly different, maybe strange, but it works. Basically, I fix the max width to the real image width, so it won't pixelate, and use percentage width instead of max-width. If you have, say an <ul> (flex) container, the cells will be:
li{
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
width: 50%; // for example..
img{
display: block;
max-width: [your real img width in px] // instead of 100%;
width:100%; // instead of max-width
}
}
My page width is 960px and I have 3 divs on it in a horizontal manner that collectively take 100% of the width.
When the page width is decreased, I want the divs to be arranged in a vertical manner.
How can I do it in CSS ??
If you don't mind using bootstrap:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
This will create a row with three equal size responsive columns..
In css you can make use of media rules. For example, you can set new CSS styles, if the screen size goes below a certain width. In the case below it's set to use the new css rules once the width goes below 960px.
#media only screen and (max-width: 960px) {
.test-div {
float:none;
}
}
here is a full fiddle: http://jsfiddle.net/pckphv38/
simply resize your browser and see.
Fiddle Here
One simple way of doing it is to toggle the float property using a media query. For body width > 960px, have them float left. Otherwise, let them line up normally as blocks.
div {
width: 33.3333%;
box-sizing: border-box;
float: none;
margin-bottom: 25px;
padding: 25px;
}
span {
display: block;
height: 200px;
background: red;
}
#media (min-width: 960px) {
div {
float: left;
}
}
<div> <span></span>
</div>
<div><span></span>
</div>
<div><span></span>
</div>
create the div for these 3 divs
set the width to 100%
use float: left;
and position:relative; in the css
or you can use bootstrap
http://getbootstrap.com/
First, apply the same class to all the divisions.
<div class="nm">
Then, from How to get browser width using javascript code?, get the width of the screen with
function getWidth() {
if (self.innerHeight) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
And then change it depending on the width.
var value = 400;
if(getWidth() < value){
var foo = document.getElementByClassName("nm");
for(var i=0, j=foo.length; i<j; i++){
foo[i].style.float = "none";
}
}
To break it down:
Have a function get the width of the screen
Run through each element that needs to be changed
Change the CSS to remove the horizontal alignment.
Additionally, if you want to change it whenever the user stretches or pulls the browser, you can create a setInterval loop.
function doInterval(){
var value = 400;
if(getWidth() < value){
var foo = document.getElementByClassName("nm");
for(var i=0, j=foo.length; i<j; i++){
foo[i].style.float = "none";
}
}
}
intv = setInterval(doInterval, 250);
Way to arrange the elements in CSS3
(no effect in IE10 and earlier versions)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<style type='text/css'>
#ctr {
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
.item {
width:100px;
height:100px;
background-color:pink;
margin:2px;
}
#media (min-width: 960px) {
#ctr {
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
}
</style>
</head>
<body>
<div id="ctr">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrap960{
max-width: 960px;
margin: 0 auto;
}
.box{
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
width: 31%;
min-width: 250px;
margin: 1%;
border: 2px solid #f00;
min-height: 200px;
text-align: center;
line-height: 200px;
}
#media only screen and (max-width: 960px) {
.box{
display: block;
margin: 1% auto 0 auto;
}
}
<div class="wrap960">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>