Rectangle 27 333

1. Making the responsive squares :

You can make responsive grid of squares with verticaly and horizontaly centered content only with CSS. I will explain how in a step by step process but first here are 2 demos of what you can achieve :

padding-bottom

As top padding is calculated acccording to the width of the parent element (See MDN for reference), the height of the element will change according to its width. You can now Keep its aspect ratio according to its width. At this point you can code :

<div></div>
div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}

Here is a simple layout example of 3*3 squares grid using the code above.

With this technique, you can make any other aspect ratio, here is a table giving the values of bottom padding according to the aspect ratio and a 30% width.

Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%

As you can't add content directly inside the squares (it would expand their height and squares wouldn't be squares anymore) you need to create child elements (for this example I am usind divs) inside them with position:abolute; and put the content inside them. This will take the content out of the flow and keep the size of the square.

Don't forget to add position:relative; on the parent divs so the absolute children are positioned/sized relatively to their parent.

Lets' add some content to our 3x3 grid of squares :

text-align:center
.content
display:table;
/* and */
display:table-cell;
vertical-align:middle;

but we can't use display:table; on .square or .content divs because it conflicts with position:absolute; so we need to create two children inside .content divs. Our code will be updated as follow :

<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                ... CONTENT HERE ...
            </div>
        </div>
    </div>
</div>
... and so on 9 times for 9 squares ...
.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}

We have now finished and we can take a look at the result here :

"As top padding is calculated acccording to the width of the parent element" is this convention ?

@d.raev yes. Percentage paddings and margins are calculated according to the width of the parent. Check here for padding developer.mozilla.org/en-US/docs/Web/CSS/padding

This is great. Just a heads-up for others: if you're using * { box-sizing: border-box; } you'll need to adjust the height and width in the .content div to 100%. :)

You saved me a lot of time! Thank you

html - Grid of responsive squares - Stack Overflow

html css responsive-design grid-layout aspect-ratio
Rectangle 27 328

1. Making the responsive squares :

You can make responsive grid of squares with verticaly and horizontaly centered content only with CSS. I will explain how in a step by step process but first here are 2 demos of what you can achieve :

padding-bottom

As top padding is calculated acccording to the width of the parent element (See MDN for reference), the height of the element will change according to its width. You can now Keep its aspect ratio according to its width. At this point you can code :

<div></div>
div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}

Here is a simple layout example of 3*3 squares grid using the code above.

With this technique, you can make any other aspect ratio, here is a table giving the values of bottom padding according to the aspect ratio and a 30% width.

Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%

As you can't add content directly inside the squares (it would expand their height and squares wouldn't be squares anymore) you need to create child elements (for this example I am usind divs) inside them with position:abolute; and put the content inside them. This will take the content out of the flow and keep the size of the square.

Don't forget to add position:relative; on the parent divs so the absolute children are positioned/sized relatively to their parent.

Lets' add some content to our 3x3 grid of squares :

text-align:center
.content
display:table;
/* and */
display:table-cell;
vertical-align:middle;

but we can't use display:table; on .square or .content divs because it conflicts with position:absolute; so we need to create two children inside .content divs. Our code will be updated as follow :

<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                ... CONTENT HERE ...
            </div>
        </div>
    </div>
</div>
... and so on 9 times for 9 squares ...
.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}

We have now finished and we can take a look at the result here :

"As top padding is calculated acccording to the width of the parent element" is this convention ?

@d.raev yes. Percentage paddings and margins are calculated according to the width of the parent. Check here for padding developer.mozilla.org/en-US/docs/Web/CSS/padding

This is great. Just a heads-up for others: if you're using * { box-sizing: border-box; } you'll need to adjust the height and width in the .content div to 100%. :)

You saved me a lot of time! Thank you

html - Grid of responsive squares - Stack Overflow

html css responsive-design grid-layout aspect-ratio
Rectangle 27 72

If you're making a responsive website, you will probably want to use min-width/max-width rather than min-device-width/max-device-width in order to target a wider range of screen sizes.

Remember to specify a viewport meta tag in the <head> section of your document:

Due to all the different possible screen resolutions and pixel densities a given device can have, a pixel is not a pixel because there are several things to take into consideration (zoom, pixel density, screen resolution and size, device orientation, aspect ratio, etc..). In this case, a pixel is actually referred to as a "optical reference unit" rather than a physic hardware pixel.

Fortunately, you can specify a viewport meta tag in the <head> section of your document in order to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.

