What i'm missing here?

[Funkaholik]

What i’m trying to achieve here
is to make it rescalable but for now if you’ll change containers width and height
mic & camera + corners changes their positions .. what i’m missing here?

[Shikkediel]

Did you fix this? I’m not seeing anything peculiar myself.

[Funkaholik]

If you change width & height drastically to minimum or maximum like 200×200 or 1500×1500
then you’ll notice what i mean

[bearhead]

You’ll either have to use media queries to change the width and height of .devices for different screen widths, or you you’ll have to use something like view width instead of pixels to define the width and height of .devices (i.e. width:50vw; height:50vw;

[Funkaholik]

Can you provide an example of responsive css icon drawings?
Because i broke my head understanding how to make it responsive
here is a pen

i’ve found a pen the other day
i see he uses vw just like you said + for :after :before elements sometimes % sometimes vw
https://codepen.io/Funkaholik/pen/bqrGYQ?sort_col=item_updated_at

my goal is – i’d be able to change icons size by changing its containers width & height
simple as that.

thanx in advance.

[bearhead]

Just change the 500px width and height on .devices to vw units:
https://codepen.io/kvana/pen/Wzbboj

[Funkaholik]

so? still element falls apart

maybe we’re talking about different topics?
i don’t need icon to be adaptive to screen width
i need inner elements to be relative properties to its parent element
here is a simple pen
so whenever i change parent element width & height
inner elements would change their property relatively to its parent

So for now if you’ll change .container width&height lines will falls apart
how i can avoid it?

[Shikkediel]

This should scale properly:

.line:before, .line:after {
  content: '';
  width: 1px;
  height: 48%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: -54%;
  margin: auto;
  background-color: #000;
  transform-origin: 0 0;
}

.line:before {
  transform: rotate(45deg);
}

.line:after {
  transform: rotate(-45deg);
}

[bearhead]

couldn’t you just use the .devices element as the icon container and change its width and height to resize the icon?

Like so:
https://codepen.io/kvana/pen/zWxoBO

I guess I don’t understand what you’re looking for?

If you want the line weight to scale too, you could also define that with vw:

.laptop {
  border: .1vw solid rgba(0, 190, 251, 1);
}

[Funkaholik]

geniously .. transform-origin trick?
don’t relax .. will be more further))

P.S. thanx anyway, bearhead.,)

[Funkaholik]

i was hoping that i won’t have to write again but
i did another pen
can yuo take a look what i’m missing here again
its kinda almost works but length of :after elemnts changes not proportionaly
when you change width&height of .main-navbar say to 200px both

[Shikkediel]

All I can see is that main-navbar__l-col is smaller than the one on the right. Seems to be caused by “contact” being larger than the other buttons. Not sure of the exact mechanism behind it.

[Shikkediel]

Try this:

.main-navbar div {
  min-width: 120px;
}

That’ll make it scale symmetrically at least.

[Author]

Posts