Hopefully this image explains exactly what I'm trying to accomplish:
Since the blue block represents a simple list, I think it may be easier to just output the block twice, and apply a "desktop-only" and "mobile-only" class, then use that class to dictate visibility, but I was curious to know if the above is possible with pure HTML/CSS out of box for Bootstrap 3?
This should work:
<div class="row">
<div class="col-md-4">First</div>
<div class="col-md-8" id="big">Big</div>
<div class="col-md-4">Second</div>
</div>
And CSS:
#media (min-width: 769px) {
#big {
float: right;
}
}
Here is an example: http://jsfiddle.net/8r4g20cr/1/
I'm not sure if it possible but from your layout you need something like:
<div class="row">
<div class="col-md-4">
<div class="marron"></div>
<div class="blue"></div>
</div>
<div class="col-md-8">
<div class="green"></div>
</div>
</div>
When you the screen resized, the div in rows will be stacked up orderly. I don't think I can reorder it for mobile devices. Stay tune for other opinions.
Related
This question already has answers here:
Responsive web design is working on desktop but not on mobile device
(4 answers)
Closed 5 years ago.
Good day,
I have a little gallery section on a web page where I make use of a css grid. it works perfectly fine on a normal web browser and when i scale it down i have managed to have it adjust as i wish using Media Queries (one image after the other), To my disappointment this didn't work when viewing on a mobile devise.
This is my first web site i have created so i expected issues. but I am now stuck on this one.
I need the images to arrange themselves below each other on a mobile browser. How would I go about this? see below html & css, the webpage is redneckrebellion.co.za if you want to see what I'm talking about or see https://codepen.io/underlight/pen/eyYLBa.
<content class="main-body">
<div class="main-content">
<div class="portfolio">
<div class="portfolio-item medium-one">
<div class="description">
<h1 class="text">Coffee Table</h1>
<p class="text">Custom Union Jack Coffee Table</p>
</div>
</div>
<div class="portfolio-item medium-two">
<div class="description">
<h1 class="text">Laser Cut Logo</h1>
<p class="text">Redneck Rebellion Laser Cut Logo</p>
</div>
</div>
<div class="portfolio-item wide-one">
<div class="description">
<h1 class="text">Custom Desk</h1>
<p class="text">Custom Desk Built To Clients Design</p>
</div>
</div>
<div class="portfolio-item tall">
<div class="description">
<h1 class="text">Container Cupboard</h1>
<p class="text">Custom Cupboard Built For Lillimex</p>
</div>
</div>
<div class="portfolio-item wide-two">
<div class="description">
<h1 class="text">Custom Shelf</h1>
<p class="text">Custom Shelf Built For Kids Car Themed Bedroom</p>
</div>
</div>
</div>
</div>
thanks!
There are many ways of doing this, and, based on your question, I'm assuming that these divs are being displayed horizontally already? Which means that they are using the display property of inline or inline-block, or, using float already. If you want to have something that will be re-usable (like Bootstrap framework), you can do something like this:
#media screen and (max-width: 480px) {
.medium-one, .medium-two .wide-one .tall .wide-two {
display:block;
}
}
Also, I would highly recommend using a library that is already made for something like this, such as Bootstrap
The simplest way is to surround your .portfolio-item with a media query like this:
#media(min-width: 500px) {
.portfolio-item {
margin: 10px;
box-shadow: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid white;
border-radius: 3%;
}
}
The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
enter code here
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
I have been looking over other questions posted on SO and tried the CSS however I cannot seem to align the "box" HxV within the container.
What is the best way to get it to display HxV responsive?
HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 center-block">
box
</div>
</div>
</div>
Create an class like .centred-col and write an rule like
.centred-col{ float: none; margin:auto;}add this after ur .col classes.
Using .container centers and auto margins your grid to begin with, there should be no need for offsets:
<div class="container">
<div class="row">
<div class="col-xs-12">
box
</div>
</div>
</div>
Note: .col-xs-12 will set your column to the full width after container margins from the XS size to the LG size.
Documentation: Bootstrap CSS Documentation under "Containers".
I am trying to have a centered main content div along with a right sidebar using Bootstrap 3.0.
I have tried the following code to achieve this.
BootPly
But when i resize the browser to shorter width, the sidebar gets pushed down and also the main content get wider. Is this behavior expected of bootstrap ? Do i need to add col-xs* to accommodate the shorter width ?
I am wondering if this is the correct way to achieve this design ?
Thanks !
Yes, it is default behaviour. Bootstrap 3 was built with "mobile first" in mind, so the layout is responsive by default. You can achieve this effect by writing a custom grid and not using the Bootstrap column classes, like col-sm-6 and so on.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content">
Main Content
</div>
<div class="sidebar">
Side bar
</div>
</div>
</div>
</div>
Then write some css. This is just an example, and you should customise to fit your own needs.
.sidebar { width: 33.3%; }
.content { width: 66.6%; }
You can fit two columns on the smallest screen size, but it's unlikely that this is what you are after. On small screens there's very little space for any substantial content to fit into two columns.
<div class="col-xs-6">
Main Content
</div>
<div class="col-xs-6">
Side bar
</div>
You are indeed correct that this is a feature of bootstrap :) You're also correct on using .col-xs-* to achieve your planned design. To add to what you're trying to do, (just in case you haven't tried this already) you can also combine the grid classes in order to accommodate the different screen sizes.
Here's an example:
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
Goodluck! :)
I have a struggle with bootstrap framework.
I want to create a simple box with image on the left side and some text and other elements on the right side. But having issue when it is displayed on small screens.
This is my current code.
<div class="col-md-8" style="margin-top: 3px;">
<div class="feed-box">
<div class="row">
<div class="col-md-1">
<img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250">
</div>
<div class="col-md-11">
<div class="row">
<p>John Doe announced something</p>
</div>
<div class="row">
<p>
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
</p>
</div>
<div class="row">
Comment
Share
</div>
</div>
</div>
</div>
</div>
I will explain it through images:
Desktop (it's fine this padding is not important here):
Small screen (bad):
What I am trying to make (in small screens):
You need to also specify the cols for smaller screens...i.e - you don't need to put in for md
<div class = "row">
<div class = "col-sm-1">
</div>
<div class = "col-sm-11">
</div>
</div>
Use media queries to style the elements for small screen.
For example check this fiddle(resize to see the difference)
CSS used
#media (max-width: 800px){
.feed-box .col-md-1{
float:left;
margin-bottom:8px;
}
.feed-box .col-md-11{
margin-top:15px;
}
}
I have simple 3-column layout based on Twitter Bootstrap. The only problem is, that each column is assembled from block with different heights.
<div class="container">
<div id="blocks" class="row">
<div class="span4">
<div class="block" id="block1">
<div class="block" id="block4">
<div class="block" id="block7">
</div>
<div class="span4">
<div class="block" id="block2">
<div class="block" id="block5">
<div class="block" id="block8">
</div>
<div class="span4">
<div class="block" id="block3">
<div class="block" id="block5">
<div class="block" id="block9">
</div>
</div>
</div>
.
It works quite fine, except for small displays. Then the order of blocks is not sorted.
Is there some way to achieve sorted blocks without any JavaScript?
There is no way to achieve this effect with the 3 column structure. If the blocks were all the same height then you could float:left all the blocks without the columns then they would wrap in order. Since they are not the same size you would have to use a JavaScript such as masonry:
http://masonry.desandro.com/
Its gonna be quite difficult to achieve this, you might wanna play around with single list with float: left; or display: inline-block;
or
you can have 2 set of list with #media inside the css, so depend on the screen size you can show or hide the selected div
css example
#media screen and (min-width: 768px) and (max-width: 1024px) {
.displayFullScreen {display: block;}
.displayMobileScreen {display: none;}
}
#media screen and (max-width: 767px) {
.displayFullScreen {display: none;}
.displayMobileScreen {display: block;}
}
Other way is to use column-count: 3; and column-gap: 10px;. But order is different on wide screen.
Fiddle: https://jsfiddle.net/ksvx2txb/102/