Give help. Get help.

  • # March 6, 2018 at 1:49 pm

    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?

    # March 6, 2018 at 11:39 pm

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

    # March 7, 2018 at 1:05 am

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

    # March 7, 2018 at 11:34 am

    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;

    # March 9, 2018 at 5:49 am

    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

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

    thanx in advance.

    # March 9, 2018 at 7:50 am

    Just change the 500px width and height on .devices to vw units:

    # March 9, 2018 at 8:43 am

    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?

    # March 9, 2018 at 11:11 am

    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);
    # March 9, 2018 at 12:24 pm

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

    Like so:

    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);
    # March 9, 2018 at 12:26 pm

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

    P.S. thanx anyway, bearhead.,)

    # March 9, 2018 at 2:51 pm

    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

    # March 10, 2018 at 5:49 am

    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.

    # March 10, 2018 at 8:45 am

    Try this:

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

    That’ll make it scale symmetrically at least.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.