Home / Questions / 25236
Accepted
May
Asked: 2020-09-28 12:08:03 +0800 CST 2020-09-28 12:08:03 +0800 CST

Responsive Content - Image Wrapping and Text Alignment Error

  • 772

I have a text alignment error, the text does not adjust when changing the screen resolution, there is too much space to the right of the text.

The error in the images are not adjusted in a specific order, the desired thing is that the images that are on the right when making the image responsive jump below the text. And if the image is on the left, the text will jump below the image.

The first container divthe text wraps correctly, the rest don't.

Full code:

* {
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #8899a1;
  font-size: 13px;
  font-family: OpenSans;
}

ul li {
  border: none;
  border-spacing: none;
  list-style-type: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

p {
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  margin: 0 0 10px;
}

img {
  height: auto;
  border: none;
  display: block;
  max-width: 100%;
  vertical-align: middle;
}

#container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px; 
  padding-right: 15px;
}

.block {
  display: inline-block;
}

#features {
  clear: both;
  padding: 100px 0;
  background: #f5f5f5;
}

.section-header {
  margin-bottom: 50px;
}

.section-title {
  margin-bottom: 15px;
  display: block;
  clear: both;
  font-size: 28px;
  line-height: 38px;
  text-align: center;
  font-weight: 400;
  color: #262f32;
  text-transform: uppercase;
}

.section-header p {
  display: block;
  clear: both;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  font-weight: 300;
  color: #8d8d8d;
 }

.media {
  margin-top: 80px;
  margin: 25px 0;
}

.box{
  margin-right: 20px;
  padding-right: 10px;
  float: left!important;
}

.boxb{
  display: table-cell;
  vertical-align: top;
}

.ico {
  font-size: 24px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  width: 64px;
  color: #72C05B;
  box-shadow: inset 0 0 0 1px #d7d7d7;
  -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
  transition: background-color 400ms, background-color 400ms;
  position: relative;
  display: block;
  line-height: 60px;
  font-size: 18px;
  transform: translateZ(0px);
}

.creative-services {
  display: inline-block;
  width: 48%;
}

.creative-services ul.creative-feature li {
  color: #1b1d1f;
  display: inline-block;
  padding-left: 10px;
  text-transform: capitalize;
  width: 33%;
  margin-bottom: 15px;
}

.creative-services ul.creative-feature li:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Blue_check_PD.svg/2000px-Blue_check_PD.svg.png);
  background-size: cover;
  position: relative;
  left: -5px;
}

.creative-services h3, h4 {
  margin-bottom: 30px;
}

#about {
  padding: 100px 0;
}

.bloque1{
  float: left;
  width: 50%;
}

.column-title {
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  position: relative;
}

.column-title:after {
  content: " ";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40%;
  border-bottom: 1px solid #72C05B;
}
<div id="features">
  <div id="container">
<div class="section-header">
  <h2 class="section-title">WELCOME TO OUR COMPANY</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br>  et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="content">
  <div class="bloque1"><img class="" src="http://themeinthebox.com/demo/color/images/feature-2.png" alt=""></div>
  <div class="bloque1">
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
  </div>
</div>
  </div>
</div>

  <div id="creative">
<div id="container">
  <div class="block"><img src="https://ioyby2hf25e3sg55t3muegr1-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Switch-Onepage-Business-WordPress-Theme.png" alt="" width="600px"></div>
  <div class="creative-services">
    <h3>Unique experience</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book Lorem Ipsum has been the industry's.</p>
    <h4>Features</h4>
    <ul class="creative-feature">
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
    </ul>
  </div>
</div>
</div>

<div id="about">
  <div id="container">
<div class="conten">
  <div class="bloque1">
    <h3 class="column-title">A Little More About Us</h3>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <a class="btn btn-primary" href="#">Discover Us</a>
  </div>
  <div class="bloque1">
    <img class="" src="http://themeinthebox.com/demo/color/images/feature-2.png" alt="">
  </div>
</div>
  </div>
</div>

How could I fix these alignment and fit errors without using Media-queries ?

Note: I keep in mind that media queries are designed for responsive design, what I try to do is limit their use, only use them for specific details, so as not to have an extensive media-query.

Here are some images as a reference to what you want:

Image 1 http://inidesing.com/imagenes/responisveeeerrot.png

Image 2 http://inidesing.com/imagenes/responsivemal.png

html5

