make responsive a css + html design

Question

I created a layout with 4 columns centered with margin and a triangle as an arrow-down with a star in the middle...

this is working nice in my computer:

But triangle and star are far away to be responsive, only way I achieved to position it correctly is with absolute position:

.triangle-down {
    display: block;
    position: absolute;
    top: 0;
    left: 318px;
    width: 0;
    height: 0;
    border-left: 532px solid transparent;
    border-right: 532px solid transparent;
    border-top: 400px solid blue;
}

.star {
    display: block;
    position: absolute;
    vertical-align: middle;
    font-size: 250px;
    text-align: center;
    color: white;
    top: -434px;
    left: -109px;
}

How can I put the element in top of the others and make it responsive in the same way columns and it's margins?

NOTES:

layout is a countdown, but javascript is not important for the question.
You can find a functional (no JS) fiddle here
You can see actual result (with JS) here
I can use sass if necessary

So, do you need to achive the same result that on the picture, but in a responsive way? — Artsiom Miksiuk
– Artsiom Miksiuk, Commented Jun 20, 2017 at 18:58
@QuestionAndAnswer yes.... or ar least resizeable in some way.... — joc
– joc, Commented Jun 20, 2017 at 19:01

Ondra Koupil · Accepted Answer · 2017-06-23 09:48:10Z

How about this updated fiddle?

https://jsfiddle.net/ondrakoupil/0rtvcnon/11/

Basically, these are the changes:

use flexbox for column layout
sizes are measured using viewport-relative units (vw)
triangle is created as standard rectangular <div> and rotated via CSS - you have better control over its position and size

There are some CSS3 techniques used. For IE, you'll need to prefix them in CSS (use Autoprefixer). Other browsers should handle it "as it is".

html, body {
    height: 100%;
    margin: auto;
    padding-left:1%;
    background: yellow;
    font: normal 16px 'Roboto', sans-serif;
}

