I have a view displaying some content fields including images being used as the background. I also have 2 attachments with the same fields.

When i visit the page for the first time, or when i do a hard refresh of my browser (hold shift and refresh) the main content and the two top attachments squish together. if i then refresh all looks ok.

Im using bootstrap theme as my base theme. If I disable my CSS file, the error still occurs.

I was thinking it had something to do with the image resizing and loading later than the text content.

Please let me know if you need more information. enter image description here

enter image description here



This is not a views or a Drupal issue...

Things to do are:

  1. Make sure the image size in terms of KiloBytes is not huge. If you have fairly large sizes this will affect your site speed in general, especially on mobile devices.
  2. Make sure you are using an appropriate Image Style. Meaning the size of the image you are rendering, in terms of pixels is not bigger than the container you are rendering in it.
  3. In any case to remove this overlapping effect set a static height to the container the image is rendering into. In this way the text is not going to overlap even if the images are still rendering.

Hope this helps.

  • Thanks! How should I deal with a field that is displayed in multiple views all with varying sizes. Example, front page view displays the pic at 200x200px but it's also used for a page header at 100% page width? – Anon Ymous Sep 20 '16 at 8:21
  • If you are talking about the static height...I guess use Views Fieldset and create a container using the Global:Fieldset. Therefore set a static height on every different container of fieldset as desired. – pierostz Sep 20 '16 at 9:14
  • i tried resizing the images close to the correct pixel ratio. all files are between 8kb and 25kb. still same issue. ive included a link to the op. Thanks for the help! – Anon Ymous Sep 20 '16 at 18:39
  • There seems to be some javascript or jquery script that is messing with it. The div with the classes views-row views-row-1 views-row-odd views-row-first views-row-last col-md-4 under the attachment has a static height of 1px that seems be be set by this script – pierostz Sep 21 '16 at 6:22
  • could it be the bootstrap theme as my base theme? – Anon Ymous Sep 21 '16 at 19:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.