tylerelise Posted August 19, 2021 Share Posted August 19, 2021 (edited) Site URL: http://tylerelise.com Hi there, I'm currently using this code in the custom CSS for my website to get the gallery images to have 8px of space between them: #container-content { padding-left: 8px!important; padding-right: 8px!important; } #grid .item { margin-left:-8px; a { border: 16px solid #fff; } /* Overlay size on hover */ .wrapper { margin: 16px; } } The issue I'm noticing is that the images now sit towards the bottom right corner and are off-center in the box. I've attached an image of what this looks like in edit view, you can see the content is sitting towards the bottom right of the container. It seems like something is effecting the right margin within the code (I've also attached a screenshot from the inspect view to show this). I'm wondering if maybe because it's a white border and not a margin the borders to the right of each image are now covering 8px of its neighboring image? Any help would be appreciated, thank you! Edited August 19, 2021 by tylerelise adding info Link to comment
donaldely Posted May 13, 2022 Share Posted May 13, 2022 On 8/19/2021 at 1:51 PM, tylerelise said: Site URL: http://tylerelise.com Hi there, I'm currently using this code in the custom CSS for my website to get the gallery images to have 8px of space between them: #container-content { padding-left: 8px!important; padding-right: 8px!important; } #grid .item { margin-left:-8px; a { border: 16px solid #fff; } /* Overlay size on hover */ .wrapper { margin: 16px; } } The issue I'm noticing is that the images now sit towards the bottom right corner and are off-center in the box. I've attached an image of what this looks like in edit view, you can see the content is sitting towards the bottom right of the container. It seems like something is effecting the right margin within the code (I've also attached a screenshot from the inspect view to show this). I'm wondering if maybe because it's a white border and not a margin the borders to the right of each image are now covering 8px of its neighboring image? Any help would be appreciated, thank you! I'm having the same issue. Is there an answer out there? Link to comment
tuanphan Posted May 15, 2022 Share Posted May 15, 2022 On 5/14/2022 at 3:30 AM, donaldely said: I'm having the same issue. Is there an answer out there? What is your site url? We will try take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alym Posted February 18 Share Posted February 18 Hi, I'm having the same issue too! Is there a solution for this grid problem? Link to comment
tuanphan Posted February 20 Share Posted February 20 On 2/19/2024 at 5:26 AM, alym said: Hi, I'm having the same issue too! Is there a solution for this grid problem? If you share link to page where you have problem, we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alym Posted February 20 Share Posted February 20 6 hours ago, tuanphan said: If you share link to page where you have problem, we can check easier Hi Tuanphan, my link is here: https://aly-miller.squarespace.com/food-illustrations Thanks for looking into it! Link to comment
tuanphan Posted February 24 Share Posted February 24 On 2/20/2024 at 10:07 PM, alym said: Hi Tuanphan, my link is here: https://aly-miller.squarespace.com/food-illustrations Thanks for looking into it! I tried hover some items and all look fine. Did you solve it? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alym Posted February 24 Share Posted February 24 Hi @tuanphan I didn't solve it. It's barely noticeable at 8 px so I kept it at 8. But I'd love to have more space between items. This is what 40 px spacing looks like (my preferred spacing), and the issue is pretty clear. The images don't shrink accordingly, and get cut off in the bottom right. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment