Allow vw and vh units for all measurements. #3907

abalter · 2021-10-31T06:03:25Z

abalter
Oct 31, 2021

Currently, the viewport measurements are limited by some assumptions. For example, the width setting only offers vw units, and the height setting only allows vh. That makes it impossible to make a responsive layout such as this:

https://codepen.io/abalter/pen/oNeZpLL

index.html

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="schedule.css">
    <link href='https://fonts.googleapis.com/css?family=Architects Daughter' rel='stylesheet'>
    <title>Flexbox</title>
  </head>
  <body>
    <div class="header-container">
      <!-- logo -->
      <div class="logo-container">
        <img id="logo" src="https://placeholder.pics/svg/800x200/b33/000/Logo" />
      </div>
    
      <!-- headshot -->
      <div class="headshot-container">
        <img id="headshot" src="https://dummyimage.com/600x600/3a3/000.jpg&text=Headshot" />
        <div id="karen-info">
          <div id="name">First Last</div>
          <div id="license">#12345 | #67890</div>
        </div>      </div>
    
      <!-- menu button -->
      <div class="menu-container">
        <img id="menu" src="https://openclipart.org/download/221605/menu-icon.svg" />
      </div>
    </div>

style.css

:root {
  --header-height: 10vw;
}

body {
    /* border: 2px dashed red; */
}

div {
  box-sizing: border-box;
}

.header-container {
  background: #5F6215;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: var(--header-height);
  max-width: 100vw;
}

.logo-container {
  display: flex;
  height: var(--header-height);
  padding: 0.3vw;
}

#logo {
  height: 100%;
}

.headshot-container {
  display: flex;
  height: calc(var(--header-height) * 1.3);
  transform: translate(2vw, 0);
}

#headshot {
  border-radius: 50%;
  border: 0.5vw solid #5F6215;
  /* border: 3px solid white; */
  height: 100%;
}

#karen-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  font-family: 'Architects Daughter';
  color: white;
  font-weight: 900;
  font-variant: small-caps;
  padding-left: 0.5vw;
}

#name {
  font-size: 2vw;
}

#license {
  font-size: 1.2vw;
}

.menu-container {
  display: flex;
  height: calc(var(--header-height) * 1);
  padding: 2vw;
}

#menu {
  height: 100%;
}

artf · 2021-11-17T13:49:23Z

artf
Nov 17, 2021
Maintainer

You can configure each style manager property as you wish https://grapesjs.com/docs/getting-started.html#style-manager

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Allow vw and vh units for all measurements. #3907

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Allow vw and vh units for all measurements. #3907

Uh oh!

abalter Oct 31, 2021

Replies: 1 comment

Uh oh!

artf Nov 17, 2021 Maintainer

abalter
Oct 31, 2021

artf
Nov 17, 2021
Maintainer