I've got 2 cards that stack in portrait but are next to each other in landscape. I'd like to have the 2 cards vertically aligned to each other in landscape. i.e. The text of the first card should be aligned to the middle of the image. I tried the flex option but that breaks in the responsive design. Little help. Thanks.
<div class="land6">
<header>
<h4>T++++</h4>
</header>
<div>
<p>ipsom lorem</p>
</div>
</div>
<div class="land6">
<div>
<img class="right" src="/Thumbs.jpg" width="100%" />
</div>
</div>
The css:
#media only screen and (orientation:landscape){
.land6{width:49%}}
If you do not want to use flex-boxes then you will need another approach:
#media only screen and (orientation:portrait) {
.land6 {
display: block;
width: 100%;
}
}
#media only screen and (orientation:landscape) {
.wrapper {
white-space: nowrap;
}
.land6 {
display: inline-block;
vertical-align: middle;
width: 50%;
}
}
.land6 img {
width: 100%;
}
<div class=wrapper>
<div class="land6">
<header>
<h4>Some header</h4>
</header>
<div>
<p>ipsom lorem</p>
</div>
</div>
<div class="land6">
<div>
<img class="right" src="http://www.wfn360.com/wp-content/uploads/2014/04/thumb.jpeg" />
</div>
</div>
<div>
If your style didn't change when you move from portrait to landscape so you don't need to put the media query here.
To make each card stack on each other, make it take full width of their parents by example: width:100% so it won't let the other cards stay next.
To make the text in the middle of the image, if you already stack it on each other, simply use text-align:center will solve the problem
Related
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;
}
Using this markup...
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div style="background-color:gray">1</div>
</div>
<div class="col-md-6">
<div style="background-color:gray">2</div>
</div>
<div class="col-md-3">
<div style="background-color:gray">3</div>
</div>
</div>
</div>
Here's a jsfiddle (run it in full screen):
http://jsfiddle.net/MojoDK/swKyX/
Here's a screenshot:
The spacing between the divs at the red arrows are double of the space of the divs at the orange arrows.
How can I make the div space at the red arrow the same space (10px) as at the orange arrows and still maintain aligned divs/blocks when the three divs wraps as the browser window becomes smaller?
.row > div:not(:first-child):not(:last-child) {
padding: 0;
}
#media screen and (max-width: 768px) {
.row > div:not(:first-child):not(:last-child) {
padding: 0 15px;
}
}
This will work fine in a three columned layout.
A few ways to do this, but here's one:
#media (min-width: 992px){
.container-fluid{
margin-left:15px;
margin-right:15px;
}
}
Here is a fiddle (note you can import the bootstrap CSS for future reference):
http://jsfiddle.net/swKyX/5/
I am having lots of problems on positioning three column inside a .row using .span Can you please take a look at THIS LINK and let me know what I am doing wrong! on here?
if you check the page in iPhone 5 landscape orientation you will see that all there spans will line up under each other but I would like to keep two first at the first line. Here is what happening:
and this is what I would like to have:
also in big screens the third span is not fitting at the right end part:
or in iPhone 5 portrait view I woud like to center the image but it looks like:
Thanks for your time
Bootstrap makes all spanX elements display as block in small screens, so you can try adding a new class to make your spans float on small screens too, also I suggest you use the .row-fluid class and float your .social-wrap to make it align to the right
HTML
<div class="row-fluid">
<div class="span2 floatSmall">
<img />
</div>
<div class="span4 floatSmall">
<!--YOUR .span4 CONTENT-->
</div>
<div class="span6">
<div class="footer-body">
<div class="social-wrap">
<ul id="social-networking">
<!--YOUR SOCIAL LINKS-->
</ul>
</div>
</div>
</div>
</div>
CSS
.social-wrap {
float: right;
/*remove the width you have set*/
}
#media (max-width: 767px){
.floatSmall {
width: auto!important;
float: left!important;
}
}
i am just wondering if i have layout like this
<div class="container">
<div class="left"> Left </div>
<div class="right"> Right </div>
</div>
changing view port to 320 needs right div appear first and left div below it , Is this possible ??????
yes. just use the flex-box setup on the pertinent media query, as exemplified below and the boxes will show up reversed.
<html><head></head><body><div class="container" style="
display: -webkit-flex;
">
<div class="left" style="
-webkit-flex-flow: column;
background: lightgray;
"> Left </div>
<div class="right" style="
-webkit-flex-flow: column;
background: yellow;
-webkit-order: -1;
"> Right </div>
</div>
</body></html>
Original source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
It is possible and widely used. Take a look at this mobile first approach:
<div class="container">
<div class="right"> Right </div>
<div class="left"> Left </div>
</div>
This will be rendered one box below another on mobile. And now we use CSS to rearrange them on bigger screens (above 320px):
#media only screen and (min-width : 481px) {
.left { float: left; }
.right { float: right; }
}