Odd 'full-width' image behavior

Resolved eprowe
(@eprowe)

10 years ago

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
(@bensibley)

10 years ago
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
(@eprowe)

10 years ago
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
(@bensibley)

10 years ago

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.

Tags