CODEWITHSUNDEEP
javascripthtmlcssfluid-layout
AbeZieleniec
AbeZieleniec

Reputation: 11

Responsive margins and padding

I would like to make certain elements of my page have more fluid transitions as they size down. If you look here:

http://abezieleniec.com/SIDWeb/

You can see that when you size down to tablet and phone size the first blue bar snaps to different positions to meet with the main logo. This was obviously done with media queries but I'm wondering if there is a way to make it more fluid with percentages? I'm assuming this would require some JS... Any ideas are welcome!

Thanks

Upvotes: 1

Views: 2313

Answers (1)

niaccurshi
niaccurshi

Reputation: 1295

It's not too hard a process as it happens! It's something I had to use for the website here: http://flourishworld.co.uk/

The key is to use :before with "margin-top: xx%":

.element:before  {
  margin-top: 50%;
  position: relative;
  content: "";
  display: block;
}

From looking at your site...it may be easier to just present some altered code. First I changed your markup (this may not work for you)

<div id="home" class="jumbotrontop animated fadeIn">
  <div class="biglogo" style="opacity: 1;">
    <img src="images/biglogofull.png">
  </div>
</div>

Using the code idea above:

#home:before {
  margin-top: 55%;
  position: relative;
  content: "";
  display: block;
}

But for this to work you need some amended CSS code for other elements...

.jumbotrontop {
  font-size: 21px;
  height: 100%;
  line-height: 2.1428571435;
  color: inherit;
  width: 100%;
  background-size: cover;
  z-index: 1;
}

.biglogo {
  width: 80%;
  display: block;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
  margin-bottom: 130px;
  opacity: 1;
  position: absolute;
  z-index: 100;
  top: 0;
  position: relative;
  display: table;
}

.jumbotrontop img {
  width: 100%;
  height: auto;
  margin: auto;
  max-width: 740px;
  display: block;
}

#home:after {
  background-color: #eeeeee;
  background-image: url(../images/background1.jpg);
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  bottom: 0;
  right: 0;
  z-index: 1;
  background-size: cover;
}

What this does is it takes your top element and takes it's height away, it's contents are positioned absolutely so it doesn't take up space. The :before element then adds a responsive height that will shrink as the width of the page shrinks. In doing so we had to change the logo markup around so that it stayed in a central location and continued to shrink as the window did.

Hope this helps! No JS, all CSS.

Upvotes: 1

Related Questions