0

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

http://dev-tangrm-test.pantheonsite.io/

Improve this question

1 Answer 1

Reset to default
0

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.

Improve this answer
7
  • 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? Commented Sep 20, 2016 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. Commented Sep 20, 2016 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! Commented Sep 20, 2016 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 Commented Sep 21, 2016 at 6:22
  • could it be the bootstrap theme as my base theme? Commented Sep 21, 2016 at 19:09

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.