<meta name="viewport" content="width=device-width, initial-scale=1">

In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.

In other words, if you are using max-device-width, you will not see different media queries applied when resizing your desktop browser, because unlike max-width, only the device's actual full screen size is taken into consideration; not the current size of the browser window.

This makes a huge difference if you're trying to create an adaptive layout because the site won't be responsive when resizing the browser. In addition, if you're using max-device-width the media queries you're using to target devices with smaller screens will not apply to desktops even when resizing the browser window down to match said smaller screen size.

max-device-width

Google Developers - Web Fundamentals - Responsive CSS media queries

It is also possible to create queries based on *-device-width; though this practice is strongly discouraged.

The difference is subtle but very important: min-width is based on the size of the browser window, whereas min-device-width is based on the size of the screen. Unfortunately some browsers, including the legacy Android browser may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width.

In addition, using *-device-width can prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window.

@JohnMagnolia It took a while, but I completely re-wrote the answer. Thanks for reminding me :) Feedback is appreciated.

Agree with everything your saying but forgetting the backwards compatibility side of it, that wont be relevant in a few years. Why should a desktop site work differently because we now have mobiles?

I just don't think a mobile site should ever be displayed on a desktop. You should be able to resize to browser to any width and use the horizontal scrollbar. Say you wanted to compare a section of 2 sites but hide the sidebar, you would open in 2 windows and resize side by side

I agree with John M, google is wrong, I've personally found their responsive design 'documentation' some of the worst fad driven stuff out there, given creedence only because the kids who write it are employed by google. I initially upvoted this, but the answer is wrong in my opinion, just because more and more sites are ruining their desktop user experience, totally non-necessarily to fit a one size fits all responsive css framework (done only to cut dev time in my opinion), does not mean you have to ruin your desktop user's experience. We don't do that, and have increased conversions by 10x.

css - Should I use max-device-width or max-width? - Stack Overflow

css css3 responsive-design media-queries
Rectangle 27 19

If you are using Bootstrap you can also use a responsive embed. This will fully automate making the video(s) responsive.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

it is worth adding that you should insert those inside some col-sm... etc. to avoid making the video full width.

Shrink a YouTube video to responsive width - Stack Overflow

youtube responsive-design embed
Rectangle 27 12

You could use vw (view-width) units, which would make the squares responsive according to the width of the screen.

A quick mock-up of this would be:

html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

Don't use margin-left: -4px; use margin-right:-4px. Rather don't mess with inconsistency in mincharspace but set to a wrapper parent font-size to 0 and than for the child elements reset to 1rem (relative-em)

html - Grid of responsive squares - Stack Overflow

html css responsive-design grid-layout aspect-ratio
Rectangle 27 11

You could use vw (view-width) units, which would make the squares responsive according to the width of the screen.

A quick mock-up of this would be:

html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

Don't use margin-left: -4px; use margin-right:-4px. Rather don't mess with inconsistency in mincharspace but set to a wrapper parent font-size to 0 and than for the child elements reset to 1rem (relative-em)

html - Grid of responsive squares - Stack Overflow

html css responsive-design grid-layout aspect-ratio
Rectangle 27 17

setting a px width is making it static, you would have to employ a different technique to make it responsive after that like javascript that is why a % is used.

If you are wanting to make the container not go wider than 1170px use

.container-fluid {
   max-width:1170px;
}

max-width will make it so if the users screen is wider than 1170px the container will go only up to 1170px wide. This will make it so the responsive mechanisms will still work.

Of course using .container-fluid as the selector will change how all container-fluid elements act so think about adding a second class to that element and setting the style to it.

<div class="container-fluid maxWidth"></div>
.maxWidth {
       max-width:1170px;
}

If you are wanting the container to be fixed no matter what, that will make the contents inside non-responsive as they would not be able to tell when the screen has changed size as the container would not change size.

html - Twitter Bootstrap "container-fluid" - Stack Overflow

html css twitter-bootstrap
Rectangle 27 1

Well, if you are making a responsive website sooner or later, imho, you may need to introduce media queries.

So this is what I would do in your case. Something like adding:

@media (max-width: 900px) { 
header {height: 70px;}
}
@media (max-width: 700px) { 
header {height: 50px;}
}
@media (max-width: 400px) { 
header {height: 30px;}
}

change the different steps to whatever window width you want your header to get smaller.

html - CSS change header height based on width - Stack Overflow

html css responsive-design
Rectangle 27 4

