CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsiveheading
Erol Aliyev
Erol Aliyev

Reputation: 65

Responsive Text Heading

I want to make text heading responsive. As you can see in the here, heading is "The Swift List". How can I make words "THE" and "LIST" to stay at the edges of the word "SWIFT"? I have managed to do so in normal screen size, but when I change screen size, it does not remain as before (at the edges of word "SWIFT").

For those who dont want to open in new tab. The code I have written:

HTML

<p><span class="wordThe">THE</span>
<br><span class="textSwift">SWIFT</span>
<br><span class="wordList">LIST</span>


.carInfo {
  background: #05196b;
  height: 291px;
  color: #fff;
  padding: 15px 50px;
}
.wordThe {
  font-weight: bold;
  color: #ff1414;
  font-size: 2.5em;
  padding-left: 12%;
}
.textSwift {
  padding-left: 24%;
  font-style: italic;
  font-size: 4.5em;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
}
.wordList {
  font-weight: bold;
  color: #ff1414;
  font-size: 2.5em;
  padding-left: 67%;
}
.textAtRight {
  text-align: justify;
  direction: rtl;
  clear: both;
  float: right;
  letter-spacing: 1.5px;
}
<div class="row">
  <div class="col-md-6">
    <div class="carInfo">
        <p><span class="wordThe">THE</span>
        <br><span class="textSwift">SWIFT</span>
        <br><span class="wordList">LIST</span>
        <span class="textAtRight"><br>Lorem ipsum dolor sit amet
        <br>Consectetur adipisicing elit
        <br>dolor in reprehenderit in voluptate
        <br>velit esse cillum dolore eu
        <br>proident, sunt in culpa qui officia</span></p>
    </div>
  </div>
</div>

Upvotes: 0

Views: 687

Answers (3)

Rahul Das
Rahul Das

Reputation: 172

Change the css at the following parts:

.wordThe {
  font-weight: bold;
  color: #ff1414;
  font-size: 4.5vw;
  padding-left: 6vw;
}
.textSwift {
  padding-left: 22vw;
  font-style: italic;
  font-size:6.5vw;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
}
.wordList {
  font-weight: bold;
  color: #ff1414;
  font-size: 4.5vw;
  padding-left:52vw;
}

vw is calculated as 1/100th of your viewport width, which changes dynamically as you resize your screen.similarly you can apply the same for other texts if you want them to be responsive too.

Upvotes: 1

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Make use of pseudo elements and data-attributes

CSS

.carInfo {
    background: #05196b;
    height: 291px;
    color: #fff;
    padding: 15px 50px;
    text-align:center;
}

.textSwift {
  font-style: italic;
  font-size: 4.5em;
  font-weight: bold;
  color: #fff;
  line-height: 0.5;
  display:inline-block;
  position: relative;
  padding:3.5rem 0;
}

.textSwift::before{
  content:attr(data-before);
  position: absolute;
  font-weight: bold;
  color: #ff1414;
  font-size: 3.5rem;
  top:0;
  left:0;
}

.textSwift::after{
  content:attr(data-after);
  position: absolute;
  font-weight: bold;
  color: #ff1414;
  font-size: 3.5rem;
  bottom:0;
  right:0;
}


.textAtRight {
  text-align: justify;
  direction: rtl;
  clear: both;
  float: right;
  letter-spacing: 1.5px;
}

HTML

<div class="row">
    <div class="col-md-6">
      <div class="carInfo">
        <p>
            <div>
                <span class="textSwift" data-before="THE" data-after="LIST">SWIFT</span>
            </div>

        <span class="textAtRight">
            <br>Lorem ipsum dolor sit amet
            <br>Consectetur adipisicing elit
            <br>dolor in reprehenderit in voluptate
            <br>velit esse cillum dolore eu
            <br>proident, sunt in culpa qui officia
        </span>

        </p>
      </div>
    </div>
    </div>

hope this helps..

Link for reference

Upvotes: 1

joeldesante
joeldesante

Reputation: 244

Make use of media queries to help you change the code at different widths.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

What I think you should do is make use of the queries and flexbox to achieve this.

I hope I have somewhat answered your question. I am visually having a difficult time understanding what it is you want so if I come up with a code example I will share it.

Upvotes: 0

Related Questions