I'm building a portfolio in indexhibit where all pages of images use a a horizontal div to scroll through the images.
I didn't like the way the images were reduced in quality and wanted them to appear as large as the visitors screen would allow (without it going over), so I made them responsive (height: 90%; width: auto;).
The trouble is: the horizontal container div has a width that is the size of all of the original images (as per the indexhibit formatting is built to) - leaving a large white space to the right of all the images. This is because the images are downsized to fit the screen responsively - so I guess if you had a big enough screen size these images would actually
If I make the container div width: auto, it obviously splits the images onto the next line.
Is there something I can do with CSS to solve this issue - I'm not confident going in and modifying core files with this cms.
Thanks
Mike Chalmers
I played around with the way the images were displaying and inline-block solved it. The container needs some changes to get it to display horizontally. Here's the basic code:
#img-container {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
.img-div {
display: inline-block;
}
Related
https://jsfiddle.net/ug4u48pr/3/
I'm trying to build a simple app to put on a webpage with the intention to be accessed by mobile devices.
Because mobile devices tend to have a variety of resolutions, I figured I'd try to make the header/footer sections remain as consistent as possible by making them have heights of 20% with the body section having a height of 60%.
The problem is that I can't seem to fit the image within the constraints of the relative height of the header.
I've looked around and failed with an assortment of things such as...
img {max-height: 100%; max-width: 100%;}
img {display: block; overflow: visible/hidden;}
img {width: 100%; height: auto;}
img {height: 70px;}
The solution to my problem has to work dynamically as the window is resized.
I've managed to make the image properly scale by setting it as a "background". Before as an , it was too large/small and didn't fit the header. Now it does, but ruins the positioning of the title.
The "Application Title" should be centered vertically/horizontally with respect to the remaining width of the header, with its left edge of the cell touching the right edge of the image.
I figure there is a simple and straight forward solution, but I just can't seem to find it.
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 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 want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.
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.