If you really need to detect a mobile browser (instead of making a mobile-friendly responsive layout like the Responsive template on Initializr that Just Works on mobile browsers - Google for "mobile first" and "responsive design" for more examples) then take a look at these links:

There are tons of mobile browsers - not only iPhone, Android and Windows - so if you are going to detect them then you need to do it right. See also the jQuery Mobile, a great mobile framework that will make your life easier.

it is a great resource. but all the codes are compressed. so, is there any documentation about how to use all those.

javascript - Redirecting to the mobile website - Stack Overflow

javascript navigator
Rectangle 27 11

I know this is a little old, but I recently came across this while looking for a similar solution. Relying on hover events isn't good for responsive design, and especially terrible on mobile/touch screens. I ended up making a small edit to the dropdown.js file the allows you to click the menu item to open the menu and if you click the menu item again it will follow it.

The nice thing about this is it doesn't rely on hover at all and so it still works really nicely on a touch screen.

This is by far the best way to go. Thanks for doing this, I was just about to do the same thing, you saved me from re-inventing the wheel!

Does not work anymore.

It is likely that bootstrap's own dropdown.js has diverged enough in the 2+ years that this version no longer applies. The version linked above was for bootstrap v3.3.5. It looks like the eventing in 3.3.6 has changed a bit, I haven't tested against that version. Also, it surely won't work in 4.x.

Usually you'd have scripts that will disable hover functions on mobile sized devices, so having hover really isnt such a bad idea, just got to make sure to alter the hover once the resolutions are mobile sized.

Glad you raised the cross-device behavior issue. IMHO the double tap should be active only on mobile, otherwise hovering is the way to display and click the way to go, don't you think?

javascript - Bootstrap 3: how to make head of dropdown link clickable ...

javascript css twitter-bootstrap-3
Rectangle 27 2

I'm using this solution, which i found, when I was trying to fit and center images into squares (or whatever). It is brilliant in combination, where you set padding-bottom and height 0 to its container - that makes it responsive with fixed ratio.

Works in IE9 and higher. For IE8 and below some CSS hacks needed.

