Difficulties in responsive issue

I am trying to make a fieldset with css where legend is centered!I am having two issues 1st one is the box size changes according to its content but i want to keep same size for all the fieldset no matter the content is bigger from others or not.How to attain this ?

The 2nd issue is: i am trying to add a handle to the upper part of the legend so that so that it looks like a briefcase.This works nice for normal skins but in smaller skins this handle is displaced from the origin.How to fix this so that the handle becomes responsive and do not displaced in smaller skins ? Here is the DEMO of the problem.

Handle:

.handle {
  position: absolute;
  top: -28px;
  left: 50%;
  border: 12px solid rgba(77, 53, 33, 1);
  border-bottom: 0 none;
  width: 48px;
  height: 28px;
  margin-left: -30px;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}

Answers


This will fix your handle issue.

.handle {
  top: -45px;
}

@media screen and (min-width: 768px) {
  .handle {
    top: -28px;
   }
}

And this will fix your height issue.

@media screen and (min-width: 768px) {
  .inner-child {
    min-height: 300px;
  }
}

The second Issue can be solved setting "top:auto" and move higher the handle with "margin-top:-46px"

.handle {
 position: absolute;
 top: auto;
 margin-top:-46px;
 left: 50%;
 border: 12px solid rgba(77, 53, 33, 1);
 border-bottom: 0 none;
 width: 48px;
 height: 28px;
 margin-left: -30px;
 -webkit-border-radius: 10px 10px 0 0;
 -moz-border-radius: 10px 10px 0 0;
 border-radius: 10px 10px 0 0;
}

For increase the vertical gap between boxes you could increase to 70px, or more, the margin from bottom.

.feature .inner-child{ 
   ...
   margin: 15px 0 70px 0;
}

the first issue can be solved via Jquery calculating the higher block and set the same height to all others box. You can create an iteration that find the maximum height of ".inner-child" elements and set this height to all.

jQuery(document).ready(function(){        
     var maxHeight = 0;

     $(".inner-child").each(function(key, value){ //Create a iteration of all .inner-child elements
        maxHeight = Math.max($(value).height(), maxHeight); //find the height of higher box
     });

    $(".inner-child").css("height", maxHeight); //Set height

  });

I create a DEMO of this solution.


Need Your Help

SpriteKit: physics polygon error

objective-c macos sprite-kit

I am trying to initialize a SKPhysicsBody with a Polygon from a CGPath.

Converting to a specific date format?

c# asp.net-mvc format

I am making a webpage in Asp.net MVC. I need to format a datetime into the correct format.