• Status: Solved
  • Priority: High
  • Security: Private
  • Views: 36
  • Last Modified:

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?
0
Black Sulfur
Asked:
Black Sulfur
  • 3
  • 2
  • 2
1 Solution
 
Black SulfurAuthor Commented:
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.
0
 
mohan singhWeb developerCommented:
Can you provide me a link of your page
Thank you
0
 
Black SulfurAuthor Commented:
Sorry, Mohan. It is only on localhost, not live.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
mohan singhWeb developerCommented:
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
0
 
Julian HansenCommented:
This is a common problem with mobile views - the order of blocks change to an undesirable order when stacked.

To fix you usually swap the float for the blocks - depends on your markup. You would need to show us your CSS so that we can build a replica and demonstrate the issue.

Basically though - if you are floating your cells then you need to add a style to the second row cells call them switch-left and switch-right

Then add a media query to set the float's on these when the screen is at (or larger) than the size when they will be side by side

@media (min-width: 768px) {
  .switch-left {
    float: left;
  }
  .switch-right {
    float: right;
  }
}

Open in new window

Sample html
Here we have the order as per our desired MOBILE view - because mobile STACKS. In the non-mobile view - we switch the floats to make the order the way we want it for larger
<div class="row">
    <div class="col-md-6 col-sm-12"><img src="images/foreground2.png"></div>
    <div class="col-md-6 col-sm-12"><blockquote>Some text goes here</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-12 switch-right"><img src="images/foreground3.png"></div>
    <div class="col-md-6 col-sm-12 switch-left"><blockquote>Some other text goes here</div>
  </div>

Open in new window


You can see a sample here
1
 
Black SulfurAuthor Commented:
@ Julian, that worked perfectly, thank you!
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now