Prevent blockquote text from stretching out

Trying to get this blockquote

It’s being stretched out on this one which I’m trying to prevent.

To look the same as this blockquote.

Hi there asasass,

you have set a fixed width to your .container rules. :eek:

This, of course, will make the page unresponsive. :eek:

I would suggest that you use a max-width instead. :winky:

coothead

This worked

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  width: 936px;
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-top {
  margin: 0;
}

.container-top .header {
  position: relative;
  height: 310px;
  cursor: pointer;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://via.placeholder.com/930x310") no-repeat 0 0;
}

.container-top .header blockquote {
  position: relative;
  width: 400px;
  margin: 8px 0 0 14px;
}

.container-top .header blockquote p {
  display: inline;
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
  text-decoration: none;
}

.container-top .header blockquote cite {
  color: #999999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

a {
  text-decoration: none;
}

.container-top .header .play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 68px;
  height: 48px;
}

.container-top .header .front {
  fill: #212121;
  fill-opacity: 0.8;
}

.container-top .header:hover .front {
  fill: #f00;
}

.container-top .header .middle {
  fill: #fff;
}

a:focus {
  outline: 0;
}

.hide {
  display: none;
}
<div class="outer">
  <div class="tcell">
    <audio></audio>
    <div class="container ">
      <div class="container-top  ">
        <a href="" target="_blank">
          <div class="header" title="New Video">
            <blockquote>
              <p> <q>Never let society to turn you into a grain of sand on the
                  beach. Be different, be individual. Refuse to look alike
                  with others. Leave your herd, only then you will have a
                  real name and till then your name will remain as the grain
                  of sand.</q>
              </p>
              <cite> - Mehmet Murat ildan</cite>
            </blockquote>
            <svg class="play" width="100%" height="100%" viewBox="0 0 68 48">
              <title>New Video</title>
              <path class="front" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path>
              <path class="middle" d="M 45,24 27,14 27,34z"></path>
            </svg>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Hi there asasass,

your page is still unresponsive . :eek:

Is that not a concern for you?

coothead

1 Like

Unresponsive meaning what?

Horizontal scrollbar, when the page width
is less than your".container" width.

coothead

1 Like

Repeating @coothead’s thoughtful advice :slight_smile:

Why assign a fixed width to .container? A .container with a fixed width will not responsively adapt to narrower devices. It will trigger a horizontal scrollbar, instead.
Why not assign a max-width to .container so .container will resize narrower to fit the user’s device if narrower than the max-width? Doing this will avoid a horizontal scrollbar on narrower devices.
Are your pages not intended to be viewed on desktop and mobile devices?

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.