I have a simple bootstrap layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="upper"></div>
</div>
<div class="col-sm-4">
<div class="lower"></div>
</div>
</div>
</div>
css
.upper {
height: 100%;
width: 100%;
}
.lower {
height: 100%;
width: 100%;
}
if the screen is sm, the upper div will be ontop and the other below it. Each filling 100% width and height. However, it'd like upper to only have a 80% height if the screen is sm. Are there some way to work this out in bootstrap? Or some other smart way with jquery perhaps.
you can add xs class in each div after sm or you can do it with media query also
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-xs-8">
<div class="upper"></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="lower"></div>
</div>
</div>
</div>
or
#media only screen and (max-width: 768px) {
.upper {
height: 80%;
width: 80%;
}
.lower {
height: 80%;
width: 80%;
}
}
You could do this with a responsive CSS media query:
#media (min-width: 768px) {
.upper {
height: 80%;
}
}
This would sort of make sense with your existing CSS, as Bootstrap favors a mobile-first approach to development. Your existing CSS rule for .upper would kick in for extra-small (xs) viewports only, and when the viewport is stretched out (to small/sm), this rule would overwrite your xs rule.
Related
I have no idea why this is such a struggle. I want to place an image inside a container. That image should be responsive, meaning when the column gets smaller in width, the image should also get smaller. It does that now, but it maintains the height, meaning it will look stretched.
https://codepen.io/anon/pen/vmZKyM
<div class="container-fluid">
<div class="col-md-8 offset-md-2">
<div class="row">
<div class="col-md-4 offset-md-2">
<div class="row">
<p>Left column</p>
<img src="http://placehold.it/600x400" />
</div>
</div>
<div class="col-md-5 offset-md-1">
<div class="row">
<p>Right column</p>
<img src="http://placehold.it/700x400" />
</div>
</div>
</div>
</div>
</div>
I do not know the aspect ratio of the image (in this case I do), so I cannot achieve this with the padding-bottom trick (normally used for images).
How can I achieve this?
change max-width: 100%; to width: 100%; also change height: auto; to height: 100%;
If the container should have a fixed height, then give it an ID (or a class) and change the .img-responsive restrictions the other way around eg
.container {
height: 600px;
}
/*And then change */
.container .img-responsive {
display: block;
height: auto;
max-width: 100%;
}
/*To */
.container .img-responsive {
display: block;
width: auto;
max-height: 100%;
}
Not sure how it will work with a mix of orientations but if they are floated it shouldnt really matter
I'm using inline-block to create an image gallery, with each image having its own div and width. I'm having a problem when I resize the page, the images adjust to the screen width, which is good, but by the time I get down to around 400px (the mobile area), the images become extremely too small.
How can I ensure that the images maintain a good size regardless of the screen width?
* {
box-sizing:border-box;
}
.container {
width:80%;
}
section.portfolio {
background:
}
section.portfolio .col {
background:;
width:23.3%;
padding:10px;
margin: 5%;
display:inline-block;
vertical-align:top;
}
section.portfolio .col img {
display:inline-block;
vertical-align:top;
}
img {
max-width:100%;
height: auto;
width: auto;
}
<section class="portfolio">
<div class="container">
<div class="col">
<img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
</div>
<div class="col">
<img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
</div>
<div class="col">
<img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
</div>
</div>
</section>
You can use media queries and set a width of 300px (or whatever you prefer)
#media screen and (min-width:320px) and (max-width: 480px) {
section.portfolio .col {
width:300px;
}
}
pen is here
Also refer to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ for various mobile dimension
Give position:relative to your parent div, and position:absolute to child element, use code like:
<div class="col" style="position:relative">
<img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg" style="position:absolute">
</div>
This might solve your problem.
I got a little bootstrap problem.
I print a few elements with angular (ng repeat) and the containers adjust their height the height of the images..
View of my recipes
Code:
<div class="row text-center">
<div class="col-lg-3 col-md-12 col-sm-12" ng-repeat="recipe in purchasedRecipes">
<a href="{{recipe.PdfUrl}}" target="blank">
<div class="thumbnail">
<img src="{{recipe.ImgUrl}}" alt=""/>
<div class="caption">
<h3>{{recipe.RecipeName}}</h3>
</div>
</div>
</a>
</div>
</div>
The width is easy to assign with bootstrap (class="col-lg-3 col-md-12 col-sm-12") How can I assign a fixed responsive height, so that my recipes are same size row for row ?
Thanks for helping :)
See here. Top three is:
matchHeight.js
matchHeight.js Docs
matchHeight.js GitHub
Use tables
The example that they gave:
#media only screen and (min-width : 768px) {
.is-table-row {
display: table;
}
.is-table-row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
}
Huge negative margin and positive padding
Their code:
.row.match-my-cols {
overflow: hidden;
}
.row.match-my-cols [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
I have a design where I have 3 divs.
On desktop mode - 2 divs are in the same row, and on mobile mode each of them is a full row, but the order needs to change.
For example this is my HTML (using foundation CSS):
<div class="row">
<div class="mobile-first small-12 large-8 columns">FIRST</div>
<div class="mobile-last small-12 large-4 columns">LAST</div>
</div>
<div class="row">
<div class="mobile-middle large-12 small-12">MIDDLE</div>
</div>
What needs to happen when I am on mobile screen is that the "LAST" div will go last, even though it is part of the first row.
Is it possible without duplicating the HTML, using JS or using strange float that will act strange on some devices?
This is the fiddle I've made:
Fiddle
You can wrap mobile-first and mobile-middle divs into an additional column. Then apply negative margin-right to the mobile-middle div on the wide screen.
Please check the result:
1) Bootstrap
https://jsfiddle.net/glebkema/ss8zbf6z/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.container {
margin: 0 auto;
max-width: 500px;
}
[class|="mobile"] {
height: 100px;
}
.mobile-first { background-color: blue; }
.mobile-last { background-color: red; }
.mobile-middle { background-color: green; }
#media (min-width: 992px) {
.mobile-middle {
margin-right: -33.33333333% !important;
width: 150% !important;
}
}
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="mobile-first col-xs-12">FIRST</div>
<div class="mobile-middle col-xs-12">MIDDLE</div>
</div>
</div>
<div class="mobile-last col-md-4">LAST</div>
</div>
</div>
2) Foundation
https://jsfiddle.net/glebkema/sbzgwf8t/
.container {
margin: 0 auto;
max-width: 500px;
}
[class|="mobile"] {
height: 100px;
}
.mobile-first { background-color: blue; }
.mobile-last { background-color: red; }
.mobile-middle { background-color: green; }
#media screen and (min-width: 64em) {
.mobile-middle {
margin-right: -33.33333% !important;
width: 150% !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css">
<div class="container">
<div class="row">
<div class="small-12 large-8 columns">
<div class="row">
<div class="mobile-first small-12 columns">FIRST</div>
</div>
<div class="row">
<div class="mobile-middle small-12 columns">MIDDLE</div>
</div>
</div>
<div class="mobile-last small-12 large-4 columns">LAST</div>
</div>
</div>
As per #moped suggest. I can use same row div for all the colums.
The solution is simple if they are all in the same div, I can use display: flex.
#media only screen and (max-width: 768px) {
.row {
display: flex;
flex-direction: column;
}
.mobile-first{
order: 1;
}
.mobile-last{
order: 3;
}
.mobile-middle{
order: 2;
}
updated fiddle
I have page with main content and right sidebar. But I want to have sidebar before main content block on page resize. How can I accomplish this?
HTML part:
<div id="header">
<div id="logo"></div>
</div>
<div id="container">
<div id="content">
main content
</div>
<div id="sidebar">
sidebar
</div>
</div>
<div id="footer">
footer
</div>
CSS part:
#container {
clear: both;
overflow: auto;
}
#content {
clear:both;
width: 70%;
float: left;
padding: 2% 0;
margin-right: 2%;
}
#sidebar {
width: 28%;
float: right;
padding: 2% 0;
}
In your media query float your #sidebar left and your #content right.
Because you are trying to do responsive design, what you want to do is media query in your CSS that will allow you to style the changes you want to make. The first decision you have to make is which screen sizes you want to display the responsive design. Tablets usually have a max-width of 760px and phones are around max-width of 480px. So the media query will look something like this:
CSS:
#media screen and (max-width: 480px){
...all your mobile styles are in here...
}
Now to answer the positioning issues you have. Of course there are several ways, the way I would do it is this is to move your sidebar above the content in the HTML, remove the clear from the content CSS, and inside the media query all you have to do is make the width for both divs 100%.
HTML:
<div id="header">
<div id="logo">The logo</div>
</div>
<div id="container">
<div id="sidebar">
sidebar
</div>
<div id="content">
main content
</div>
</div>
<div id="footer">
footer
</div>
CSS:
#container {
clear: both;
overflow: auto;
}
#content {
float:left;
width: 50%;
background:grey;
}
#sidebar {
width: 25%;
float:right;
background:lightgrey;
}
#media screen and (max-width:480px){
#sidebar {
width:100%;
}
#content {
width:100%;
}
}