1 Answers

  1. Best Answer

    If you want the second block to behave the same as the first: copy the same thing you have in the first block to the second. I know it sounds like a truism, but it would be as simple as that.

    Make the following changes:

    • Remove the styles you have right now to.bloque1
    • make him .bloque1have adisplay:inline-block
    • Make the .bloque1one containing the text (the first one) have awidth:48%
    • Set the width to the image (the one in the first block has 600, so I'll set it to that even though it's really 457 so that the blocks break at the same resolution)

    And the result (I have marked the changes with a comment starting with /* AM):

    * {
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #8899a1;
  font-size: 13px;
  font-family: OpenSans;
}

ul li {
  border: none;
  border-spacing: none;
  list-style-type: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

p {
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  margin: 0 0 10px;
}

img {
  height: auto;
  border: none;
  display: block;
  max-width: 100%;
  vertical-align: middle;
}

#container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px; 
  padding-right: 15px;
}

.block {
  display: inline-block;
}

#features {
  clear: both;
  padding: 100px 0;
  background: #f5f5f5;
}

.section-header {
  margin-bottom: 50px;
}

.section-title {
  margin-bottom: 15px;
  display: block;
  clear: both;
  font-size: 28px;
  line-height: 38px;
  text-align: center;
  font-weight: 400;
  color: #262f32;
  text-transform: uppercase;
}

.section-header p {
  display: block;
  clear: both;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  font-weight: 300;
  color: #8d8d8d;
 }

.media {
  margin-top: 80px;
  margin: 25px 0;
}

.box{
  margin-right: 20px;
  padding-right: 10px;
  float: left!important;
}

.boxb{
  display: table-cell;
  vertical-align: top;
}

.ico {
  font-size: 24px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  width: 64px;
  color: #72C05B;
  box-shadow: inset 0 0 0 1px #d7d7d7;
  -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
  transition: background-color 400ms, background-color 400ms;
  position: relative;
  display: block;
  line-height: 60px;
  font-size: 18px;
  transform: translateZ(0px);
}

.creative-services {
  display: inline-block;
  width: 48%;
}

.creative-services ul.creative-feature li {
  color: #1b1d1f;
  display: inline-block;
  padding-left: 10px;
  text-transform: capitalize;
  width: 33%;
  margin-bottom: 15px;
}

.creative-services ul.creative-feature li:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Blue_check_PD.svg/2000px-Blue_check_PD.svg.png);
  background-size: cover;
  position: relative;
  left: -5px;
}

.creative-services h3, h4 {
  margin-bottom: 30px;
}

#about {
  padding: 100px 0;
}

/*
.bloque1{
  float: left;
  width: 50%;
}*/


.column-title {
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  position: relative;
}

.column-title:after {
  content: " ";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40%;
  border-bottom: 1px solid #72C05B;
}

/* AM - código nuevo */
.bloque1 {
  float:none;
  display:inline-block;
}

.bloque1:first-child {
  width:48%;
}
    <div id="features">
  <div id="container">
<div class="section-header">
  <h2 class="section-title">WELCOME TO OUR COMPANY</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br>  et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="content">
  <div class="bloque1"><img class="" src="http://themeinthebox.com/demo/color/images/feature-2.png" alt=""></div>
  <div class="bloque1">
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
    <div class="media">
      <div class="box"><i class="ico"></i></div>
      <div class="boxb"><h4 class="h4">Title Title</h4><p>
Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p></div>
    </div>
  </div>
</div>
  </div>
</div>

  <div id="creative">
<div id="container">
  <div class="block"><img src="https://ioyby2hf25e3sg55t3muegr1-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Switch-Onepage-Business-WordPress-Theme.png" alt="" width="600px"></div>
  <div class="creative-services">
    <h3>Unique experience</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book Lorem Ipsum has been the industry's.</p>
    <h4>Features</h4>
    <ul class="creative-feature">
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
      <li>Features Features</li>
    </ul>
  </div>
</div>
</div>

<div id="about">
  <div id="container">
<div class="conten">
  <div class="bloque1">
    <h3 class="column-title">A Little More About Us</h3>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

    <a class="btn btn-primary" href="#">Discover Us</a>
  </div>
  <div class="bloque1">
    <img class="" src="http://themeinthebox.com/demo/color/images/feature-2.png" alt="" width="600">
  </div>
</div>
  </div>
</div>

    • 3