Cannot fix image step down

  • mrwizard9k

    (@mrwizard9k)


    9 years, 8 months ago

    Hello I have made a few flip images that I have tried to place into a grid, however each one is slightly lower than the one to the left.

    I have tried using div, span, shortcodes, and float left. Let me know if you would like me to post my code or link to the site.

    Thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 8 months ago

    Please provide a link to your site! Thanks.

    Thread Starter mrwizard9k

    (@mrwizard9k)

    9 years, 8 months ago

    thank you for the quick reply, the site is bkdev.dukemfg.com/products/

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 8 months ago

    You have a line break between each one. See

    View post on imgur.com

    If you remove the line breaks and float them left, you should be OK

    Thread Starter mrwizard9k

    (@mrwizard9k)

    9 years, 8 months ago

    hmmm… I’m not sure where that is coming from cause I do not have that in my code?
    Here is the code, I will only include the first line for brevity 

    [one_third]<div class ="flip-container">
  <div class="flipper"onclick="this.classList.toggle('flipped')">
    <div class="front"><img src="http://bkdev.dukemfg.com/wp-content/uploads/2016/09/button_robust_design.png" /></div>
  <div class="back"><font color="red"> Built simple, strong and solid, the HS2 features shelves that are securely attached above and below and are able to withstand the weight of an adult without any bending or hindering use of the unit. </font></div>
  </div>
</div>[/one_third]
[one_third]<div class ="flip-container">
  <div class="flipper"onclick="this.classList.toggle('flipped')">
    <div class="front">     <img src="http://bkdev.dukemfg.com/wp-content/uploads/2016/09/button_grease_migration.png" /> </div>
  <div class="back">
    <center><font color="red"> The HS2 is a completely sealed unit with smooth overhangs and bends that prevent grease from migrating into the unit, minimizing wear and tear. </font></center>
    </div>
  </div>
</div>[/one_third]
[one_third_last]
<div class ="flip-container">
 <div class="flipper" onclick="this.classList.toggle('flipped')">
    <div class="front">
      <img src="http://bkdev.dukemfg.com/wp-content/uploads/2016/09/button_easy_clean.png" />
    </div>
  <div class="back">
    <center><font color="red">  Adequate spacing and the absence of gaps or vents allow for easy cleaning. </font></center>
    </div>
  </div>
</div>
[/one_third_last]
    Thread Starter mrwizard9k

    (@mrwizard9k)

    9 years, 8 months ago

    so I removed the _last from the last one in each row and everything is lined up horizontally except the first row. Any ideas?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 8 months ago

    remove any line breaks you’ve put in when you’ve entered this. The WP editor will convert those to <br>s

    Thread Starter mrwizard9k

    (@mrwizard9k)

    9 years, 8 months ago

    I do not have any breaks or spaces, that was one of my first thoughts

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 8 months ago

    each of your shortcodes seems to start on a new line

    Thread Starter mrwizard9k

    (@mrwizard9k)

    9 years, 8 months ago

    looks like I’m going to have to take a different approach. The cards do not show the .back in firefox

    Thread Starter mrwizard9k

    (@mrwizard9k)

    9 years, 8 months ago

    Ok, I fixed the issue. In order to get everything aligned properly I had to put everything without a break, so there is no indent on div or any other tags, it is now one solid line of text. It is extremely hard to read but at least it works.

    Thank you for your help. To fix the firefox issue I went with different CSS

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Cannot fix image step down’ is closed to new replies.