asked on

Get image to stay in the same position on mobile view

I have a section where there is an image on the left, some text in the middle and a block quote on the right. Just below that I want to have the same content but with the block quote and image swapped around i.e.: block quote on the left and image on the right. Here is the code with the image on the left

<div class="section mcb-section" style="padding-top:120px; padding-bottom:80px; ">
  <div class="section_wrapper mcb-section-inner">
    <div class="team team_list clearfix">
      <div class="column one-fourth">
        <div class="image_frame no_link scale-with-grid">
          <div class="image_wrapper">
            <img class="scale-with-grid animal-avit" src="<?php bloginfo('template_directory'); ?>/images/home_betheme_ourteam_4.jpg" alt="img">
          </div>
        </div>
      </div>
      <div class="column one-second">
        <div class="desc_wrapper">
          <h4>Mandy Moore</h4>
          <p class="subtitle">
            CEO
          </p>
          <hr class="hr_color">
          <div class="desc">
            <p class="big">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.
            </p>
            <p>
              Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra. mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean
              ligula.
            </p>
          </div>
        </div>
      </div>
      <div class="column one-fourth">
        <div class="bq_wrapper">
          <blockquote>
            Vitae adipiscing turpis. Aen ligula nibh, molestie sed vitae dictum in gravida
          </blockquote>
        </div>
      </div>
    </div>
  </div>
</div>

Open in new window

I just switched the code around and everything looks fine:

<div class="section-decoration bottom" style="background-image:url(<?php bloginfo('template_directory'); ?>/images/home_animals2_sectionbg4.png);height:33px"></div>
<div class="section mcb-section equal-height-wrap  " style="padding-top:120px; padding-bottom:80px; background-color:#1DA0EE">
  <div class="section_wrapper mcb-section-inner">
    <div class="team team_list clearfix">
      <div class="column one-fourth">
        <div class="bq_wrapper">
          <blockquote style="color:#fff;">
            Vitae adipiscing turpis. Aen ligula nibh, molestie sed vitae dictum in gravida
          </blockquote>
        </div>
      </div>
      <div class="column one-second">
        <div class="desc_wrapper_right">
          <h4 style="text-align:right; color:#fff;">Many Moore</h4>
          <p class="subtitle" style="text-align:right; color:#fff;">
            CEO
          </p>
          <hr class="hr_colorb">
          <div class="desc">
            <p class="big" style="text-align:right; color:#fff;">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.
            </p>
            <p style="text-align:right; color:#fff;">
              Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra. mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean
              ligula.
            </p>
          </div>
        </div>
      </div>
      <div class="column one-fourth">
        <div class="image_frame no_link scale-with-grid">
          <div class="image_wrapper">
            <img class="scale-with-grid animal-avit" src="<?php bloginfo('template_directory'); ?>/images/home_betheme_ourteam_4.jpg" alt="img">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="section-decoration bottom" style="background-image:url(<?php bloginfo('template_directory'); ?>/images/home_animals2_decoration3.png);height:43px"></div>
</div>

Open in new window

That is until I go to mobile view. For the first code block, the image shows at the top, then the text and the block quote at the bottom. When I scroll down to the second code block, the block quote it first, then the text and the image last. How can I get it to still display the same order on a mobile device?

Crazy Horse

ASKER

Not sure if it's okay to do this but I found that if I add an inline style of float:right; to the first div:

<div class="column one-fourth" style="float:right;">

Open in new window

then it works how I would like it to.

mohan singh

Can you provide me a link of your page
Thank you

Crazy Horse

ASKER

Sorry, Mohan. It is only on localhost, not live.

mohan singh

Yes you can show at same position of your image on mobile view

css
#counter {
    position: relative;
    display: inline;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
    max-width: 100%;
}

Open in new window

 <div id="counter">    
  <img src="" alt="bg" />
 </div>

Open in new window

Thank You

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Crazy Horse

ASKER

@ Julian, that worked perfectly, thank you!

Julian Hansen

You are welcome.