0

Screen shot

Below is the HTML and CSS that I have used which is not response. I wanted to know how to make the output responsive. Is there a way to do the same using bootstrap?

.red-hori-line-2 {
  border: 1px solid red;
  width: 75px;
  padding-top: -32px;
  margin-top: -32px;
  padding-left: 320px;
  margin-left: 320px;
}

.red-hori-line-3 {
  border: 1px solid red;
  width: 75px;
  padding-top: -10px;
  margin-top: -10px;
  padding-right: 320px;
  margin-right: 320px;
}

.red-vert-line-1 {
  border-left: 2px solid red;
  height: 60px;
  padding-top: -10px;
  margin-top: -10px;
  padding-left: 320px;
  margin-left: 320px;
}

.red-vert-line-2 {
  border-left: 2px solid red;
  height: 60px;
  padding-top: -60px;
  margin-top: -60px;
  padding-left: 1246px;
  margin-left: 1246px;
}
<div>
  <center>
    <p class="in-focus">IN FOCUS</p>
  </center>
</div>
<hr class="red-hori-line-2" />
<hr class="red-hori-line-3" />
<div class="red-vert-line-1"></div>
<div class="red-vert-line-2"></div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Abdullah Khan
  • 25
  • 3

1 Answers1

1

Your code seems overly complex

How about

fieldset {
  border: 1px solid red;
  border-bottom: 1px solid white;
  height: 5vh;
}

legend {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

legend span {
  padding: 2vw;
  font-family: "Helvetica Narrow", "Arial Narrow", Tahoma, Arial, Helvetica, sans-serif;
}
<fieldset>
  <legend><span>IN FOCUS</span></legend>
</fieldset>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • A neat solution, but (at least on IOS Safari) I see occasional thin red lines from the border to the text. I imagine this is the known phenomenon of screen pixels being ‘left behind’ when the system converts between CSS and screen pixels. Putting background: white on the span gets rid of at least most of it. – A Haworth Jan 21 '23 at 07:18
  • @AHaworth - I do not see this: https://imgur.com/a/xUUzkO9 – mplungjan Jan 21 '23 at 08:45
  • 1
    It varies with device and zoom for me - most of the time not seen. – A Haworth Jan 21 '23 at 08:53
  • Ah, I see it - I have to zoom in a lot in portrait: https://imgur.com/a/t9dvm9D - would that also happen with OP's original once he fixed it? – mplungjan Jan 21 '23 at 08:56