Does anybody have an idea why my media queries is not working. I want my image to stay to 1000px (which is the original image size) when it detect the screen 1000px or more.
Here's my code:
CSS:
.header
{
height:100px;
width:100%;
}
.header img
{
width:100%;
}
#media screen and (min-width:1000px;)
{
.header
{
height:100px;
width:1000px;
}
.header img
{
width:1000px;
}
}
HTML:
<div class="header">
<img src="/common/media/images/some-image.jpg" />
</div>
Just use css's max-width to set the max size of the image. Then it cannot be bigger than the original size.
So remove your media query, and simply use this:
.header {
height:100px;
width:100%;
}
.header img {
width:100%;
max-width: 1000px;
}
Replace 100% with
.header img
{
max-width:1000px;
}
Related
Im having problems positioning a div to the right using media queries.
HTML
<div class="container">
<div class="left"></div>
</div>
CSS
body,html { height:100%; }
.container {
width:1000px;
height:100%;
background:#eee;
position:relative;
}
.left {
height:100%;
width:200px;
background:orange;
position:absolute;
left:0;
}
#media only screen and (max-width: 700px) {
.left {
position:absolute !important;
right:0 !important;
}
}
The left div is absolutely positioned to the left. I want to absolutely position that same div to the right when my media query is triggered at 700px width.
The problem is that it wont do it! I tried using !important. I tried to reiterate the position in the media query. NOTHING!
The weird part is that if I start off with the div absolutely positioned to the right , and with media queries, absolutely position the div to the left. IT WORKS!
What? Why?
DIV absolutely positioned to the left, with media query to bring the DIV to the right.
DOESNT WORK
http://jsfiddle.net/zfdmmyaz/
DIV absolutely positioned to the right, with media query to bring the DIV to the left.
THIS WORKS
http://jsfiddle.net/md07a02t/
How do I get this to work? How can I get my absolutely left positioned div to absolutely position itself all the way to the right when media query is triggered?
You need to reset the left value to auto, and then set the right value.
jsfiddle
#media only screen and (max-width: 700px) {
.left {
position: absolute;
left: auto;
right: 0;
background: lime;
}
}
Use float instead of left. Also, you don't need to make the .left div absolute since it will be absolutely positioned to it's relative container.
HTML
<div class="container">
<div class="left">Content</div>
<div class="clear"></div>
</div>
CSS
body,html { height:100%; }
.container {
width:1000px;
height:100%;
background-color:#eee;
position:relative;
border: 1px #000000 solid;
}
.left {
height:100%;
width:200px;
background-color:orange;
float: left;
}
.clear {
clear:both;
}
#media only screen and (max-width: 700px) {
.container {
width:100%;
}
.left {
float: right !important;
}
}
So, i have this dilemma with a three column div.
what i'm trying to achieve is the Center Div should be responsive and aligned center with a max width of 1000px. this can easily achieve using these css codes:
#center{max-width:1000px; width:100%; margin:0px auto; }
and then the left and right div should cover the remaining space. it's like the width of the Left and right = Total width MINUS the width of the center div.
http://jsfiddle.net/bendaggers/zb38d/4/
HTML:
<div class="wrapper">
<div class="left"></div>
<div class="center">Image Logo JPG here
</div>
<div class="right"></div>
</div>
CSS:
body {
width:100%;
}
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center a{
display:inline-block;
width:100%; max-width:1000px;
}
the problem is its not working. here's the fiddle.
can some one help?
In case you would like to have the center responsive and you would like to have 3 equal width columns then you should set the width to 33.3%. One trick you could set the width of your central column as 34% and the left and right as 33% width.
If you want to avoid to take into account of border and padding applied to those 3 columns you could also apply box-sizing:border-box;
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
This way border and padding will not expand the width of the column but instead will be applied inside each column width.
Also you can then center the a link inside the center column.
body {
width:100%;
}
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:33%;
background-color:blue;
}
.right {
display:table-cell;
width:33%;
background-color:black;
}
.center {
display:table-cell;
width:34%; max-width:1000px;
text-align:center;
}
DEMO: http://jsfiddle.net/zb38d/7/
Otherwise if you want the center to be fixed width then simply set a width in pixels or em:
.center{ width: 1000px; } but then you will need to set a different percentage of your left and right column then, different from 33%. Otherwise you will support only very high resolutions this way because you are setting a fixed width of 1000px for the center column.
The best bet is to re-think how you're designing this. The first answer with percentages is the best. White space is key to good design; filling up a page is not necessary.
Anyway, this uses jQuery to calculate the left and right, plus it uses the display-table, which doesn't allow for max-width, just width. Using just floats had a hard time with sub-pixels, so the display table worked better. It only makes sense to use this type of layout at 1450px and greater, then rely on different css for the other sizes below that. Because of the jQuery, it calculates the width and sticks the style into the parsed html, so !important is required for css below the 1450 min-width.
DEMO: http://jsbin.com/miqetu/1
Only tested on Firefox on a desktop. I have know idea if this works on touch devices or other browsers without issue.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.col {
box-sizing: border-box;
float: none!important;
clear: both!important;
}
.inner {
padding: 20px
}
.column-1 {
background: #ccc
}
.column-2 {
background: #ddd
}
.column-3 {
background: #eee
}
#media (max-width:1449px) {
/* used to over-ride jQuery*/
.wrapper {
display: block!important
}
.col {
display: block!important
}
.column-1,
.column-2,
.column-3 {
clear: both;
float: none!important;
width: 100%!important;
}
}
#media (min-width:1450px) {
.inner {
padding: 30px
}
.wrapper {
display: table;
height: 100%;
}
.col {
display: table-cell;
height: 100%;
}
.column-2 {
width: 800px /*max-width won't work */
}
}
#media (min-width:1500px) {
.column-2 {
width: 1000px /*max-width won't work */
}
}
HTML
<div class="wrapper">
<div class="col column-1"><div class="inner">...</div></div>
<div class="col column-2"><div class="inner">....</div></div>
<div class="col column-3"><div class="inner">...</div></div>
</div>
JQuery:
$(window).on("load resize", function() {
if ($('body').width() >= 1450) {
var ww = $(window).width();
var rem = ww - $('.column-2').width();
$('.column-1, .column-3').css('width', rem / 2);
}
});
i've designed a page with a div and two child div, disposed in line. One left, one right.
I'd like to reposition the two child div in a responsive design. How can I do?
I've created the page with this HTML:
<div id=contenitore class=clearfix>
<div class="imgsx"> Content </div>
<div class="txtdx"> Content.</div>
</div>
This is the CSS.
#contenitore {
position:relative;
}
.txtsx {
width:60%;
float:left;
}
.imgdx {
width:40%;
float:right;
As far it works well.
When I use a rule for responsive it doesn't work. My need is to put the div txtsx above the txtsx, full screen on mobile devices.
this is the CSS I've used:
#media screen and (max-width: 60em)
#contenitore {
clear: both;
padding: 0px;
margin: 0px;
}
.txtsx {
width:100%; !important
}
.imgdx {
width:100%; !important
This does what you asked for:
CSS:
#contenitore {
position:relative;
}
.imgsx {
width: 60%;
float: left;
}
.txtdx {
width: 40%;
float: right;
}
#media all and (max-width: 200px) {
.txtdx, .imgsx {
width: 100% !important;
}
}
Fiddle: http://jsfiddle.net/Hive7/MP3qP/2/
Normal CSS float both on left...
#contenitore {
position:relative;
}
.txtsx {
width:60%;
float:left;
}
.imgdx {
width:40%;
float:left;
}
In query resize float them right
#media screen and (max-width: 60em) {
.imgdx, .txtsx {
float:none;
width:100%;
}
}
Is what I think you're asking for...
I am trying to make one website responsive. the problem is that some elements adjust with media queries whereas others keep their native style...
I've tried different css files but no difference..
It drives me crazy 2 days now so if anybody has a clue what happens plz help.
.wrapper {
width:1200px; height:800px;
margin: 0 auto;
clear:both;
}
.image img {
width:1200px;
height:570px;
}
#media screen and (max-width : 240px){
.image img { /* this works*/
width:240px;
height:100px;
}
.wrapper{ /*this doesn't*/
width:240px;
}
}
I am trying to build a layout that has two div blocks next to each other. Both of them are centered to the page. The left block (1) varies in width depending on how much space their is available in the window (from 300px min to 400px max). Block 2 has a fixed width of 640px and does not change. Both block's height extend to the bottom of the page. If one block is longer than the other than the other block would compensate with white space (with the background color still applied).
Youtube's video page can be used as an example, however in my case the larger block is on the right. Notice how youtube's right block (suggested videos) gets larger or smaller from 300-400px when the window is resized.
This is the best I can come with:
http://jsfiddle.net/7dL5z/
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: auto;
min-height: 100%;
}
#left {
float:left;
min-width:300px;
max-width:400px;
height:100%;
background:#EEE;
}
#right {
float:right;
width:640px;
height:100%;
background:#666;
}
<html>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
Two problems:
1) I can't get the divs to extend to the bottom.
2) Adding a float to block 1 renders the min-width property useless
I am looking for a JS and CSS media query free solution if possible.
Any one have a clue?
A few things:
You need to add
html {
height:100%;
}
to get html's sub elements to fit the window. Then remove height:auto from the wrapper.
If you have a max-width set in pixels on the wrapper without telling it a variable width relative to the window (like width:90%), the contents can't change size when the browser resizes, because their width is fixed.
So I added width:90% for demo purposes. You can set it to whatever percentage you think looks nice in the window.
Put your right div before your left in your html like so:
<div id="wrapper">
<div id="right">right</div>
<div id="left">left</div>
</div>
and then you can use left to fill the space left by right without having to float it or tell it a width. Setting the max & min width on the wrapper will keep left from getting too small or big.
So the final css would be:
html, body{
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: 100%;
width:90%;
}
#left {
overflow:hidden;
height:100%;
background:#EEE;
}
#right {
float:right;
width:640px;
height:100%;
background:#666;
}
Here is one way of doing it using display: table-cell.
html {
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
margin:0 auto;
height: 100%;
display: table;
min-width: 940px;
}
#left {
display: table-cell;
height:100%;
min-width: 300px;
max-width: 400px;
background:#EEE;
}
#right {
display: table-cell;
width: 640px;
height: 100%;
background:#666;
}
To get the panels to extent to 100% of the browser height, you need to set the height on the html element.
The behavior may be close to what you need.
See demo at: http://jsfiddle.net/audetwebdesign/ZVN97/
Something like this http://jsfiddle.net/pmj7Z/ maybe?
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: 100%;
}
#left {
display: block;
float: left;
min-width:300px;
max-width:400px;
height:100%;
background:#EEE;
}
#right {
float: right;
width:640px;
height:100%;
background:#666;
}
My solution is set wrapper to display: table & its childs to display:table-cell.
Both areas will expand bottom when one of them overflow the screen size. If not, both will expand to bottom (100%).
http://jsfiddle.net/7dL5z/4/
HTML:
<body>
<div id="wrapper">
<div id="left">
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
</div>
<div id="right">right</div>
</div>
</body>
CSS:
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
display: table;
height: 100%;
margin:0 auto;
max-width:700px;
min-width:500px;
width: 100%;
}
#left {
background:#EEE;
display: table-cell;
max-width: 300px;
min-width: 100px;
width: 40%;
}
#right {
display: table-cell;
background:#666;
}
If you use jQuery, here is my answer:
$(document).ready(function() {
layoutInit();
$(window).resize(function() {
layoutInit();
});
function layoutInit() {
// you can also hard code the max-width and min-width in the javascript,
// following function is used to remove "px" on "1040px"-like strings from CSS
var pxStriper = function(str) {
return str.substr(0, str.length - 2);
}
// all parameters you need to update the layout:
var bodyWidth = $("body").width(),
bodyHeight = $("body").width(),
wrapperMaxWidth = pxStriper($("#wrapper").css("max-width")),
wrapperMinWidth = pxStriper($("#wrapper").css("min-width")),
rightWidth = pxStriper($("#right").css("width"));
// 3 different situations with width of the body:
if (bodyWidth <= wrapperMaxWidth && bodyWidth >= wrapperMinWidth) {
// 1:
$("#wrapper").css('width', bodyWidth);
$("#left").css('width', bodyWidth - rightWidth);
} else {
if (bodyWidth > wrapperMaxWidth) {
// 2:
$("#wrapper").css('width', wrapperMaxWidth);
$("#left").css('width', wrapperMaxWidth - rightWidth);
} else {
// 3:
$("#wrapper").css('width', wrapperMinWidth);
$("#left").css('width', wrapperMinWidth - rightWidth);
}
}
// update the height:
$("#wrapper").height(bodyHeight)
}});