Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #628371

    Hi!
    I was looking in older posts but I didn’t find a solution.
    In my website i have a section with a masonry gallery with only 3 images, and they’re positioned on the left side, leaving a “gap” on the right. (I linked the web-page in the private content)
    I’d like to have the images centered in the page.
    Can you provide a quick CSS to modify it?
    Thanks a lot for the support!

    #628981

    Hey Real-3D,

    If you’re only going to have 3 pictures on the page I think it would be better to place them in 1/3 elements, then you won’t need any custom CSS.

    Thanks,
    Rikard

    #629085

    Hi!
    i tried to place the masonry gallery in 1/3 or 1/5 element, but the images grow smaller.
    Any other suggestion?
    Thanks a lot!

    #629870

    Hi,

    Please edit your Masonry Gallery element and choose to display 3 columns – http://i.imgur.com/yUIRItX.png
    It seems like you are currently chose to display 5 columns :)

    Best regards,
    Yigit

    #629907

    Hi,
    I have already tried to choose to display 5 columns, but the images are shown into the whole screen and are too big (and different from the other pages of the website).
    Any other suggestions?
    Thanks a lot!

    #629933

    Hi!

    That is the problem, you should choose to display 3 columns instead of 5 :)

    Cheers!
    Yigit

    #629936

    Sorry, i wrote wrong.
    * I have already tried to choose to display 3 columns, but the images are shown into the whole screen and are too big (and different from the other pages of the website). *

    In fact choosing 3 columns the images are too big…

    Any suggestions?

    Thanks for the answers and for the patience!

    #629941

    Hi!

    Can you please create a temporary admin login and post it here privately so we can look into it?

    Regards,
    Yigit

    #629948

    Yes, here you are! :)
    Thanks

    #629961

    Hi!

    5 columns were chosen as i mentioned above :) I edited your page and switched it to 3 columns. Please review your website now

    Cheers!
    Yigit

    #629968

    Hi!
    First of all thanks for the quick responses!

    Maybe I explained myself wrong.

    If you see the images of the masonry gallery divided into 3 and 5 columns, the images are shown in different size:
    in the 3 columns gallery the images are bigger than in the 5 columns.

    I’d like to have the dimension of the 5 columns (with the images smaler than the 3 columns) but with the images centered into the screen (with an empty space at the corner of the screen).

    I apologize for not having explained well!

    #630703

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
    #custom-masonry {
        left: 24%;
    }
    #custom-masonry .av-masonry {
        background: #1c1c1c;
    }
    
    

    Best regards,
    Yigit

    #630744

    Hi,
    We are almost there!
    Now on PC seems to be ok, but on mobile all the images are not centered and are shifted on the right…

    #630763

    Hey!

    You can change the code to following one to apply it only on desktop

    @media only screen and (min-width: 1024px) {
    #custom-masonry {
        left: 24%;
    }}

    or use media queries to adjust on mobile screens

    @media only screen and (max-width: 768px) {
    #custom-masonry {
        left: 15%;
    }}

    Cheers!
    Yigit

    • This reply was modified 8 years, 7 months ago by Yigit.
    #630785

    Hey!
    That’s perfect!
    Just another issue and will be ok.
    Moving the masonry gallery is left a grey border on the left.
    Here’s the link: http://real-3d.it/fotoinserimenti/
    Is there a way to modify it with a CSS? I know that I could change this color in the general styling (colors), but there will change all the theme colors.
    Thanks for the support!

    #630789

    Hi!

    Code i posted above should have helped, please try adding !important rule as following

    #custom-masonry .av-masonry {
        background: #1c1c1c !important;
    }
    

    Regards,
    Yigit

    #630796

    The code you provided is right, but i changed the color in #0a0a0a, because this is the background color of the pages of my website.
    The issue is that is shown a border of another color on the left border.

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Masonry gallery centered’ is closed to new replies.