.container {
  margin: auto;
  width: 80%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.bar {
    background: red;
    font-weight: 700;
    text-align: center;
    color: yellow;
    width: 15%;
}

.init {
    position:absolute;
    bottom: 10px;
    right: 20px;
    background: yellow;
    margin-left: 0px;
    font-weight: 700;
    text-align: right;
    color: red;
}

a:link, a:visited {
    color: red;
    text-decoration: none;
}


::-moz-selection {
    color: yellow;
    background: red;
}

::selection {
    color: yellow;
    background: red;
}

p.numbers {
    font-size: 8vw;
    margin-top: 45vw;
    margin-bottom: 20px;
}

p.meta, p.strings {
    font-size: 2vw;
}

h1 {
    font-size: 4.5em;
}

.triangle-down {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.triangle-color {
  margin: auto;
  width: calc(80vw / 1.4142);
  height: calc(80vw / 1.4142); /* sqrt of 2 */
  background-color: blue;  
  transform: translateY(calc(-1 * 80vw / 1.4142 / 2)) rotate(45deg);
}

.star {
    position: absolute;
    vertical-align: middle;
    font-size: 15vw;
    text-align: center;
    color: white;
    top: 5vw;
    left: 0;
    right: 0;
    z-index: 1;
}

<body>
    <div class="container">    
      <div class="triangle-down">
         <div class="triangle-color"></div>
          <div class="star">&#9733;</div>
      </div>
      <div class="bar">
          <p id="d" class="numbers days">00</p>
          <p class="strings">DIES</p>
      </div>
      <div class="bar">
          <p id="h" class="numbers hours">00</p>
          <p class="strings">HORES</p>
      </div>
      <div class="bar">
          <p id="m" class="numbers minutes">00</p>
          <p class="strings">MINUTS</p>
      </div>
      <div class="bar">
          <p id="s" class="numbers seconds">00</p>
          <p class="strings">SEGONS</p>
      </div>
    </div>
    <div class="init">
        <a href="http://www.xocdetrens.cat/inici/" target="_blank">ENTRA</a>
    </div>    
</body>

Artsiom Miksiuk · Accepted Answer · 2017-06-23 09:21:14Z

1

Take a look at this. I was need to rewrite it from scratch, because you've got a lot of absolutes and they all calculated through js, as I understood. Hope, this will satisfy your requirements.

html, body {
    margin: 0;
    height: 100%;
}

.container {
    width: 100%;
    height: 100%;
    background-color: yellow;
    font: normal 16px 'Roboto', sans-serif;
    position: relative;
}

.triangle-aspect-keeper {
    width: 50%;
    padding-bottom: 50%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.triangle-container {
    
}

.triangle-down {
    width: 100%;
    height: 100%;
    background-color: blue;
    transform: rotate(45deg);
    position: absolute;
    top: -50%;
    left: 0;
}

.star {
    font-size: 1100%;
    text-align: center;
    color: white;
    width: 100%;
    line-height: 200%;    /* control star vertical position */
    position: absolute;
    top: 0;
    left: 0;
}

.bar-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.bar-inner-container {
    margin-left: auto;
    margin-right: auto;
    width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.bar:first-child {
    margin-left: 0;
}

.bar {
    background-color: red;
    height: 100%;
    width: 15%;
    color: yellow;
    font-weight: 700;
}

p.numbers {
    font-size: 5em;
    margin-top: 350%;
}

p.meta, p.strings {
    font-sie: 1.5em;
}

a:link, a:visited {
    color: red;
    text-decoration: none;
}

.init {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
    font-weight: 700;
}

<body>
    <div class="container">
        <div class="bar-container">
            <div class="bar-inner-container">
                <div class="bar bar-first">
                    <p id="d" class="numbers days">00</p><br>
                    <p class="strings">DIES</p><br>
                </div>
                <div class="bar bar-second">
                    <p id="h" class="numbers hours">00</p><br>
                    <p class="strings">HORES</p><br>
                </div>
                <div class="bar bar-third">
                    <p id="m" class="numbers minutes">00</p><br>
                    <p class="strings">MINUTS</p><br>
                </div>
                <div class="bar bar-fourth">
                    <p id="s" class="numbers seconds">00</p><br>
                    <p class="strings">SEGONS</p><br>
                </div>
            </div>
        </div>
        <div class="triangle-aspect-keeper">
          <div class="triangle-container">
              <div class="triangle-down"></div>
              <div class="star">&#9733;</div>
          </div>
        </div>
        <div class="init">
            <a href="http://www.xocdetrens.cat/inici/" target="_blank">ENTRA</a>
        </div>
    </div>
</body>

edited Jun 23, 2017 at 9:21

answered Jun 20, 2017 at 20:34

Artsiom Miksiuk

4,36310 gold badges39 silver badges53 bronze badges

5 Comments

joc Over a year ago

sorry for late answer, no time till now... I really appreciate your work, but this is not what I needed, is fixed size (not resizeable or responsive....), I will start a bounty in 20 minutes, feel free to improve your answer ;), also, no javascript for styling elements is used in my proposal...

Artsiom Miksiuk Over a year ago

@joc, did you saw the the comments in code where it is said that you can use persents or rems? Take a look inside .triangle-container. The only hardcoded things is body width, which represents only window size and triangle size, that can be switched to percents. How did you test resizables of this layout?

Artsiom Miksiuk Over a year ago

@joc, And could you explain where it is not responsive in this case? What breaks responsivness here?

joc Over a year ago

The answer you presented is not responsive... thats all, sorry if you don't like my opinion. Anyway, good for you, if so you can easily improve your answer and get +50 rep bounty.

Artsiom Miksiuk Over a year ago

@joc, I've updated my answer. Tested with several mobile devices in simulation. Galaxy, IPhones and IPads. Is that what you are trying to achieve?

Mixa · Accepted Answer · 2017-06-24 00:01:12Z

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');

html,
body {
  background: yellow;
  height: 100%;
}

.container {
  position: relative;
  height: 100%;
}

.row {
  height: 100%;
}

.col-xs-3 {
  height: 100%;
}

.col-xs-3,
.col-xs-12 {
  padding: 0 6.25%;
}

.bar {
  color: yellow;
  background: red;
  min-height: 100%;
  padding-top: 333%;
}

.triangle-down {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 1;
}

.triangle-color {
  margin-bottom: -30%;
}

.triangle-color * {
  fill: blue
}

.star * {
  fill: white
}

.numbers {
  font-size: 5vw;
  padding-bottom: 2vw;
}

.strings {
  font-size: 1.5vw;
}

<div class="container text-center">
  <div class="row triangle-down">
    <div class="col-xs-12">
      <svg class="triangle-color" viewBox="0 0 100 40">
        <polygon points="0,0 100,0 50,40"/>
      </svg>
      <svg class="star" viewBox="0 0 1400 188">
        <polygon points="700,0 640,188 790,68 610,68 760,188"/>
      </svg>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <div class="bar">
        <div class="numbers">00</div>
        <div class="strings">DIES</div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="bar">
        <div class="numbers">00</div>
        <div class="strings">HORES</div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="bar">
        <div class="numbers">00</div>
        <div class="strings">MINUTS</div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="bar">
        <div class="numbers">00</div>
        <div class="strings">SEGONS</div>
      </div>
    </div>
  </div>
</div>

Edison D'souza · Accepted Answer · 2017-06-26 05:29:32Z

0

You can simply do this.

HTML:

<div class="parent">
  <div class="triangle">
    <div class="star">
       ...
    </div>
  </div>
</div>

CSS:

.parent {
  width: xx%; /*Whatever percentage*/
  height: yy%; /*Whatever percentage*/
  margin: 0 auto;
  position: relative;
}

.triangle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.star {
  font-size: xx%; /*some percentage (assuming star is a font icon)*/
  position: absolute;
  top: 15vh;
  margin: 0 auto;
}

answered Jun 26, 2017 at 5:29

Edison D'souza

4,6405 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

make responsive a css + html design

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related