When I zoom out on Chrome, the content of my website gets cropped off. Here is a screen shot of what I mean.
I can't find a solution to this. Is there even one? I read about changing sizes to ems and tried that but that didn't fix it. Hope someone can help.
This is the link I'm talking about but there are more pages with the same issue http://wardrobeicons.com/the-icons-update/elle-ferguson-perfect-wardrobe-5/
It is this part that causes the crop I think.
#content.weekly-update #magazine {
border: 1px solid #ccc;
height: 580px;
overflow: hidden;
}
As a quick fix you can increase the height value too 600px or more.
Or drop the floating layout, use CSS table layout instead for example - it has one of the greatest features of equal height on the cells.
Related
I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.
I've images and captions and I'd like the captions to be no wider than the images. This jsfiddle shows a working example.
The basic trick here is
div.img{
overflow:hidden;
width:1px;
display:table;
}
It seems that display:table; causes the div to stretch up to the image width, even though the width was specified as 1px. I'm using this because the image widths vary and may stretch depending on viewport width as well.
So far so good. However, on a local page, the trick is not working. The div really shows up as 1px in width. Oddly, a (seemingly) comparable div does show the proper behavior. I'm not sure how to demonstrate the problem page because it's a local page with quite some html/css and images... I'll be more than delighted to come up with screen shots or (a ton of) css if that may help debugging.
I don't immediately see differences between the functioning and the non functioning divs in the Firefox console. Does anybody have a clue what to look at?
There is a solution using CSS3:
div.img {
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
Fiddle
related link
I've started to create a new homepage and I realized that my old methods of creating said webpage were outdated. While learning about positioning divs in css I stumbled upon a problem I really find hard to crack.
On my webpage I want to have a picture div next to a text div, I want this text div to be a minimum of 500px, but I don't want it to stretch unless the screen is wide enough to show both the picture and the text(I got this working). The problem I get is when I want to make the screen smaller, I want the text div to decrease in width until it hits 500px, if the user then shrinks the screen more the text should then, and only then overlap the picture.
Here is an example of something similar.
http://jsfiddle.net/mnSGZ/1/
The problem is when shrinking it, I don't want the horizontal scroll to appear until the black square is covering the whole gray squares width.
I understand that 'margin-left: 200px;' prevents exactly this but is there some sort of max-margin to make this work?
code from jsfiddle:
#container {
background-color: gray;
margin: 20px;
min-width: 700px;
height: 300px;
}
#nav {
background-color: black;
margin-left: 200px;
height: 50px;
}
Use CSS3 Media Queries to style elements based on screen resolution. This link may help you:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I'm creating a responsive version of an existing site for an estate agency. Each property has a gallery of images, which display nicely when the images are landscape. The problem is when they are portrait.
In the original code the image sizes are defined as:
#gallery-images {
height: 577px;
overflow: hidden;
position: relative;
width: 828px;
}
I'm overwriting this (with a media query) so it becomes
#gallery-images {
height: 205px !important;
left: 1px;
width: 290px;
}
However, this means that the portrait images are cropped from the top and results in a less than ideal display - see here for example.
If I set height:auto and overflow:visible the portrait images display okay, but there are negative consequences for the page height. In essence, the gallery nav stays in position but there's lots of white space above when landscape images are shown again.
One option is to move the gallery nav above the images and suffer the white space below but I wonder if there's another solution I haven't thought of. I'm limited as to the non-CSS changes I can make but perhaps could persuade the client to add something if a script would provide a better solution.
Its up to you if you want to display overflow or not but I think you are looking for declaring a min-width...if you leave the height off then the image will scale proportionally.
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.