Responsive shape-based layout?

301
April 21, 2017, at 10:22 PM

I'm working on a little design for a site that's comprised of the main content being in a square roughly 80% the width of the site, and then a header, footer and two sidebars being signalled via lines. I have the header, footer, lines and content all working, and they all (mostly) stay in the right place when resized. However, I can't for the life of me work out how to get the square in the center to continue to fill the section in the middle of the screen (without overlapping, or having a scroll bar!)

I've attached the code for my square and some screenshots of what I'm attempting to do and what currently happens below. Other than my innercontent div, there're no divs on the side, and a header and footer div above and below.

*Update: Added code as requested. I believe this is all that's used in the example I provided in the screenshots, other than the lines, which are produced via some JS. I've included the important css here too, so to allow me to link to my JS Fiddle with it all:

/* =================== 
    Inital Styles 
   =================== */ 
 
html { 
  color: #fff; 
  font-size: 1em; 
  background: #3f51b5; 
  line-height: 1.4; 
  animation: fade 5s 
} 
 
::-moz-selection { 
  background: #6534ff; 
  text-shadow: none; 
} 
 
::selection { 
  background: #3f51b5; 
  text-shadow: none; 
} 
 
hr { 
  display: block; 
  height: 1px; 
  border: 0; 
  border-top: 1px solid #ccc; 
  margin: 1em 0; 
  padding: 0; 
} 
 
audio, 
canvas, 
iframe, 
img, 
svg, 
video { 
  vertical-align: middle; 
} 
 
fieldset { 
  border: 0; 
  margin: 0; 
  padding: 0; 
} 
 
textarea { 
  resize: vertical; 
} 
 
.browserupgrade { 
  margin: 0.2em 0; 
  background: #ccc; 
  color: #000; 
  padding: 0.2em 0; 
} 
 
body { 
  font: 16px/26px Helvetica, Helvetica Neue, Arial; 
} 
 
h1, 
h2, 
h3, 
h4 { 
  color: #fff; 
  font-family: 'Montserrat', sans-serif; 
  line-height: normal; 
} 
 
h1 { 
  font-size: 25px; 
  letter-spacing: 3.1; 
} 
 
h2 { 
  font-size: 14px; 
  font-weight: 500; 
  text-align: justify; 
} 
 
h3 { 
  font-family: 'Space Mono', monospace; 
  font-weight: 400; 
} 
 
h4 { 
  font-size: 19px; 
} 
 
.inline { 
  display: inline; 
} 
 
.clear { 
  clear: both; 
  display: block; 
  content: ""; 
} 
 
.center { 
  margin: auto; 
  width: 50%; 
  padding: 10px; 
} 
 
.header-container { 
  height: 145px; 
  position: relative; 
} 
 
.header-center { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
} 
 
.title { 
  color: white; 
  text-align: center; 
  font-size: 40px; 
  font-family: 'Space Mono', monospace; 
  font-weight: 400; 
  line-height: 0px; 
  margin-top: 35px; 
} 
 
.subTitle { 
  color: white; 
  text-align: center; 
  font-size: 14px; 
  font-family: 'Space Mono', monospace; 
  font-weight: 400; 
  font-style: italic; 
} 
 
.innercontent { 
  position: relative; 
  height: 3vw; 
  width: 80%; 
  margin: auto; 
  padding-top: 32.5vw; 
  margin-top: -28px; 
  margin-left: 10.0%; 
} 
 
.green { 
  background: #42ab9e; 
} 
 
 
/* =================== 
    Name Collection 
   =================== */ 
 
#nameCollection { 
  text-align: center; 
} 
 
#nameText { 
  margin-top: -28%; 
  margin-left: 15%; 
  position: absolute; 
  margin-left: auto; 
  margin-right: auto; 
  left: 0; 
  right: 0; 
} 
 
