0

I'm working on theming an image gallery in Drupal 7 I created, through which a user uploads several images and as a result see a list of images on the page.

I use Responsive Images and Styles module so the images don't have a fixed size. The effect I want to have is that these images align in a row and are always centered, having equal spaces/gutter width between them, regardless of browser resizing. So adding media queries the final result will be a one column page, so one image top of another, in iPhone viewport and three-four column page, images lying side by side, on a desktop screen.

The complicated part is Drupal has so many divs one inside another and I'm not sure if I'm following the right steps to achieve this effect. Though it could be simple it became problematic with these recursive divs.

So if someone can guide me through these divs and help me figure out how to achieve this aligment I would be really grateful. Every reply counts for me so don't hesitate to come up with comments and solutions of every kind.

Thank you in advance!

pandisvezia
  • 121
  • 3

1 Answers1

0

personally i do not know Drupal, but the as i experienced in joomla and wordpress, the best approach is to have a responsive layout for each device or simply use a framework to have it done for you. then for horizontal layouts go directly to your images in page structure and give all of them equal heights and left or right margins. then check for img parents not having any destructive width and heights. for vertical layouts just do it for widths and give them margin-bottomms to make gaps.
looks simple

Homam
  • 707
  • 2
  • 9
  • 20