How to make a header ribbon responsive


Tags: html,css,responsive-design

Problem :

I have the following JSFiddle: http://jsfiddle.net/eotamvwy/

HTML:

<div class="infobox-container">
    <div class="triangle-l"></div>
    <div class="triangle-r"></div>
    <div class="infobox">
        <h3><span>This is the Header</span></h3>
        <p>This is the content of the infobox.<p/>
    </div>
</div>

How can I modify the CSS so that it is responsive?

I have a div which has the following style:

width: 98%
padding: 0 1% 0 1%

I want to insert the infobox-container inside and stretch it 100% and resize based on the above div.



Solution :

Use percentage units for responsiveness and for triangles you don't need extra elements, you could use :after and :before :pseudo-elements on .infobox h3.

enter image description here

Updated Fiddle

body {
  width: 100%;
  margin: 0;
}
.main-container {
  width: 98%;
  padding: 0 1% 0 1%;
  text-align: center;
}
.infobox-container {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 100%;
}
.infobox {
  width: 80%;
  padding: 10px 5px 5px 5px;
  margin: 10px;
  position: relative;
  z-index: 1;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
  background: #424242;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
  background-image: -moz-linear-gradient(top, #6a6a6a, #424242);
  color: #fff;
  font-size: 90%;
}
.infobox h3 {
  position: relative;
  width: calc(100% + 22px);
  color: #fff;
  padding: 10px 5px;
  margin: 0;
  left: -15px;
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
  background: #3198dd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
  background-image: -moz-linear-gradient(top, #33acfc, #3198dd);
  font-size: 160%;
  text-align: center;
  text-shadow: #2187c8 0 -1px 1px;
  font-weight: bold;
}
.infobox h3:before,
.infobox h3:after {
  content: '';
  border-color: transparent #2083c2 transparent transparent;
  border-style: solid;
  border-width: 12px;
  height: 0;
  width: 0;
  position: absolute;
  left: -12px;
  top: 100%;
  transform: translateY(-50%);
  z-index: -1;
  /* displayed under infobox */
}
.infobox h3:after {
  border-color: transparent transparent transparent #2083c2;
  left: 100%;
  margin-left: -12px;
}
.infobox a {
  color: #35b0ff;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.infobox a:hover,
.infobox a:focus {
  text-decoration: none;
  border-bottom: 1px dotted #35b0ff;
}
<div class="main-container">
  <div class="infobox-container">
    <div class="infobox">
      <h3><span>This is the Header</span></h3>
      <p>This is the content of the infobox.</p>
    </div>
  </div>
</div>


    CSS Howto..

    How to change the style of the arrow in a select box using css

    How to fit your website for all or at lest most screen resolutions?

    How to fix CSS background position

    CSS - How to Draw a Multi-Coloured Line?

    How can I get 3 lines of text on the same line and still be able to position them?

    How to overflow in CSS/HTML? [closed]

    How to make a pie chart in CSS

    how you can change the style of the page without changing CSS files?

    How to override the default css class using c#

    How do I correct this CSS fluid layout glitch?

    How to make an image appear over another image when mouse hovers with css3?

    how can resize dynamically the logo of the header?

    How to get css to work in Django [closed]

    How can I transform dots to line between CSS menu items?

    How to make stylish pageviews counter using html and css? [closed]

    How can I make this menu using only anchor tag and css Not using ul and li?

    How do I create a menu that appears on hover?

    • centered, not moving down.. unsure why / how to fix

    How to access CSS on img tag

    How to change CSS style of div after onclick method

    How do I prevent text from flowing onto different sections of a page?

    How can I position a web page in the middle of the screen?

    How do I get this CSS text-decoration override to work?

    How do I pre-hide something in preparation to expose it in a jQuery animation?

    How to solve this layout design-error due to conflicting css?

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    How to include Glyphicons without using Bootstrap CSS

    CSS3 Menu Shows Up Wrong (CSS3/HTML5)

    I can't make the a Background image display & and can't figure out how to fit text into the image

    How to make image control button for each image inside the div using css and js?