[Resolved] responsive text wrap align + transparent background + solid text on centred div

Home Forums Support responsive text wrap align + transparent background + solid text on centred div

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #352752
    theonetruevlad

    Aim: to have a centred div with fluid width that has a semi translucent background with solid text and remains centred on smaller screens after text wrapping.

    Issue: When the screen becomes small enough for the text to wrap the solid text shifts right instead of remaining centred.

    <div id="divboxtable">
      <div id="divboxcell">
        <div id="divbox">
          <div class="divtxtbck">
            <h1>WHAT AM I DOING WITH MY LIFE!</h1>
          </div>
          <div class="divtxtfor">
            <h1>WHAT AM I DOING WITH MY LIFE!</h1>
          </div>
        </div>
      </div>
    </div>
    #divboxtable {
      display: table;
      text-align: center;
      width: 100%;
      height: 100%;
    }
    
    #divboxcell {
      display: table-cell;
    }
    
    #divbox {
      display: inline-block;
      zoom: 1;
      position: relative;
      -moz-border-radius: 6px 6px 6px 6px;
      border-radius: 6px 6px 6px 6px;
    }
    
    .divtxtbck {
      background-color: #fffffa;
      padding: 0 10px 0 10px;
      -moz-border-radius: 6px 6px 6px 6px;
      border-radius: 6px 6px 6px 6px;
      filter: alpha(opacity=50);
      filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
      -moz-opacity: 0.50;
      opacity: 0.5;
    }
    
    .divtxtbck h1 {
    //  visibility: hidden;
      color: red;
    }
    
    .divtxtfor {
      position: absolute;
      top: 0;
      left: 10px;
    }

    I have commented out the hidden nature of the background text so you can see how the alignment differs. The issue seems to be because of the absolute positioning – but how do you overcome this left align issue when the text wraps?

    Fiddle You MUST make the output window narrow until the text wraps – then you will see the solid text is not centred the same as the transparent text.

    GeneratePress 1.3.48
    #353058
    Tom
    Lead Developer
    Lead Developer

    Are you trying to sit one set of text directly over the other?

    #353147
    theonetruevlad

    I was trying to overlay the two because that was the solution I found on Stackoverflow. But I now realise that using RGBA for the background saves all the hassle. I was surprised there wasn’t a simple solution and it turns out there was all along! No idea why the layered text solution was put forward, but it distracted me. All good now thanks.

    #353266
    Tom
    Lead Developer
    Lead Developer

    No problem! Glad you found a better solution 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.