I have two columns, first column has an image, second is the article. The article has a ton of "Empty spaces" I would like the height of the article to be the same height as the image so there's not visible empty space.
<article>
<div class="row">
<div class="row-sm-height">
<aside class="col-sm-6 ">
<img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200" />
</aside>
<aside class="col-sm-6">
<div>
<span> Basketball</span>
<h2 id="H2_2">
What really Matters
</h2>
<span id="SPAN_2">November 12, 2015</span>
<p>
Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! Read More
</p>
</div>
</aside>
</div>
</div>
</article>
Demo
http://codepen.io/anon/pen/WQVxor
I would like it to also be responsive, I can get the height to match using trial and error but I don't think that's the right approach.
The most simple and maybe also the best solution in your case is to make the 2 columns' parent div have the same background color as the 2 columns do so it looks like the article column has expanded.
In your css, find .row-sm-height under #media (min-width: 768px) and add the background color:
.row-sm-height {
display:table-row;
background: #f7f7f7;
}
And you just need to do nothing about specifying any height. It just adjusts to your image height.
Assuming that your images will be the same size one the same device you can set the min-height.
Add a new class to the div that is your article (not the one with "col-x").
Set the class to have a min-height of Npx.
As an example for your CSS:
div.image-article {
min-height: 250px;
}
If making it responsive you probably have your images smaller on different devices. Use a media query for these.
div.image-article {
#media (min-width: 0) {
min-height: 250px;
}
#media (min-width: #screen-xs-min) {
min-height: 250px;
}
#media (min-width: #screen-sm-min) {
min-height: 275px;
}
#media (min-width: #screen-md-min) {
min-height: 290px;
}
#media (min-width: #screen-lg-min) {
min-height: 320px;
}
}
Related
I got media queries working perfect on second html page with this code
#media only screen and (min-device-width: 200px) and (max-device-width: 1099px) {
.snebild img {
width: 50%;
max-width: 50%;
right: 2%;
}
.title {
margin-left: 4%;
position: absolute;
top: 10%;
}
}
But on my second page im trying to change the font size so it looks good on lower resolutions but using same code just changing to correct class and p element but nothing works.
#media only screen and (min-device-width: 200px) and (max-device-width: 1099px) {
.introus p {
font-size: 8px;
}
}
This is the HTML
<div class="introus">
<h2>Main Title</h2>
<h4>Second title</h4>
<p>Text to change size on when using lower resolution such as Iphones</p>
</div>
I assume you are testing it on a desktop device and not on a mobile device.
Try to change min-device-width to min-width that should work.
Correct me if I'm wrong.
You should use min-width instead of min-device-width because the main difference between width and device-width is that device-widths don’t always match the layout viewport of said device.
Changing that parameters the code works fine
#media only screen and (min-width: 200px) and (max-width: 1099px) {
.introus p {font-size: 8px;}
}
<div class="introus">
<h2>Main Title</h2>
<h4>Second title</h4>
<p>Text to change size on when using lower resolution such as Iphones.</p>
</div>
I want to control the size of my logo using media query.
The original width of my logo is 210px.
I want it to be 166px when the screen width is greater than 56.865em and same when it is less than this width, i.e., for mobile site.
I have written following code for this:
#media only screen and (min-width: 56.875em){
.site-branding img{
max-width: 166px;
}
}
#media only screen and (max-width: 56.875em){
.site-branding img {
max-width: 166px !important;
}
}
Only the first code block is working. Why isn't second working? (When the screen width is decreased, the width of logo becomes 210px again).
Is there any rule that you can't use both min and max media-queries to control same element?
The max-width rule won't work because it is overridden by the min-width since both have same value.
an easy approach, instead of doing 2 media queries is simply setting the logo's width in the general CSS and then apply a media query:
via non-mobile approach using the max-width
or
via the mobile first approach using min-width
Option with max-width
.logo img {
width: 210px
}
#media (max-width: 56.865em) {
.logo img {
width: 166px
}
}
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
Option with min-width
.logo img {
width: 166px
}
#media (min-width: 56.865em) {
.logo img {
width: 210px
}
}
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
UPDATE
First, I want the logo size 166px all the time.
So if you want after all is to have the logo's width at 166px all the time, meaning you want to change the current 210px to 166px
Then you don't need media queries. Assuming you are changing a custom CSS file and you can't/want to change the Base CSS file (which contains the width:210px) all you need is to be more specific.
See more about CSS specificity in MDN and in W3C Specs
/* emulating Base CSS */
.logo img {
width: 210px
}
/*being more specific */
.header .logo img {
width: 166px
}
<div class="header">
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
</div>
This drove me crazy but I found that commenting out text before #media will block the statement.
<!-- DO NOT COMMENT LIKE THIS BEFORE #media -->
/* USE THIS Comment version */
Hope it helps someone out!
I have two floating <div>'s .a and .b.
Both <div>'s are floated to left, So that they both are aligned horizontally with 50% width for each.
But on small screen I want both <div>'s to be aligned vertically with full width but second <div> .b must appear first and first <div> .a must appear under <div> .b.
Also I can't set height on both <div>'s since their content is dynamic.
Following is sample code:
.a{width:50%; float:left;background-color:#CCCCCC}
.b{width:50%; float:left; background-color:#FFC;}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.a{width:100%; float:left; background-color:#CCCCCC}
.b{width:100%; float:left; background-color:#FFC;}
}
<div class="a">This is first div</div>
<div class="b">this is Second div</div>
fiddle demo
Invert the HTML order:
<div class="b">this is Second div</div>
<div class="a">This is first div</div>
use float:right initially:
.a{width:50%; float:right; background:#ccc}
.b{width:50%; float:right; background:#ffc;}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.a{width:100%; float:left;}
.b{width:100%; float:left;}
}
Alright, let's get into it. You want them to be left aligned in large resolutions, but inverted in mobile resolutions.
Mobile version: Let's take a mobile-first approach. This means we will support the mobile styles as the default, and include large-screen styles in the media query. It seems much simpler and more reasonable, since your divs can be static in that case. Then, it makes a lot more sense to have the second div come first.:
<div class="section">Second div</div>
<div class="section">First div</div>
Then, there's not much to style, just regular simple css for the mobile version. Mainly this:
.section {
background-color: #f2f2f2;
}
Check an example here: http://jsfiddle.net/arthurcamara/3yv2urkm/
Large screen version: I also took the freedom to make the code more semantic. So I added separate classes lg-right and lg-left to the divs:
<div class="section lg-right">Text, second div</div>
<div class="section lg-left">Text, first div </div>
Now it comes to adding your media query.
#media only screen and (min-width: 481px) {
.section {
width: 50%;
}
.lg-right {
float: right;
}
.lg-left {
float: left;
}
}
See final working version here: http://jsfiddle.net/arthurcamara/3yv2urkm/2/
Also, you might want to consider using a framework such as Foundation. They already provide this functionality in a much broader and flexible way then the one I presented.
You can use the order property of CSS3 flexbox module as follows:
HTML:
<div class="flex-parent">
<div class="flex-child a">This is first div</div>
<div class="flex-child b">this is Second div</div>
</div>
CSS:
.flex-parent {
display:flex;
flex-wrap: wrap;
width:100%;
}
.flex-child {
flex:1;
}
.a {
background-color: #CCCCCC
}
.b {
background-color: #FFC;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.flex-child {
flex-basis:100%;
}
.a {
order:2;
}
.b {
order:1;
}
}
JSFiddle Demo
flexbox browser support# caniuse
I am using bootstrap's grid system and here's my website. The issue is that on initial load the item card looks pretty crappy like this:
and here's what it looks like after it loads:
As you can see the issue is because I am not supplying the image's width and height and hence before it load I am seeing this weird layout which is not good. The issue why I am not supplying a width and height is because this is responsive, such that when I resize the width of the browser then the width of the card also changes, and hence supplying a constant width and height doesn't work. What's the best solution out of this?
You can calculate your image ratio if it's known then set its padding to the ratio
Check out the js fiddle:
http://jsfiddle.net/J8AYY/7/
<div class="img-container">
<img src="">
</div>
.img-container {
position:relative;
padding-top:66.59%;
}
img {
position: absolute;
top: 0;
left: 0;
width:100%;
}
So if your image has width 2197 pixels and height 1463 pixels
then set the container that contain the image to have padding-top 1463/2197*100%
then set your image to position absolute
now your image can be responsive and worry free of collapsing container
You need to put your thumbnails in a dynamically sized container, whose height is proportional to it's width. You can do this by matching width and padding-bottom on the container, as well as a few other specifics as in the Bootply and example below:
Bootply
Example:
CSS:
.thumbnail_container {
position: relative;
width: 100%;
padding-bottom: 100%; <!-- matching this to above makes it square -->
float:left;
}
.thumbnail {
position:absolute;
width:100%;
height:100%;
}
.thumbnail img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img{
max-height:100%;
max-width:100%;
}
HTML:
<div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints -->
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/400x600">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/600x600">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/600x400">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="no-photo" /> <!-- No Photo, but it still scales -->
</div>
</div>
</div>
You'll notice that in the last thumbnail, even though there is no file loaded, the container is square. This is the key that will fix your specific issue.
Note: matching padding-bottom to width will give you a square thumbnail container, but you can make it any proportion you want, by adjusting the padding-bottom %.
Note2: because you haven't shared your code, you'll probably have to do a bunch of class renaming and testing to get this to work. I had to guess at your setup based on what I saw on your site. Hope it helps!
If you're working with images that are all the same size, you can set a min-height on the image element for each step of the responsive page. You would have to find out how tall the images are at each step of the responsive page design, but it could look something like this:
.item-card img {
min-height: 100px;
}
// Small screen
#media (min-width: 768px) {
.item-card img {
min-height: 150px;
}
}
// Medium screen
#media (min-width: 992px) {
.item-card img {
min-height: 200px;
}
}
// Large screen
#media (min-width: 1200px) {
.item-card img {
min-height: 250px;
}
}
As far as I understand your question you want the image to auto adjust when the browser is resized. We can achieve this using the css below.
.image-box img {
width: 100%;
}
If we only specify the width of the image the height will be auto calculated. It will maintain the aspect ratio for the image. Width 100% will exactly fit the container of the image. This code may not work for background image.
Your problem is that at load time, the img has a height=0 and width=100%. So, you have an empty image when the page loads.
You can consider using an Image Preloader:
ImageLoaderJS
PreloadJS
If you want all the images to have the same height, then use the Fake Crop jQuery plugin. Actually, it doesn't crop the image file, but the image gets a "cropped" effect using CSS Positioning properties.
Also, you can assign a min-height to the container:
.product-view .img-responsive {min-height:352px; background:#fff;}
You can also look into Lazy Loading:
LazyLoad
Lazy Loading Images
...
use bootstrap or #media queries
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
#media (max-width: #screen-xs-max) { ... }
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) { ... }
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) { ... }
#media (min-width: #screen-lg-min) { ... }
http://getbootstrap.com/css/#grid
This is my first question over here, I searched the site but I really couldn't find a decent answer. My problem is pretty specific.
On full resolution my homepage consists of four columns, however, when the window-width gets below 960, it transforms in to two columns, this is the code I used:
The HTML:
<div class="columns">
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
</div>
The CSS:
#media all and (max-width: 960px) {
.begin {
width:46%;
margin:0px 2% 2em 2%;
float:left;
}
}
The problem is only showing on a browser-width of around 619px, then the first column on the second row jumps to the next row.
For an example, please check: www.visiamedia.nl
I hope someone can help me out, it really bothers me.
Greetings
That's because your boxes are different heights when resized - and first one is pushing other floats aside. You could potentially fix the issue by setting a media query with a specific height between about 515px to 640px:
#media all and (min-width: 515px) and (max-width: 640px) {
.begin {
height: 190px;
}
}
That's because you have a width of 46%. Change it to 21%
#media all and (max-width: 960px) {
.begin {
width:21%;
margin:0px 2% 2em 2%;
float:left;
}
}