Remove the extra space in block element

Question

I prefer providing the actual code makes sense to this question. I have the following working code.

.vc-section-heading {
  text-align: left;
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  padding-top: 0;
  padding-left: 30px;
  padding-right: 30px;
  color: #1a2431;
  font-size: 34px;
}

.vc-section-heading h1 {
  margin-top: 0;
  margin-bottom: 30px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  width: auto;
  bottom: auto;
  left: auto;
  top: 50%;
  -webkit-transform: translateY(-65%) !important;
  -moz-transform: translateY(-65%) !important;
  -ms-transform: translateY(-65%) !important;
  -o-transform: translateY(-65%) !important;
  transform: translateY(-65%) !important;
  color: #b18d56;
}

.vc-section-heading h1:before {
  content: '[';
  left: 0 !important;
  right: auto !important;
}

.vc-section-heading h1:after {
  content: ']';
  right: 0 !important;
  left: auto !important;
}

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1 style="text-transform: none;/* display: inline; */">We Have 25 Years Of Experience</h1>
</div>

Here I am facing a problem in responsive design. When it comes to iPad or lesser devices the content of h1 is breaking into the next line, but the h1:after doesn't fit the width. It stays in the corner and providing an unexpected space.

To make it more clear I set the body width to 500px here.

BODY {
  WIDTH: 500PX;
}

.vc-section-heading {
  text-align: left;
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  padding-top: 0;
  padding-left: 30px;
  padding-right: 30px;
  color: #1a2431;
  font-size: 34px;
}

.vc-section-heading h1 {
  margin-top: 0;
  margin-bottom: 30px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  width: auto;
  bottom: auto;
  left: auto;
  top: 50%;
  -webkit-transform: translateY(-65%) !important;
  -moz-transform: translateY(-65%) !important;
  -ms-transform: translateY(-65%) !important;
  -o-transform: translateY(-65%) !important;
  transform: translateY(-65%) !important;
  color: #b18d56;
}

.vc-section-heading h1:before {
  content: '[';
  left: 0 !important;
  right: auto !important;
}

.vc-section-heading h1:after {
  content: ']';
  right: 0 !important;
  left: auto !important;
}

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1 style="text-transform: none;/* display: inline; */">We Have 25 Years Of Experience</h1>
</div>

As you can see here, the text Experience is went to the next line and ] is staying in the end with a space with the content. How can remove this unwanted space?

The output I am currently getting is,

The output I am looking for is,

@Roy I tried it. But it gave no changes. Actually I tried inline, inline-block and some stuffs with width. Since the value of the h1 and span are dynamic, I can go for a pixel value — Ramesh, Mar 14 '19 at 09:44
@Ramesh But, what do you need? down the **]** or up _experience_? — Roy Bogado, Mar 14 '19 at 09:45
@Roy actually the `]` has to come after the `h1` where it's content ends relative to the width. `width:fit-content` even not supporting to my problem — Ramesh, Mar 14 '19 at 09:48
what if you remove the position absolute from beforeand after — godfather, Mar 14 '19 at 09:58

coops · Answer 1 · 2019-03-14T10:31:12.500

I have added margin to the heading (instead of padding), this then allows you to move the :before and :after into the margin with -20px.

@media screen and (max-width:767px) {
  .vc-section-heading h1 {
    max-width: 320px;
  }
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  margin: 0 20px;
  color: #1a2431;
  margin-top: 0;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  width: auto;
  bottom: auto;
  left: auto;
  top: 50%;
  transform: translateY(-65%) !important;
  color: #b18d56;
}

.vc-section-heading h1:before {
  content: '[';
  left: -20px;
}

.vc-section-heading h1:after {
  content: ']';
  right: -20px;
}

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1>We Have 25 Years Of Experience</h1>
</div>

You can see this working with different lengths of text here:

@media screen and (max-width:797px) {
  .vc-section-heading {
    max-width: 320px;
  }
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  margin: 0 20px;
  color: #1a2431;
  margin-top: 0;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  width: auto;
  bottom: auto;
  left: auto;
  top: 50%;
  transform: translateY(-65%) !important;
  color: #b18d56;
}

.vc-section-heading h1:before {
  content: '[';
  left: -20px;
}

.vc-section-heading h1:after {
  content: ']';
  right: -20px;
}

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1>We Have 25 Years</h1>
</div>

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1>We Have 25 Years Of Experience this text string is a lot longer</h1>
</div>

This has to be the output. But the content goes beyond the parent element's width. Set body `width:500px`, still the inner content is out of the body width. — Ramesh, Mar 14 '19 at 10:20
@Ramesh I see what you mean! You could add in a media query so that the max-width is set for smaller devices which makes it stack? I have updated my answer above - you can view the different with full screen :-) — coops, Mar 14 '19 at 10:33
Contents are dynamic as I mentioned in the comment section. When the content is smaller, it won't need the media query as well as the query depends on the content. Lets say a sentence like "Hello I am here to say that I am not well prepared", All the words in the above sentence have very few letters. So it makes major changes in multiple divice break points — Ramesh, Mar 14 '19 at 10:37
@Ramesh. Yes i can see that this string works too - have you tried the code above? The brackets are set to be at the end of the block, no matter how many words are there. With the media query, you are just making sure that the block doesn't overflow on smaller devices :-) — coops, Mar 14 '19 at 11:05

Moorthy G · Accepted Answer · 2019-03-14T11:04:07.697

0

Here is the js solution.

https://jsfiddle.net/moorthyrweb/hgfs9kb3/3/

Modified html

<h1>
   <span>We Have 25 Years Of Experience</span>
</h1>

javascript

function fitWidth(el) {
    el.style.width = '';
  // Add 1 to fix floating point error correction
  el.style.width = `${el.children[0].offsetWidth + 1}px`;
  el.style.display = '';
}

const element = document.querySelector('h1');
fitWidth(element);

// If body width is not fixed, you can call it in resize event
window.addEventListener('resize', function() {
    fitWidth(element);
})

edited Mar 14 '19 at 11:04

answered Mar 14 '19 at 09:52

Moorthy G

1,441
8
9

Thank you for your time on this question sir. In your answer, the `]` ends with the line. Instead, I want the bracket to end with the entire content and vertically centre aligned. – Ramesh Mar 14 '19 at 09:55
Would you like a javascript solution? – Moorthy G Mar 14 '19 at 10:27
Not an issue. Go ahead – Ramesh Mar 14 '19 at 10:34
Modified the answer for js solution – Moorthy G Mar 14 '19 at 11:04
Did you made any css changes? – Ramesh Mar 14 '19 at 11:34
No CSS changes required – Moorthy G Mar 14 '19 at 13:08

score 0 · Answer 3 · answered Mar 14 '19 at 10:37

0

Try adding text-align: justify; to h1 to fill all the space.

.vc-section-heading h1 {
  text-align: justify;
}

answered Mar 14 '19 at 10:37

Mahmoud Salem

104
1
5

It's adding more spaces between the words. – Ramesh Mar 14 '19 at 10:38

Remove the extra space in block element

3 Answers3