seo Question posted in
Some basic information to get you started with this can be found here.

Trying to show an image – SEO

The code below should show something like this for medium size device:

enter image description here

but I get this:

enter image description here

  <div class="thumbnail" style="overflow: hidden">

      <div class="col-xs-12">
        <h3>SEO: tus productos al "alcance de la mano"</h3>
      </div>
    <div class="row">
      <p class="col-md-8">
      Sabemos de la importacia que tiene que tus productos sean faciles de encontrar en internet: de poco sirve tener una tienda online, si tus productos no destacan en los resultados de los principales motores de busqueda (Google, Yahoo, Bing, etc).<br><br> 
      Para que así resulte, optimizamos tu tienda desde el punto de vista SEO, tanto para las busquedas orientadas a un producto en particular, por ejemplo "telefono samsung modelo s6 edge", como para las busquedas más generales, por ejemplo: "telefonos para personas mayores". Estaremos encantados de mostrarte algunos casos de exito.
      </p>
      <div style="float: none" class="col-md-4 col-xs-5 center-block">
        <img src="http://www.ziiweb.com/images/search_engines.png" class="img-responsive">
      </div>
    </div>
  </div>

The problem: the image is not shown correctly as you can see on the second image, why?

NOTE: this is the way it should be shown for small devices:

enter image description here

Tags:

2

Answers


  1. 0

    I have modified your code a bit. Here is what you need to do:

    1. Remove float: none from inline style.
    2. Instead of center-block, use offset-* classes to center the image.
    3. Reduce the width in md screen to col-md-2. Optionally add col-lg-1 to align the two columns for larger screens.
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="thumbnail" style="overflow: hidden">

  <div class="col-xs-12">
    <h3>SEO: tus productos al "alcance de la mano"</h3>
  </div>
  <div class="row">
    <p class="col-md-8">
      Sabemos de la importacia que tiene que tus productos sean faciles de encontrar en internet: de poco sirve tener una tienda online, si tus productos no destacan en los resultados de los principales motores de busqueda (Google, Yahoo, Bing, etc).
      <br>
      <br>Para que así resulte, optimizamos tu tienda desde el punto de vista SEO, tanto para las busquedas orientadas a un producto en particular, por ejemplo "telefono samsung modelo s6 edge", como para las busquedas más generales, por ejemplo: "telefonos
      para personas mayores". Estaremos encantados de mostrarte algunos casos de exito.
    </p>
    <div class="col-md-2 col-md-offset-0 col-xs-offset-4 col-xs-4 col-lg-1">
      <img src="http://www.ziiweb.com/images/search_engines.png" class="img-responsive">
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Here’s what you need to do:

    Code:

     <div class="thumbnail" style="overflow: hidden">

      <div class="col-xs-12">
        <h3>SEO: tus productos al "alcance de la mano"</h3>
      </div>
    <div class="row col-md-12">
      <p class="col-md-8 col-xs-12">
      Sabemos de la importacia....
      </p>
      <div class="col-md-4 col-xs-12 center-block">
        <img src="http://www.ziiweb.com/images/search_engines.png" class="img-responsive">
      </div>
    </div>
  </div>

    You need to make the row div 12-columns wide(add col-md-12). Then distribute the columns among the children div elements as you wish (8 and 4). Also, on smaller screens, you want them to take up the full width. You can ensure this by assigning 12 column width on smaller screens (col-xs-12) to the text as well as the image container.

    Fiddle or it didn’t happen

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search