0

I am trying to make two compositions that are vertically responsive at browser resize. I have an example here and I am using Adobe Muse.

The red box and blue box is what I am trying to achieve in terms of responsive when you resize the browser vertically. The green square is a composition that has no text in it and it behaves as it should. However, when I add text, it happens what you see in the dark blue button with text. How can I make the text inside the composition vertically centered and still behave like the green, red or blue box?

The code I added so far for all of them is:

<style>
.redbox {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
}
.bluebox {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
}
.green-button {
height: 50vh !important;
min-height: 50vh !important;
position: relative;
}
.darkblue {
display: block;
height: 50vh !important;
min-height: 50vh !important;
position: relative;
}
</style>

Thank you!!!

WhiteShip
  • 1
  • I'm not sure what u mean, but removing padding from dark-blue and set height to 100vh makes it same height as the two one. can u provide html too or desire result? – nullqube Feb 26 '18 at 21:18
  • thanks for responding. What I am trying to achieve is something like this: http://inlumeapovestilor.ro/vertical/test.html but add some text in the middle of each block. I also want that text to remain centered inside it's composition when the browser is vertically resized. Those are simple rectangles for example purposes, but they are vertically responsive if you resize the browser. I can make a composition do that, but when I put text in it everything goes crazy. Sorry if I am not making any sense. – WhiteShip Feb 26 '18 at 21:43

2 Answers2

0

If I have understood correctly, you want to center text on a div regardless of the div height. You can do it with flexbox, or with absolute positioning.

I recommend the first option. with a display: flex and align-items: center; in div, it would be enough to center the contents inside the container.

However, if the text is too long, you should add mediaquerys to change the font size to adapt it to the screen size, or at a certain minimum height, set the height of the divs fixed with min-heigh in pixels, for example.

Example flexbox and absolute positioning

Edit

So you are looking for something like this:

Example

Rinho
  • 564
  • 3
  • 8
  • That is correct in terms of what I am trying to achieve and the example you gave looks like it is what I'm looking for. I will look into it. So far I have done what you said and the text stays in the middle relative to the orange composition, but the composition stretches more than 50% browser height. Here is what I've done so far: http://inlumeapovestilor.ro/vertical/index.html – WhiteShip Feb 26 '18 at 22:31
  • I should mention that on my canvas they are all aligned as the red and blue box. When I export, the composition is much higher than it should be. If I delete the text inside, it comes back to 50% browser height. – WhiteShip Feb 26 '18 at 22:33
  • OK, so I've made a basic non responsive version of what I am trying to achieve: http://inlumeapovestilor.ro/vertical/target.html They are simple state buttons and the text is not long, it will be "web design", "photography", etc. Some basic categories. – WhiteShip Feb 26 '18 at 22:46
  • Okay, I've updated my answer with what I think is what you're looking for. – Rinho Feb 27 '18 at 12:52
  • Yes, that's exactly what I am looking for. I will look into it and I will update my progress but it will take a while because I have paused the project for the moment. Thank you very much for taking the time to answer my question, I really appreciate it. – WhiteShip Mar 08 '18 at 01:41
0

what you want is called "Responsive Grid" here you can find more about it:

https://www.w3schools.com/cSS/css_rwd_grid.asp

https://purecss.io/grids/

https://www.creativebloq.com/how-to/create-a-responsive-layout-with-css-grid

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout

and for vertically centering things :

https://www.w3.org/Style/Examples/007/center.en.html

https://www.w3schools.com/css/css_align.asp

https://css-tricks.com/centering-css-complete-guide/

flex is something rather relatively new (IE11.0+) so if you want it cross browser then forget about it for now.

html, body {
  background:#333;
  height:100%;
 }
 .grid {
   box-sizing: border-box;
   padding:12.5%;
 }
 .grid > div {
   float:left;
   box-sizing: border-box;
   width:33.33%;
   height: 50vh;
   line-height:50vh;
   text-align:center;
 }
 .red {
   background:red;
 }
 .green {
   background:green;
 }
 .blue {
   background:blue;
 }
  .orange {
   background:orange;
 }
 .white {
   background:white;
 }
 .brown {
   background:brown;
 }
 .brown > span {
   display:inline-block;
   line-height:12px;
 }
<div class="grid">
<div class="red">
  Some Text here
</div>
<div class="green">
  Some Text here
</div>
<div class="blue">
  Some Text here
</div>
<!-- next row -->
<div class="orange">
  Some Text here
</div>
<div class="white">
  Some Text here
</div>
<div class="brown">
  <span>This can be longer text or even multiple lines</span>
</div>
</div>
nullqube
  • 2,959
  • 19
  • 18
  • https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers – nullqube Feb 27 '18 at 07:52
  • https://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div – nullqube Feb 27 '18 at 07:52
  • Thanks for the info, I will study the links you sent. Thanks again and I appreciate it. Very helpful information. – WhiteShip Mar 08 '18 at 01:43