Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • May 6, 2016 at 4:15 pm #628371
    Real-3D

    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!

    May 9, 2016 at 5:18 am #628981
    Rikard

    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

    May 9, 2016 at 9:08 am #629085
    Real-3D

    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!

    May 10, 2016 at 1:09 pm #629870
    Yigit

    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

    May 10, 2016 at 2:00 pm #629907
    Real-3D

    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!

    May 10, 2016 at 2:31 pm #629933
    Yigit

    Hi!

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

    Cheers!
    Yigit

    May 10, 2016 at 2:36 pm #629936
    Real-3D

    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!

    May 10, 2016 at 2:40 pm #629941
    Yigit

    Hi!

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

    Regards,
    Yigit

    May 10, 2016 at 2:44 pm #629948
    Real-3D

    Yes, here you are! :)
    Thanks

    May 10, 2016 at 3:01 pm #629961
    Yigit

    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

    May 10, 2016 at 3:10 pm #629968
    Real-3D

    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!

    May 11, 2016 at 1:54 pm #630703
    Yigit

    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

    May 11, 2016 at 2:38 pm #630744
    Real-3D

    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…

    May 11, 2016 at 3:30 pm #630763
    Yigit

    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, 6 months ago by Yigit.
    May 11, 2016 at 3:57 pm #630785
    Real-3D

    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!

    May 11, 2016 at 4:01 pm #630789
    Yigit

    Hi!

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

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

    Regards,
    Yigit

    May 11, 2016 at 4:07 pm #630796
    Real-3D

    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.

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