.nameSkipButton { 
  margin-top: 25px; 
  background-size: 210% 100%; 
  background-image: linear-gradient(to right, #963019 50%, #16174f 50%); 
  -webkit-transition: background-position 0.3s; 
  -moz-transition: background-position 0.3s; 
  transition: background-position 0.3s; 
  border: none; 
  font-family: 'Space Mono', monospace; 
  color: #fff; 
  padding: 10px; 
  font-size: 12px; 
} 
 
.nameSkipButton:hover { 
  background-position: 99%, 0; 
}
<body> 
  <div class="delay"> 
    <div class="fade-in delay"> 
      <div class="header-container"> 
        <header class="header-center"> 
          <h1 class="title" onclick="location.reload();" style="cursor: pointer;">COMPUTERIFY.IO</h1> 
          <p class="subTitle" onclick="location.reload();" style="cursor: pointer;">Alpha is just a fancy word for unfinished.</p> 
          <p class="subTitle"> 
            </h1> 
        </header> 
      </div> 
      <div class="main-container"> 
        <div id="content" class="innercontent green"> 
          <div id="nameCollection"> 
            <div id="nameText"> 
              <h3>Hello. I'm the PC Generator, or PCG for short. Before we get started, can I just ask...</h3> 
              <h1>What's your first name?</h1> 
              <div> 
                <input type="button" style="display:none" id="btnSearch" value="Search" onclick="getUserName()" /> 
                <span class="input input--nameCollection"> 
                      <input class="input__field input__field--nameCollection" maxlength="19" onkeydown = "if (event.keyCode == 13) document.getElementById('btnSearch').click()" type="text" id="input-25" /> 
                      <label class="input__label input__label--nameCollection" for="input-25"> 
                        <span class="input__label-content input__label-content--nameCollection">First Name</span> 
                </label> 
                </span> 
              </div> 
              <input class="nameSkipButton" id="skipName" type="button" value="I don't value my name, pick one for me" onclick="confirmSkip();" /> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div>

https://jsfiddle.net/nxyg4a9x/2/

Attached screenshots demonstrating the design when it works (on a 1920x1080 display, and how it looks on resize and on mobile.

Answer 1

In your .innercontent div, you are using the vw measurement which stands for "viewport width" - basically what this means is that the height of your box is going to be relative to the width of the screen/viewport that the user is viewing the site in.

You need to set height, width margin etc in another unit other than vw since it will result in what you're seeing. I forked your fiddle to demonstrate.

https://jsfiddle.net/550n5wgn/1/

Answer 2

I would use flexbox if you can.

The following is a demo and you'll likely need to make adjustments to fit your needs.

* { 
  box-sizing: border-box; 
} 
 
body { 
  display: flex; 
  flex-direction: column; 
  margin: 0; 
  min-height: 100vh; 
  overflow: hidden; 
  background-color: #3f51b5; 
} 
 
header, 
main, 
footer { 
  margin: 0 10%; // Indirect way of making element width: 80%; 
  border-left: 2px solid lightgray; 
  border-right: 2px solid lightgray; 
} 
 
header, 
footer { 
  flex-basis: 100px; 
} 
 
main { 
  position: relative; 
  flex-grow: 1; 
  background-color: #42ab9e; 
} 
 
main:before { 
  content: ''; 
  z-index: -1; 
  position: absolute; 
  top: -2px; 
  right: -100%; 
  bottom: -2px; 
  left: -100%; 
  display: block; 
  border-top: 2px solid lightgray; 
  border-bottom: 2px solid lightgray; 
}
<header></header> 
<main></main> 
<footer></footer>

  • The most important thing that we did is use flex-grow: 1 on main which addresses your primary concern of stretching your content area to fill the appropriate space. flex-grow: 1 tells the element to take up any remaining space inside of it's parent element. So whatever space is left over from the height of the header and footer it will file up.
  • We use min-height on body as a starting point so that main doesn't end up a fixed size (which is what would have happened if we used height instead) and the layout fills the viewport initially even if there is not a lot of content.
  • You mentioned using JS to create your lines, that seems like overkill to me and can be accomplished with CSS. The lines are just borders and the only non obvious set of lines would be the horizontal lines that extend outside of main. I did this with a pseudo element that stretches itself outside of it's parent element. The top and bottom of the pseudo element are pulled outside of it's containing element equal to the border's thickness. The left and right of the pseudo element are pulled out just wide enough to always extend a little past the viewport window (I used a relative unit so it will grow with the viewport). We used overflow: hidden; on body to prevent a horizontal scrollbar that this element initially creates.

Hope this works for you and let me know if you have any questions, cheers!

Rent Charter Buses Company
READ ALSO
Data Entry Form best templates/libraries

Data Entry Form best templates/libraries

I am looking to modify/create a data entry form (product, vendor, sku, description, etc) Are there any libraries or templates that are recommended or de facto standards? I usually used tables when I needed to do this in the way distant past

322
Need to make images responsive in CSS/HTML for custom plugin

Need to make images responsive in CSS/HTML for custom plugin

I've searched the existing questions and found some similar issues, but the suggestions there didn't solve my problem

278
Don&#39;t show wide gap between items when they don&#39;t fill the row

Don't show wide gap between items when they don't fill the row

Please check this fiddle where when you resize the window and when the cards are going down, the bottom part of the cards looks odd with more space between themI want those bottom parts of the cards be align with the above cards

240
how to stop the levitate animation when it hovers

how to stop the levitate animation when it hovers

I just wanna ask for help from you guys, is there any way to stop the levitate animation on hover

351