Streaming live at 10am (PST)

Percentage-Based Margins, Padding


#1

I'm wondering how I can set margins and padding on a div to a percentage, instead of a pixel value. Has anyone figured this out? Am I missing something obvious?


#2

We don't support that right now, but we will be implementing that into the Advanced tab in Position soon. Can you help me understand what you're trying to build?


#3

Oh, okay, thanks. I've actually realized that's not what I wanted to do. What I really need is a 100% height div, which also isn't working. I'll figure it out, though (unless that's also not supported?) Oh, and also, can I change the background position of an element?


#4

In CSS in order to have 100% height you will need to set its parent container (the element that it is siting inside of) have a set height. So if you have a block with height 300px and you set a block inside of it to 100% it will work as you'd expect.

Because all the heights for all the elements are based on the content inside of it the only way to make something have a specific height is setting it in pixels. I hope this helps!

What do you mean by change the background position?


#5

I think he means using CSS Sprites. Like You upload one image (eg. bartekkustra.eu/images/sprites.png) and using CSS you define position of teh background to fit the sprite into box. Like I did.

bartekkustra.webflow.css

.welcome-icon {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  background: url(../images/sprites.png) no-repeat;
  height: 32px;
  width: 32px;
}

index.php

<div class="w-row">
	<div class="w-col w-col-4 w-col-medium-4 w-col-small-4 w-col-tiny-4 icon_area">
		<span class="welcome-icon" style="background-position: -99px -34px;">&nbsp;</span>
		<p class="icon_text">+48 500 072 122</p>
	</div>
	<div class="w-col w-col-4 w-col-medium-4 w-col-small-4 w-col-tiny-4 icon_area">
		<span class="welcome-icon" style="background-position: -134px 0;">&nbsp;</span>
		<p class="icon_text">bartekkustra@gmail.com</p>
	</div>
	<div class="w-col w-col-4 w-col-medium-4 w-col-small-4 w-col-tiny-4 icon_area">
		<span class="welcome-icon" style="background-position: -96px 0;">&nbsp;</span>
		<p class="icon_text">nosek_xd</p>
	</div>
</div>

Am I right?


#6

I was thinking full page background. My div isn't nested at all, and I've set the body height to 100%. Maybe setting HTML height would help, but it doesn't seem to be an option.

I mean the background-position property. I can't seem to figure it out. And sorry I was a little vague.


#7

Ok I see what you're trying to do. If you want a full page background image you can click on Body element, add a background image and then Select COVER.

If you want a background image that's just part of the page (Like Template Uno has), then you have to set a height (or you can set padding and put content inside to set the "dynamic" height that way) and then select COVER.


#8

Yeah, I want it as an image element because it still needs to be part of the normal flow, because there needs to be more content below it. Thanks for your help, though. I'll figure out a way to get it working.


#9

I would also like to see percentage-based margin. Today I tried to build a fluid layout and this was exactly what's missing. I can still work around that by using pixel-based values for each breakpoint, but of course fluid/percentage-based would be a lot more flexible.


#10

@marcelkalveram totally! We're working on implementing something like this after some other big updates to our system. Thanks for your patience! tea (cup o' tea)


#11