I try to create responsive HTML elements whenever the browser width is wide enough, it fills with 3 horizontal box elements whose content can be text or an image. When text content doesn't fill the whole box, it leaves some empty space so that it doesn't wrapped around the box.
However the text content can fill the box. Whether the box is filled or not, it should have same dimension unless the browser dimension changes.
When browser dimension is widening, the 3 elements should stay with the original dimension. But when it is narrowing, the 3 horizontal elements can reduce to 2 horizontal elements, leaving the other element to new space. And it can be 1 horizontal element if the browser space is narrow enough.
There can be many 3 horizontal elements, like this:
X X X
X X X
X X X
They're stacked like a table.
When the content is an image, its size must comply to the box dimension not the other way around, so it shrinks when the original image is bigger than the box or stretch when the image is smaller.
so far this is what I have
my JSFiddle link
The code above have a responsive horizontal box. Also the picture doesn't comply to the box but vice versa.
Please advice.
Responsive design won't be obtained by using Width and height elements.
Try setting these to Min-height / Max-height etc..
Also if you really want to keep it responsive then you should just install the bootstrap framework and use
col-md-4 to achieve this much easier without having to worry about css styling etc..
Related
I have a layout with two columns. On the left, a variable size image with some descriptive text below, on the right, some text with headings, data fields and so on.
If the image is large, it looks ok:
(note here the image is using .img-responsive and is actually about 320x320 when viewed, depending on browser viewport size).
If the image is small, I don't like the alignment:
Ideally I would prefer the small image appear vertically and horizontally centered, with the descriptive text ("150x150") aligned to the bottom.
Is this possible, ideally using Bootstrap 3 classes, otherwise is it possible at all?
Here's my current code (note the white border is not included because this is from a custom Bootstrap style sheet): http://www.bootply.com/szAeKcB7HP
I have the following layout I need to solve
I understand that the whole idea of the responsive design is to leave the height to adjust to the content, but for this particular work the customer wants it this way no matter how I have to figure it out but I'm struggling hard to achieve it
In my mockup I have a 100% height and weight body, and then a container taking 85% height of the body size.
Inside that container there are the following elements:
A Top div container with the company logo
A Progress bar with a step number
A small div with some instructions for the current step
A Div containing the form elements that the user has to fill
A bottom div with 2 navigation buttons
The content should be always visible no matter the device used (see image below)
Number 4. has a inner scrollbar with overflow-y because that content will change
In order to do this i set heights in percentage (%) for each div within the container, however I need some padding for the elements, but when the browser resizes or the device changes height and width the elements overlap each other
I don't want to rely on a bunch of media queries to fix this. I wonder if anyone can find an approach or some reference for this since i can't seem to find it
Thanks
If you don't want to use many media queries, I think you should use Jquery (or Javascript) like this:
Fixed height of all div except FORM CONTENT (include padding, margin, border with box-sizing: border-box). You can use some media queries for best style.
Use Jquery to calculate height of FORM CONTENT (this is scrollable content)
Example:
$('#form-content').height($(window).height() - X);
// With X = total height of other divs includes margin, padding, border
Call this script in $(document).ready(...) and $(window).resize(...)
Hope this help.
I need to have 2 equal width divs side by side, the left column contains an image and the right column will contain dynamic text where the height of the text div can vary somewhere between 400px - 550px depending on how much text the site owner inputs.
I need the image to line up flush at the top and bottom with the end of the text box. The container element is fluid to be responsive.
Desired Effect
What I have at the moment is using floats to line the elements up together and responding fine, but the image falls short, like so:
I tried setting the image as a background-image on the left column with...
.column-image{
padding-bottom:100%;
margin-bottom:-100%;
background-size:contain;
}
But this still falls short a little unless i tweak the padding-bottom amount. This is then rendered useless when I re-size my browser as the aspect ratio changes.
I am trying to avoid using Javascript to solve this.
Use display:table for the container and display:table-cell for the inner divs. Also make sure to remove the float
Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/
I had an idea for a background but I don't know if it can be done, and if it can, what the best method would be. Just to let you into my idea, it's a grid of squares as the background for a page but when you mouse over one it changes color and slowly shifts back(I know how to do the animation portion). The grid is supposed to span the entire page, width and height, and overflow would be hidden. I'd also wish that it could re size itself if the page does
So I'm wondering if this can be done. If it can, how would I generate the grid?
I'm at a complete loss. Any ideas?
I would use <canvas>. Or maybe fill entire body with equally sized DIV's with height and width defined in percentages. Lets say that would be grid of 10x10 DIV's. Or you can create on -the-fly with jQuery as many DIV as you want (to fill whole height). You can float those DIV's to fill entire viewport, and if window is resized use media queries to arrange them. On hover, you can apply some animation on every DIV. Of course, you can put other elements over those DIV's.
I know this is a common problem and I feel really stupid for not being able to figure it out, but I have a 3 column layout in HTML, and I seriously cannot figure this out for the life of me.
Here is the basic layout of my site:
fixed header,
1 sidebar on each side,
middle area with content.
Here is a mockup of the site that I'm speaking about: http://eitanrosenberg.com/tests/pop/bootstrap/
It looks ok at first, but when the browser is resized, the sidebars get really small and there is a ton of white space. Why is this? Thank you so much in advance.
Look at it this way.
The height:100% of the container div (and the column divs) gets their height from the body-element (100% of that), and the height of the body element is calculated as 100% of the height of the html element
The height of the html element is then (in practice) calculated from the current height of the browser window (100% of that).
So the height of your boxes will all be set to match the heigth of the browser window...
and this is exactly what you see when you shrink the browser window heigth!
Because:
Once your content no longer fits within the height of its container (ie. when you shrink the browser window you also shrink the calculated heights of all your containers and eventually the headroom will be too small) - overflow happens. The content of the "highest" box will then be the first to overflow, and parts of its content will then spill out of it to be visible below the boxes (since you don't use overflow: hidden).
The browser will then allow you to scroll past the bottom of the boxes (so to speak) in order for you to be able to see the content that "overflows the box", but it doesn't adjust the height of container - the boxes will still keep the same height as the browser window while you scroll...
So the background patterns will always be the height of 100% of the browser window in this example (an not match the height of the highest content when the height shrinks below that)...
One way to remedy this - is to adjust the height of the boxes with Javascript (calculate the height of the highest column and set that as an absolute value for height on the container and the boxes - every time the page resizes)
... or you could use "display: table" and "display: table-cell" on the container and the columns respectively as a workaround (overriding the Bootstrap grid CSS) for this particular layout width/media queries...
Hope this helps!
Good luck!