Title: Odd 'full-width' image behavior
Last modified: August 31, 2016

---

# Odd 'full-width' image behavior

 *  Resolved [eprowe](https://wordpress.org/support/users/eprowe/)
 * (@eprowe)
 * [10 years ago](https://wordpress.org/support/topic/odd-full-width-image-behavior/)
 * Looking at moving to Tracks for my photoblog and been tinkering with it in a 
   dev environment, so providing links to the actual problem will be difficult. 
   The odd behavior I’m experiencing is when inserting “full-width” content into
   a post.
 * I followed the instructions for making images “full-width” as described on the
   theme home page. I also followed the instructions for making any content wrapped
   in a div with class=”full-width”, full width.
 * The code as is works pretty well, but occasionally the content (specifically 
   an image or Vimeo shortcode embed) will shift/move/expand/shrink a few pixels
   depending on the browser window dimensions. This happens with all the major browsers(
   Chrome-v51.0.2704.63, IE-v11.0.9600.18314, Firefox-v46.0.1).
 * I understand that I’m being EXTREMELY nit picky and if it is near impossible 
   to fix due to the way that percentages are rendered or any other browser rendering
   issue I completely understand. Just my OCD goes into overdrive when I have an
   image/content nearly filling the “entry-container” with a single pixel strip 
   down the left, right, or both sides up against the dark background.

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

 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years ago](https://wordpress.org/support/topic/odd-full-width-image-behavior/#post-7438310)
 * Thanks for using Tracks!
 * I know exactly what you mean. This is unfortunately due to how browsers will 
   round the pixels differently. That said, there is a solution I used on the Featured
   Images that we can reuse here.
 * Try adding this CSS to your child theme’s style.css file (or the Custom CSS section
   in the Customizer):
 *     ```
       .entry-container {
         overflow: hidden;
       }
       ```
   
 * Next, since you have the code for the “full-width” element, update the width 
   property everywhere it appears like this:
 *     ```
       .full-width {
         width: calc(128.6% + 2px);
       }
       ```
   
 * So you have some percentage value plus 2 pixels wrapped in the CSS “calc” function.
 * What this is going to do is make the content in the “full-width” element 2px 
   wider than usual. This means instead of sometimes leaving a 1px space, it will
   sometimes be 1px too wide. Since we’ve added `overflow: hidden;` to the container,
   this will be stripped off for a clean edge. There won’t ever be line left over
   now, and no one will notice the 1px that is occassionally missing from the content.
 *  Thread Starter [eprowe](https://wordpress.org/support/users/eprowe/)
 * (@eprowe)
 * [10 years ago](https://wordpress.org/support/topic/odd-full-width-image-behavior/#post-7438322)
 * Spot on Ben, worked a champ! My OCD thanks you. Keep up the work on a great theme.
 * For anyone else who runs into this issue here is, I think, the pertinent CSS 
   snippet that I added via the Customizer:
 *     ```
       .entry-container {
         overflow: hidden;
       }
       .entry-content .full-width {
         position: relative;
         width: calc(113% + 2px);
         left: -6.5%;
       }
       @media all and (min-width: 43.75em) {
          .entry-content .full-width {
             width: calc(128.6% + 2px);
             left: -14.3%;
          }
       }
       @media all and (min-width: 56.25em) {
          .entry-content .full-width {
             width: calc(150% + 2px);
             left: -25%;
          }
       }
       @media all and (min-width: 68.75em) {
          .entry-content .full-width {
             width: calc(163.6% + 2px);
             left: -31.8%;
          }
       }
       @media all and (min-width: 75em) {
          .entry-content .full-width {
             width: calc(179.9% + 2px);
             left: -39.95%;
          }
       }
       ```
   
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years ago](https://wordpress.org/support/topic/odd-full-width-image-behavior/#post-7438418)
 * No problem, thanks for sharing the final code here 🙂

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

The topic ‘Odd 'full-width' image behavior’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/tracks/1.81/screenshot.png)
 * Tracks
 * [Support Threads](https://wordpress.org/support/theme/tracks/)
 * [Active Topics](https://wordpress.org/support/theme/tracks/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/tracks/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/tracks/reviews/)

## Tags

 * [embed](https://wordpress.org/support/topic-tag/embed/)
 * [full-width](https://wordpress.org/support/topic-tag/full-width/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [shortcode](https://wordpress.org/support/topic-tag/shortcode/)
 * [vimeo](https://wordpress.org/support/topic-tag/vimeo/)

 * 3 replies
 * 2 participants
 * Last reply from: [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/odd-full-width-image-behavior/#post-7438418)
 * Status: resolved