Solved Three thumbs in a row leave gap on right side

Discussion in 'Media Pro Gallery' started by Janne, Jun 1, 2016.

  1. Janne

    Janne Well-Known Member

    88
    4
    Hey, I uploaded 6 photos into my MPG which makes three thumbs in a row. The gallery does´t fill the browser width but leaves a small gap on the right side. It seems to be the background color, so I put the filling to none.

    I put my gallery settings as shown in my first screenshot. You can see the effect in my second screenshot. The site can be seen here (menu > IMPRESSIONEN):
    www.karuselo.com

    My client does´t mind, which is fine, but I´d like to know what I could do differently next time in order to avoid this gap.

    Thx, Janne

    Bildschirmfoto 2016-06-01 um 10.12.21.png Bildschirmfoto 2016-06-01 um 09.19.41.png
     
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Janne, are you sure you have the widget set to full width? The thumbnail attached is what I see on my Monitor. If I had to guess, I would say you see your gap due to the size of the monitor you are viewing on.
    Dj


    Capture.JPG
     
  3. Janne

    Janne Well-Known Member

    88
    4
    The background is red, this is what you see on a large monitor. But even there you´ll see that the right side doesn´t end exactly under the right side of the white box above (s. screenshot 1). To show you my settings, I made screenshot 2 from the same part in muse.

    I know it´s the background color which can be seen right-hand, cause before I set it on no fill, I had a grey stripe on the right side. And I simply don´t understand why the background fills the whole space, but the photos don´t ...

    Hope you can follow me ...

    Bildschirmfoto 2016-06-01 um 18.55.08.png
     

    Attached Files:

  4. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Janne, I'm pretty sure this has to do with the image size ratio's you are using.
    When I set to your sizing (33%W and 282px H), I was able to re create the issue, but if I place the Image width at 25% everything fits normal.
    I believe this is because the W is a %, while the H is a pixel dimension. Give it a try and maybe reset the % in your design.
    Dj
     
  5. Janne

    Janne Well-Known Member

    88
    4
    Yes, you are right - it fits with 25%W. But then I have four photos in a row, which gives an unbalanced look with a total of six ... In order to get three photos in a row, I set the percentage to 33. To be precise, it should be 33,33% - but this wasn´t possible to achieve.

    It would be great, if in future there was an option to generate this - after all three columns is is a common grid size. Or is there something I am still missing?

    Thank you so far for your efforts - I appreciate this very much!

    Janne
     
  6. Janne

    Janne Well-Known Member

    88
    4
    Me again - sorry. The fact, that the background color goes to full width shows me, that it should be possible for the photos as well - I simply don´t know how.

    As "evidence" I changed the background color to white and enclosed another screenshot. See the white stripe on the right? :)
    (percentage has been set to 33%W again)

    Bildschirmfoto 2016-06-01 um 20.03.06.png
     
  7. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Janne, I will bring this up to the developers. For some reason you have to go to list view to get rid of the gap.
    I don't know if they can make a change, but I will certainly ask them. I also suggest sending in a support ticket (support>contact us) because your file is a great example.
    Thanks
    Dj
     
  8. Janne

    Janne Well-Known Member

    88
    4
    Thank you for your suggestion! I will do so.
    Greetz from Germany,
    Janne
     
  9. Janne

    Janne Well-Known Member

    88
    4
    @ Dj and anyone interested: Alex from the support team wrote me some code to paste into Object > Insert HTML:

    <style>
    #u27436 .RG_thumb{
    width: 33.3333% !important;
    }

    @media screen and (max-width:768px){
    #u27436 .RG_thumb{
    width: 50% !important;
    }
    }
    </style>

    The effect of the first part is that your three photos adjust perfectly. The second part makes sure that in any screens under 768 px the gallery switches to two pics per row since three pics would turn out awkwardly.

    Happy,
    Janne
     
  10. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Janne, thank you for posting the solution from the team. I wish this happened more often.
    Normally, when I suggest that someone contact support, we never hear back in the forum when there is a solution. This helps us all tremendously.
    Thanks again.
    Dj
     

Share This Page