I´m very new designer and created my own WordPress theme and it works as expected on FireFox, Chrome and Opera. The problem arrives with InternetExplorer (i´m using Windows 7 with IE 11).
Seems that InternetExplorer 11 don't understand the max-width CSS. I have this CSS:
.vi-container {
margin: 0 auto;
position: relative;
width: 100%;
}
.vi-content {
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
}
The HTMl code is something like:
<div class="vi-container">
<header class="vi-header">Header stuff</header>
<main class="vi-content" itemtype="http://schema.org/Blog" itemprop="mainContentOfPage" itemscope="" role="main">
<article class="post-content-wrap" itemtype="http://schema.org/BlogPosting" itemprop="blogPost" itemscope=""></article>
<!-- more articles with contents -->
<aside class="vi-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="" role="complementary"></aside>
</main>
</div>
The max-width 1200px is totaly ignored by InternetExplorer. You can see it in live loading my webpage in IE and other browser to compare. For example: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep
And here an example JSfiddle: http://jsfiddle.net/z4s01yxz/
I found other articles into StackOverflow about max-width issues on IE, but couldn't achieve a fix bymyself, that's why i´m requesting help. Hope that someone can give me a hand with this, thanks in advance.
The actual problem is that in InternetExplorer the webpage expands to fill all the width because max-width is ignored. You can check this image to see the difference: i.imgur.com/kGr8wk1.jpg
P.S: Sorry for my bad english.
I think your problem is not coming from max-width but from main element...
The main element is not fully supported by IE11 (source).
2 solutions :
Change your <main> element to a <div>. Demo : http://jsfiddle.net/z4s01yxz/2/
Add main { display: block; } to your CSS. Demo : http://jsfiddle.net/z4s01yxz/1/
I have a condition, in my case, I have image with parent divs in table layout. My condition was to make the image center center and if big image, then max-width to 100%. So, to make the max-width work I had the code below:
.cmp-logo{
diplay:table;
table-layout:fixed;
width:100%;
height:100%;
}
.td{
display:table-cell;
vertical-align:middle;
}
.td img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:260px;
margin:0 auto;
}
In above solution, if you remove table-layout:fixed, the max-width does not work in IE11 and below.
use this,
display: -ms-grid;
-ms-grid-columns: max-content;
Related
I'm making a basic header using divs and a nested img in a fluid layout. I'm a bit rusty on this and i can't for the love of me figure out how to ensure that the image nested in the div scales without scaling to the point where it becomes smaller its parent div.
EDIT: Updated the codepen link showing how using min-height won't work as it squeezes the image
HTML:
<div class="container">
<div class="item half">
<p>
Some text
</p>
</div>
<div class="item half">
<img src="http://dummyimage.com/hd1080" class="full-width">
</div>
</div>
CSS:
.container{
margin: 0 auto;
max-width: 1920px;
}
.item{
height: 300px;
float:left;
overflow: hidden;
background-color: gray;
}
.half{
width: 50%
}
.full-width{
max-width: 100%;
}
And for good measure a quick illustration of what is happening:
And an illustration of what i want to happen:
Edit: Note that the image here is not being squeezed, which is what happens if you set the image to have a min-height equal to its parent div. But rather the overflow is hidden. You can also see that i do not mind the images being cropped.
Any help appreciated.
You can add min-height equal to the div.item height to your image CSS
img {
max-width:100%;
min-height:300px;
}
I've managed to find the solution i wanted in this thread. The function i was looking for was object-fit.
I've used the following solution:
img{
min-height: 100%;
object-fit: cover;
}
Edit: quickly found out that this property is only properly supported by Firefox, Chrome and Opera. Use this polyfill to fix this on Safari and IE.
I have a website which uses an eccommerce script to list products. Most of the site seems to be mobile responsive, apart from the product images which stay fixed at a height of 500px. I've been trying to make them responsive but seem to have tried loads of methods and none of them work. The image always stays the same size when viewing on mobiles.
Here is the html code which generates each product image on the product page:
<div class="file_image">
<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
{IMAGE}
</div></div></div></div></div></div></div></div>
<div class="file_links">
And here is the section in the .css stylesheet which controls this div tag:
.file_image
{
float:left;
margin-right:30px;
width:480px;
text-align:center;
}
Is there something else I need to add somewhere to make this image responsive? I've tried several things but they don't seem to work. If anyone can help me out here, that would be great. Thanks :)
Try adding this,
.file_image img
{
width:100%;
height: auto;
}
you should try to set your image width in max-width instead of width for this case.
.file_image {
float: left;
margin-right: 30px;
width: auto;
max-width: 480px;
text-align: center;
}
Hope it might help.
Good Luck'
I am trying to move from old html styled with tables, to html5 styled with CSS, but I have problems:
codepen Demo
You can see that, text is aligned to the edge of the page, and I want it aligned to the edge of the header banner.
I cant figure out, how to do that? without using tables.
Also, please note, that the .article:nth-child(odd) CSS selector, somehow aligns the odd elements to the left, and not to the right... I dont understand why.
Thanks!
The best way to create a fixed width website is to add a containing div:
Simply add a fixed width div around all your current code.
#Wrap{width:1024px;}
.
<body>
<div id="Wrap">
...
/* rest of website */
...
</div>
</body>
codepen Demo
CLEAN EXAMPLE
HTML
<div id="Wrap">
<div id="Head"></div>
<div id="Body"></div>
<div id="Foot"></div>
</div>
CSS
#Wrap{
width:1024px; /*Your desired page width*/
margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
width:100%; /*Fill the width of the wrapper*/
}
#Body{
width:100%; /*Fill the width of the wrapper*/
}
#Foot{
width:100%; /*Fill the width of the wrapper*/
}
For example
codepen Demo
.article {
width: 1024px;
}
To center the .articles you need to set a width. Also you might want to consider getting rid of
<div align="center">
It's deprecated in html5
Your content have the same width as a header, but you have image inside header which have a little less width than 100% of site, so what u need to do is add some width for article something like this:
.article {
display: block;
margin: auto;
width: 900px;
}
codepen Demo
you need to write css to style the page correctly:
codepen Demo
div {
text-align: center;
}
I'm learning HTML/CSS in my web standards design course this month and this week we are fixing our websites to be responsive.
I have converted all of my px to percentages and all font from px to em. I messed something up with the max-width: 100% on my gallery.
I'll post my link instead of all the codes.
http://jgoldd.github.io/wsd/index.html
Take the width and margin off your body tag. Make a class called a wrapper and add it inside your containers eg
.wrapper{
max-width:960px;
margin:0 auto;
width:100%;
}
<header>
<div class="wrapper">
// put your content in here
</div>
</header>
<div id="content">
<div class="wrapper">
// put your content in here
</div>
</div>
<footer>
<div class="wrapper">
// put your content in here
</div>
</footer>
If you don't want to do this you could just set your body to
body{
max-width:960px;
width:100%;
}
But I would change your structure to the way with a wrapper is good to practice clean code hygiene from the start :-)
Your css is too buggy. So, let me explain you a simple technique to activate responsive behavior to images
Try this code in HTML
<img class="resize" src="http://jgoldd.github.io/wsd/images/mountains1.jpg">
CSS
.resize {
max-width: 100%;
height: auto;
width: auto;
}
This code simple activates the responsive behavior on images.
Do let me know if you have any queries...! :)
You're going to need to play with it a bit, but here is a quick bit to get you going in the right direction. (remove the lines I commented with REMOVE)
#gallery li{
width: 49%;
display: inline-block;
.display: inline; /* for IE 8 */
zoom: 1; /* for IE 8 */
/* float: left; REMOVE */
}
#gallery img {
width: 100%;
/* max-width: 100%; REMOVE */
}
#gallery_container{
width: 100%;
/* width: 41.666667%; REMOVE */
}
Give it a try. Should give you better results and hopefully get you where you want to be.
I have a page with content contained in <html></html> - I'm trying to get a sidebar to span all the way down to the bottom of the page, even if there's vertical overflow.
This is working if there's no vertical overflow, but if there is, the sidebar just stops at wherever the bottom of the page was when the page loaded.
If I use chrome dev tools, I can see that all elements - all the way up to <html>, have their height limited to however big the window was when it loaded. Is this normal? My problem would be solved if I could tell <html> to somehow span vertically to include all content, but I don't know if that's the right solution.
I have set the sidebar and all parents to height:100%, including html:
html, body, .durandal-wrapper, #shell-row, #sidebar {
height: 100% !important;
}
I've been working on getting this demod in jsfiddle but can't get it working. here's what it looks like on my end:
You could use css tables to achieve this.
FIDDLE1 FIDDLE2
Markup
<div class="container">
<div class="sideBar">sideBar</div>
<div class="main">
Content.
</div>
</div>
CSS
.container
{
display: table;
}
.sideBar
{
display: table-cell;
background:pink;
width: 100px;
}
.main
{
display: table-cell;
background:yellow;
overflow:auto;
vertical-align: top;
}
Faux columns is the usual CSS pattern for your issue:
http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns