0

I have a styled headline inside an CMS system with a background color. When the headline wraps on mobile devices (example width would be 500px), there is a large space on the right and the width of the div does not adjust.

How can I manage to do that?

.inside {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.ce_headline {
  display: flex
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.ce_headline.angled h2 {
  clip-path: polygon(2vh 0, 100% 0, calc(100% - 2vh) 100%, 0 100%);
  padding: 10px 40px;
  -webkit-clip-path: polygon(2vh 0, 100% 0, calc(100% - 2vh) 100%, 0 100%);
}

.ce_headline h2 {
  font-family: Raleway, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 800;
  color: #fff;
  background: green;
}
<div class="inside">
  <div class="col-12 ce_headline angled">
    <h2 class=""> That is an example headline</h2>
  </div>
</div>
Pushprajsinh Chudasama
  • 7,772
  • 4
  • 20
  • 43
kchristmann
  • 1

1 Answers1

-1

G'day mate!

Just add this code into your <style> </style> parameters!

body{margin:0;padding:0;}
*{box-sizing: border-box;}
And Aydın
  • 84
  • 4