CODEWITHSUNDEEP
htmlcsszurb-foundation
JGallardo
JGallardo

Reputation: 11383

Image breaking layout in Foundation 5 by not being responsively resized

Summary
Foundation 5 handles content images (as opposed to background images added to a div) to be responsive if the width is smaller than image width.

I added a sticky footer that has a responsive height. This addition because of the display is now preventing Foundation 5 to properly display content on the page below the width of the largest image on the page.

Intent
Modify the CSS of the responsive footer so that it does not interfere with how images are handled by Foundation 5.

There is an image that is breaking my layout and now the text of the text is not bound by the device width. The problem seems to be coming from wrapping the content in a div that was added to give it a responsive sticky footer. This class is the problem that needs to be modified.

.container { 
  display: table; 
  height: 100%; 
  width: 100%; 
  margin: 0 auto; 
}

At this point the problem is already present. The header wrapped in that does fine. But I then put the content into a div that looks like this 

<div class="block push">

Those classes are also necessary for the responsive sticky footer. The classes have these rules 

.block { 
  display: table-row; 
  height: 1px; 
}

.push { 
  height: auto; 
}

Here is an image of my site with normal display (i commented out the image)

enter image description here

But here it is with the image, as you can see, the text extends to the length of the image

enter image description here

This is my current HTML

<div class="row">
  <div class="large-12 columns">
    <h1>Bruxzir Testimonials</h1>
    <a href="#Submit-Testimonial" title="Submit Your BruxZir Testimonial" class="button">Click Here to Submit Your BruxZir Testimonial</a>
    <ul id="testimonials">  
      <li>
        <p>&quot;This patient's anterior case came out great. I just wanted to share the before and after photos with you. BruxZir keeps surprising us.&quot;</p>
        <p><img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/testimonial-case/before-after.jpg" alt="bruxzir anterior case" /></p>
        <span class="author">&ndash; Janet S., DDS, Oaklawn, IL</span><br />
        <span>Ceramics by <a href="http://www.pcdl-usa.com/" target="_blank">Precision Ceramics Dental Laboratory</a>, Montclair, CA</span>
      </li>
    </ul>  
  </div>
</div>

In the inspector in Firefox I tested passing rules to it and it was taking widths in px

px

but does not seem to take them in percentages.

percentages

Not sure what I could be missing here. I currently have this page on a demo server at

http://windev.jgallardo.me/pages/testimonials-bruxzir-zirconia-dental-crown/index.aspx

Upvotes: 0

Views: 499

Answers (1)

Costa Michailidis
Costa Michailidis

Reputation: 8188

Okay, after some edits here's what I've got. If you remove two CSS rules, you'll be responsive. They are:

display: table-row css rule on the 

div.mainContent {
  display: table-row;
}

and

div.container {
  display: table;
}

Delete those two, and then check how the design responds to browser width.

Upvotes: 0

Related Questions