0

I am trying to achieve a CSS driven layout that can have all types of CSS shapes positioned where required on a variable sized container. The shapes themselves represent tables in a room, just to put this jumble into context!

I have a max-width of 1500px and max-height of 1000px with various circles and squares positioned with absolute: This is fine but when loading the page in a variety of tablets with different size viewports the shapes become skewed due to me using width/height as a percentage value.

I need all shapes to retain their shape and positioning in scale with the current container size.

I have put my code on jsfiddle for anyone to view and get a better idea of what I am trying to achieve.

Any help is much appreciated.

HTML:

<div class="big-box">
    <div class="little-box little-box-1">Box 1</div>
    <div class="little-box little-box-2">Box 2</div>
    <div class="little-box little-box-3">Box 3</div>
    <div class="little-box little-box-4">Box 4</div>
    <div class="little-box little-box-5">Box 5</div>
    <div class="little-box little-box-6">Box 6</div>
</div>

CSS:

body {
    padding:0;
    margin:0;
}
.big-box {
    margin:0 auto;
    width:100vw;
    height:100vh;
    max-height:1000px;
    max-width:1500px;
    position:relative;
    background-color:#f2f2f2;
}
.little-box {
    width:8%;
    height:8%;
    background-color:#4260D3;
    text-align:center;
    vertical-align:middle;
}
.little-box-1 {
    position:absolute;
    top:5%;
    left:5%;
    border-radius:50%;
}
.little-box-2 {
    position:absolute;
    top:15%;
    left:15%;
}
.little-box-3 {
    position:absolute;
    top:25%;
    left:25%;
}
.little-box-4 {
    position:absolute;
    top:50%;
    left:50%;
}
.little-box-5 {
    position:absolute;
    top:90%;
    left:15%;
}
.little-box-6 {
    position:relative;
    top:25%;
    left:90%;
}
@viewport {
  orientation: landscape;
}
Thomas Bormans
  • 5,156
  • 6
  • 34
  • 51
Leigh
  • 61
  • 6
  • Stop using percents and start using hard values for the dimension of the shapes, which will fix your skew problem. Then have media queries change them to smaller sizes depending on device. – Waxi Jan 27 '15 at 19:44
  • The main problem that fixed sizes creates for me is that users will be able to create their own boxes in any size. Will I be able to resize them using media queries so that they still appear to be sized relatively to each other. i.e a square could be created at 80 x 80, 120 x 120 and then a few rectangles at 200 x 100, 300 x 600. These would all need to decrease in size so they appear in the same scale as each other. – Leigh Jan 28 '15 at 10:25
  • How are the users creating a box? Is it a drag-n-drop, are they inputting the dimensions, or are they selecting from a pre-defined list? And are these boxes in percents or pixels? For things such as shapes...I wouldn't use percents because it's not going to give you full control. – Waxi Jan 28 '15 at 13:25
  • The user will select a shape that they want to add to the main screen. This can be a square, rectangle, circle or triangle. The object always starts with a fixed size in pixels and they can increase / decrease the size using a scaling slidebar which writes back to the database the new pixel dimensions. This all happens in a popup screen and when the user is happy with the shape and size selection they click a button to add to the main container. – Leigh Jan 29 '15 at 13:41

1 Answers1

0

Because you have sizes defined with percent, the shapes will re-size based on screen size.

You can use javascript in order to calculate the shapes sizes when container size is changing.

Also you can try to use grids from bootstrap. Please see also the grid system details

Update

You can use javascript and calculate the boxes size proportionally with the current screen size. Detecting screen size.

mmsilviu
  • 1,211
  • 15
  • 25
  • Thanks for your comment on this one. I am not sure the bootstrap grid system will work for me here as the boxes can be placed anywhere in the main container and at any size which would mean I would end up setting the .big-box to col-xs-12 and all of the .little-box elements would still need position:absolute with width and height set in pixels. If you think different then please let me know, always keen to learn more on Bootstrap as I thinks it's awesome! – Leigh Jan 28 '15 at 10:31