.container {
    height: 0;
    padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
    position: relative;
    overflow: hidden;
}
.container img {
    display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 75%;
    width: auto;
    height: auto;

    position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* Fallback for IE8 */
@media all\0 { 
    .container img {
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

Notice: If using bootstrap change the class .container to something else.

image - max-height AND max-width with CSS only - Stack Overflow

css image
Rectangle 27 2

I'm using this solution, which i found, when I was trying to fit and center images into squares (or whatever). It is brilliant in combination, where you set padding-bottom and height 0 to its container - that makes it responsive with fixed ratio.

Works in IE9 and higher. For IE8 and below some CSS hacks needed.

.container {
    height: 0;
    padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
    position: relative;
    overflow: hidden;
}
.container img {
    display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 75%;
    width: auto;
    height: auto;

    position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* Fallback for IE8 */
@media all\0 { 
    .container img {
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

Notice: If using bootstrap change the class .container to something else.

image - max-height AND max-width with CSS only - Stack Overflow

css image
Rectangle 27 1

You could wrap every image in a div and then set the div's overflow to hidden. As long as the div is square then you're image will appear cropped. The div can be responsive as well. similar post share|improve this answer edited May 23 at 12:25 Community♦ 11 answered May 1 '14 at 0:27 miriye 1385

but some images are not as height as they are wide.

$(function(){ $('.img').each(function(){  if($(this).outerWidth(true) <= $(this).outerHeight(true) {//not as wide as tall} else { //not as tall as wide } }) })

css - Force bootstrap responsive image to be square - Stack Overflow

css twitter-bootstrap responsive-design
Rectangle 27 1

You could wrap every image in a div and then set the div's overflow to hidden. As long as the div is square then you're image will appear cropped. The div can be responsive as well. similar post share|improve this answer edited May 23 at 12:25 Community♦ 11 answered May 1 '14 at 0:27 miriye 1385

but some images are not as height as they are wide.

$(function(){ $('.img').each(function(){  if($(this).outerWidth(true) <= $(this).outerHeight(true) {//not as wide as tall} else { //not as tall as wide } }) })

css - Force bootstrap responsive image to be square - Stack Overflow

css twitter-bootstrap responsive-design
Rectangle 27 1

:after
:before

You just need to make sure you apply the same background properties.

.imgautumn1:before {
    background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/*  For responsive images as background */
.bg:before {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    content:'';
    position:absolute;
    top:0;left:0;
    right:0;bottom:0;
}

Aha, I was not doing it correctly then. Thanks! :-) */edit*/ I do not see where to place the opacity: 0.3 element? Changing the .imgautumn1 class to imgautumn1:before makes the image disappear.

@user2609980 you need to change the .bg to .bg:before as well. And keep a .bg{color:#fff} for the color as you did. The opacity must be applied to this newly created :before element. The updated fiddle shows this through the :hover rule, but you can apply it directly to the .bg:before if you want it to always have opacity:0.2

Ah wait I'll play with it some more, I only now see the ` .bg:hover:before{opacity:0.2;}` in the Fiddle! Thanks a lot for your help!

top:0;left:0;     right:0;bottom:0;

The idea is that we create a pseudo-element with the :before that contains the image but is controlled autonomously. We then use position:absolute to remove it from the flow so that it does not affect this size of its container etc.. The left/top/right/bottom is to position this new element to cover the entire .bg element. It sets the dimensions of the :before element in effect.

html - How to make only background image transparent in responsive squ...

html css image background opacity
Rectangle 27 1

:after
:before

You just need to make sure you apply the same background properties.

.imgautumn1:before {
    background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/*  For responsive images as background */
.bg:before {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    content:'';
    position:absolute;
    top:0;left:0;
    right:0;bottom:0;
}

Aha, I was not doing it correctly then. Thanks! :-) */edit*/ I do not see where to place the opacity: 0.3 element? Changing the .imgautumn1 class to imgautumn1:before makes the image disappear.

@user2609980 you need to change the .bg to .bg:before as well. And keep a .bg{color:#fff} for the color as you did. The opacity must be applied to this newly created :before element. The updated fiddle shows this through the :hover rule, but you can apply it directly to the .bg:before if you want it to always have opacity:0.2

Ah wait I'll play with it some more, I only now see the ` .bg:hover:before{opacity:0.2;}` in the Fiddle! Thanks a lot for your help!

top:0;left:0;     right:0;bottom:0;

The idea is that we create a pseudo-element with the :before that contains the image but is controlled autonomously. We then use position:absolute to remove it from the flow so that it does not affect this size of its container etc.. The left/top/right/bottom is to position this new element to cover the entire .bg element. It sets the dimensions of the :before element in effect.

html - How to make only background image transparent in responsive squ...

html css image background opacity
Rectangle 27 4

I came across this question searching for a simular problem. I'm making a webpage with responsive design and the width of elements placed on the page is set to a percent of the screen width. The height is set with a vw value.

Since I'm adding posts with PHP and a database backend, pure CSS was out of the question. I did however find the jQuery/javascript solution a bit troblesome, so I came up with a neat (so I think myself at least) solution.

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

By using style="" it's posible to have PHP update my page dynamically and the CSS-styling together with style="" will end up in a perfectly covered image, scaled to cover the dynamic div-tag.

html - How do you stretch an image to fill a
while keeping the i...

image html size
Rectangle 27 4

I came across this question searching for a simular problem. I'm making a webpage with responsive design and the width of elements placed on the page is set to a percent of the screen width. The height is set with a vw value.

Since I'm adding posts with PHP and a database backend, pure CSS was out of the question. I did however find the jQuery/javascript solution a bit troblesome, so I came up with a neat (so I think myself at least) solution.

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

By using style="" it's posible to have PHP update my page dynamically and the CSS-styling together with style="" will end up in a perfectly covered image, scaled to cover the dynamic div-tag.

html - How do you stretch an image to fill a
while keeping the i...

image html size
Rectangle 27 1

Bootstrap is in fact mobile-first and responsive by default, making it perfectly suitable for use on mobile devices.

In your case, Bootstrap may or may not be what you're looking for. It's well supported and easy to use, but may be a little slower than you'd like, and can be a little constricting for mobile-only apps given that it is designed to work on both desktop and mobile.

This article may be useful to you - it has a comparison of several frameworks and the pro/cons of each.

Is bootstrap proper for building mobile app? - Stack Overflow

twitter-bootstrap
Rectangle 27 6

DA is right. In your own fiddle, the iframe is indeed responsive. You can verify that in firebug by checking iframe box-sizing. But some elements inside that iframe is not responsive, so they "stick out" when window size is small. For example, div#products-post-wrapper's width is 8800px.

css - Making an iframe responsive - Stack Overflow

css wordpress iframe