I have a piece of bootstrap based code:
<div class="alert alert-primary" style="padding:0.6rem;margin-bottom:0.5rem">
<div style="display:inline-block;font-weight:bold;width:100px;vertical-align:top">Name</div>
<div style="display:inline-block;vertical-align:top">Summary, which is long and will wrap on small screen</div>
<div style="display:inline-block;float:right;vertical-align:top">Date</div>
</div>
which looks like this on laptop screen:
Name Summary... Date
While on phone screen it looks like:
Name
Summary...
Date
i.e. Date is on the 3rd row, and pops out of the background of the "alert" box.
I want it to be this on phone screen:
Name Date
Summary, ....
... ...
i.e. on large screen: name, summary, date, on small screen, name, date, summary.
Is that possible
please try this code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media(max-width: 767px){
.alert.alert-primary{
display: flex;
flex-direction: column;
}
.alert div:nth-child(1){
order: 1;
display: block !important;
}
.alert div:nth-child(2){
order: 3;
display: block !important;
}
.alert div:nth-child(3){
order: 2;
display: block !important;
}
}
</style>
</head>
<body>
<div class="alert alert-primary" style="padding:0.6rem;margin-bottom:0.5rem">
<div style="display:inline-block;font-weight:bold;width:100px;vertical-align:top">Name</div>
<div style="display:inline-block;vertical-align:top">Summary, which is long and will wrap on small screen</div>
<div style="display:inline-block;float:right;vertical-align:top">Date</div>
</div>
</body>
</html>
Related
I've looked at other questions on this website and none of them were similar to my problem, applying flex-direction:row; didnt help, applying all kinds of width's (min-width, max-width) didn't help as well.
Am I using wrong units for styling the items in container?
My goal is for the content to wrap in a new row.
HTML and CSS:
body {
margin: 0;
padding: 0;
background-color: #eeeeee;
}
h1, h5 {
padding: 10px;
margin: 0;
}
.pre-header {
text-align: center;
}
#header-content1-1 {
font-size: 1.15em;
margin: 0;
padding: 0;
}
hr {
margin-top: 20px;
margin-bottom: 3px;
}
.container {
display: flex;
background-color: cornflowerblue;
justify-content:space-between;
max-width: 80%;
margin: auto;
align-items: center;
height: 40vh;
flex-wrap: wrap;
}
.flex-item {
background-color: red;
line-height: 9vh;
width: 13%;
text-align:center;
flex-shrink: 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Find out who was Avicii!">
<link rel="stylesheet" href="style.css">
<title>David</title>
</head>
<body>
<header>
<div class="pre-header">
<h1 id="header-content1">Avicii - Tim Bergling</h1>
<h5 id="header-content1-1">Swedish DJ, remixer, record producer, musician, and songwriter</h5>
</div>
</header>
<main>
<hr>
<div class="container">
<div class="flex-item">E</div>
<div class="flex-item">R</div>
<div class="flex-item">I</div>
<div class="flex-item">N</div>
<div class="flex-item">N</div>
<div class="flex-item">N</div>
<div class="flex-item">N</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
One suggested way as mentioned in comments is having an appropriate width (in your case 22%) so it sums up to 100% some items show up in the next row. One can add margin (like margin: 0% 5%) too to add to the width.
There is one way to do that manually, but you will have to add something similar to breaks in your HTML code. Here is a solution inspired by this.
<div class="container">
<div class="flex-item">E</div>
<div class="flex-item">R</div>
<div class="flex-item">I</div>
<div class="flex-item">N</div>
<div class="flex-item">N</div>
<div class="flex-item break"></div>
<div class="flex-item f2">N</div>
<div class="flex-item f2">N</div>
</div>
.break {
flex-basis: 100%;
height: 0;
}
This uses flex-basis.
Have a look at this codepen for demo.
There is also the option to have add one more level of divs inside your container divs as parents to your flex-item. But overall I would suggest to use the dynamic width and not use these methods as they will only add complexity when your number of boxes are dynamic and will probably require some Js too.
I have a similar case in my project:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper {
display: flex;
width: 600px;
height: 300px;
}
.container {
display: flex;
width: 100%;
}
img {
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="image-wrapper">
<img src="https://placehold.co/200x600">
</div>
<h2>text</h2>
</div>
<div>
test
</div>
</div>
</body>
</html>
I have fixed width container (.container) that sets the height of its children to match its own height (due to align-items: stretch; by default). In one of those containers, I have an image (<img>) that I want to be the same height as its parent (.image-wrapper) while maintaining proportions. In the demo, that happens, but the .image-wrapper width is not updated. At least not always...
Sometimes, the image appears like this (incorrect):
...and sometimes, it appears like this (correct):
I think it has to do with the browser not updating the width of .image-wrapper. In the incorrect scenario, it has a width of 200 (the placeholder image's original size), but after the image is resized down to 100x300 (due to its height: 100% and its parent being 300px while having a natural size of 200x600) the parent's width is not updated to reflect that. It should change from 200 to 100, the image's now resized value.
One weird thing is that if the size is incorrect and you add width: 100% to .image-wrapper in the inspector and then remove it, its width is refreshed and is now displayed correctly.
If you download the snippet and open it in your browser, you should see that the image is displayed incorrectly until you open DevTools and disable cache. After that (because the image takes some time to load I guess), the width is set correctly upon refreshing.
This happens on latest Chrome, Firefox and IE11 on Windows 10. Here's a fiddle too.
Why does that happen? How to fix it?
As is, apparently this is a known bug in Chrome, but to my confusion I am also experiencing this in Firefox...
There is 2 solutions to this:
1)
img{
height: 100%;
width: 100px; /* Set a specific width to your image */
}
2) Apparently removing the image-wrapper div also solves this problem immediately.
.wrapper {
display: flex;
flex-flow: row nowrap;
flex-basis: 600px;
height: 600px;
}
.container {
display: flex;
height: 300px;
}
img {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="container">
<img src="https://placehold.co/200x600">
<h2>text</h2>
</div>
<div>
test
</div>
</div>
</body>
</html>
This might happen when you don't specify explicitly the size of the image; notably, this is a known bug in Chrome.
You can either:
Specify that in either the HTML width attribute, or the CSS width property:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper {
display: flex;
width: 600px;
height: 300px;
}
.container {
display: flex;
width: 100%;
}
img {
height: 100%;
width: 100px; /* 1st solution: you should use fixed width when using CSS */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="image-wrapper">
<img src="https://placehold.co/200x600" width="100"> <!-- 2nd solution -->
</div>
<h2>text</h2>
</div>
<div>
test
</div>
</div>
</body>
</html>
Use JavaScript to set the HTML width attribute to the actual image size at runtime:
// Give your image a proper ID
window.addEventListener('load', function () {
var img = document.getElementById('img');
// This sets the image's HTML width element
// Notice the self-assignment
img.width = img.width;
})
.wrapper {
display: flex;
width: 600px;
height: 300px;
}
.container {
display: flex;
width: 100%;
}
img {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="image-wrapper">
<img src="https://placehold.co/200x600" id='img' />
</div>
<h2>text</h2>
</div>
<div>
test
</div>
</div>
</body>
</html>
I added some div tags to create two columns in a wordpress post. Here is the code I used:
#container {
width:100%;
}
#one {
width:50%;
float:left;
}
#two {
width:50%;
float:right;
}
I added the code above to my style.css file.
When viewed on my webpage everything looks fine. However, when viewed on mobile it looks bad. Code below is what I added to post:
<div id="container">
<div id="one">content here</div>
<div id="two">content here</div>
</div>
What I'd like to do is stack the divs vertically when viewed on a mobile device. Is there a fairly simple way to do this for someone that has limited coding experience?
Thanks
Take a look at media queries.
#media all and (max-width:800px) //800px for tablets and phones.
{
#one, #two
{
display: block;
float: none;
width: 100%;
}
}
Note that this has to go after your code above, unless you make the selectors more specific.
use bootstrap ,its good way
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-6 col-xs-12">content here</div>
<div class="col-md-6 col-xs-12">content here</div>
</div>
update css and add this <meta name="viewport" content="width=device-width, initial-scale=1.0"> on head tag on html
#container {
width:100%;
overflow: hidden;
}
#one {
width:50%;
float:left;
}
#two {
width:50%;
float:right;
}
#media only screen and (max-width: 767px)
{
#one, #two
{
display: block;
float: none;
width: 100%;
padding: 20px 0;
}
}
<div id="container">
<div id="one">content here</div>
<div id="two">content here</div>
</div>
So i have a traditional three column lay-out. The left column is like a toolbox column, the middle column is the "dynamic content" column and the right one is like a summary of data column.
What i want to achieve is that as soon as some responsiveness is going on that the center column will be on top. This will be the most important part of the website and thus should be on top. I cant seem to get this to work with bootstrap. This is my lay-out:
<div class="container">
<!-- Example row of columns -->
<div class="row">
<!-- column: left -->
<div class="col-md-2" id="sidebarleft">left </div>
<!-- column: center-->
<div class="col-md-8" id="main">middle</div>
<!-- column: right -->
<div class="col-md-2" id="sidebarright">right</div>
</div>
</div>
So how would i go about achieving this?
Thanks!
This should do the trick.
So the layout is intact when the browser is using Bootstrap's "md" viewport, however when made smaller (so "sm" and "xs") the middle column is at the top followed by the left and right.
<div class="container">
<!-- Example row of columns -->
<div class="row">
<!-- column: center-->
<div class="col-md-8 col-md-push-2" id="main">middle</div>
<!-- column: left -->
<div class="col-md-2 col-md-pull-8" id="sidebarleft">left </div>
<!-- column: right -->
<div class="col-md-2" id="sidebarright">right</div>
</div>
That's because your HTML is stacking in order of the way it's written.
A good way to achieve this would be to either:
a) Take a dropdown UI approach on the #sidebarleft or, b) Use JS to refactor the layout when responsive. Though, depending how much your site relies on JS, this may not be suitable from a no-js point of view. It would need a fallback. I'm not entire too sure on CSS methods with Bootstrap using the push/pull class selectors.
A jQuery solution would be to store the element ID in a variable and then tell the DOM to remove the element at a certain width. Then, tell it to insertBefore or insertAfter the #sidebarleft element.
var mainContent = $('#main');
var leftSidebar = $('#sidebarleft');
$(window).resize(function() {
if ($(window).width() <= 480) {
mainContent.remove();
mainContent.insertBefore(leftSidebar);
} else if ($(window).width() > 481) {
mainContent.remove();
mainContent.insertAfter(leftSidebar);
}
});
Here's a Pen on the functionality in JS using jQuery.
Resize the screen to less or equal than 480 pixels and watch the main content reorder itself above the sidebar.
I wrote this and worked great for me. The middle column goes to the left on mobile. The 3rd one goes down on tablet.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width: 100%;
max-width: 1140px;
margin: 15px auto;
}
.col {
margin-bottom: 10px
}
.rowone {
width: 75%;
float: left;
}
.rowtwo {
width: 24%;
float: right;
}
.middle {
float: right;
width: 66.6%;
background: #fe8a9e
}
.left {
float: left;
width: 32%;
background: #64c780
}
.right {
float: left;
width: 100%;
background: #4690ec
}
#media (max-width: 860px) {
.rowone, .rowtwo {
width: 100%;
}
.left {
float: right
}
.middle {
float: left
}
.right .module.long {
height: 218px;
}
}
#media (max-width: 500px) {
.col, .rowone, .rowtwo {
width: 100%;
}
.middle {
float: left
}
.left {
float: right
}
.rowtwo {
float: left
}
}
</style>
</head>
<body>
<div class="container">
<div class="rowone">
<div class="col middle">Middle</div>
<div class="col left">Left</div>
</div>
<div class="rowtwo">
<div class="col right">Right</div>
</div>
</div>
</body>
</html>
<div class="sidebar">
<div class="title"></div>
<div class="related"></div>
</div>
<div class="description"></div>
As you can see, there are 2 parent divs, sidebar and description, and 2 child divs within sidebar. I have given css rules for them and looks like this picture below :
Question : how can I make the view like this with those markup without change the markup ? :
*Note : the second will be view if the window's width <= 320px. I have used #media query but the problem is, title and related are within the one parent (sidebar), so it was difficult for me to make them separated and move description in the middle of them.
Thanks
This might not be a smart way, but the code below could be a solution for your problem:
HTML:
<div class="sidebar">
<div class="title"></div>
<div class="description2"> description ...</div>
<div class="related"></div>
</div>
<div class="description"> description ... </div>
CSS:
.description2{
display:none;
}
#media only screen and (max-width: 320px) {
.description{
display:none;
}
.description2{
display:block;
}
}
Hope this helps.
I don't think it can be done keeping the two divs within the sidebar (without using javascript). However you can do it like this which makes more sense to me, as it places the description immediately after the title.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Media query</title>
<style>
.title,
.description,
.related {
background-color: #333;
margin: 5px;
}
#media only screen
and (min-width : 620px) {
.holder {
width: 620px;
}
.title {
float: right;
width: 200px;
height: 200px;
}
.description {
float: left;
width: 400px;
height: 600px;
}
.related {
float: right;
width:200px;
height: 390px;
}
}
</style>
</head>
<body>
<div class="holder">
<div class="title"></div>
<div class="description"></div>
<div class="related"></div>
</div>
</body>
</html>