isissa Posted December 31, 2019 Share Posted December 31, 2019 My site: www.isissakomadajohn.com I would like there to be space around each item in my index like in the Wexly template, instead of each item touching on all sides as is default in Flatiron. I have been using the code below, but it is cutting off part of each image, it seems cropping from the right side and the bottom. Any suggestions? /* Flatiron: Add 8px white space between index items */ /* set the white space on each side of page */ #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; } } Link to comment
tuanphan Posted December 31, 2019 Share Posted December 31, 2019 Add to Home > Design > Custom CSS #grid .item { padding: 20px !important; box-sizing: border-box; } 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
isissa Posted December 31, 2019 Author Share Posted December 31, 2019 Thanks @tuanphan that mostly worked! Except when I mouse over specific images in the index, and the color overlay happens, the color overlay is not covering the whole image, and some of the full-color image is peeking through on the right side of each. Also, the space around each image is not equal. Thanks for your help! Isissa Link to comment
isissa Posted January 3, 2020 Author Share Posted January 3, 2020 I am referring to the grid background color under gallery styles. the grids over the images are not aligned with the images now that there is border box padding all around each image. any ideas how to fix, @tuanphan? Link to comment
gemma1234 Posted January 7, 2020 Share Posted January 7, 2020 Hi everyone, I am having the same issue. I can add the on padding on the Flatiron template but the hover state does not match the size of the thumbnails. Does anyone have a solution to this? Big thanks in advance, Gemma Link to comment
tuanphan Posted January 9, 2020 Share Posted January 9, 2020 On 1/3/2020 at 12:14 PM, isissa said: I am referring to the grid background color under gallery styles. the grids over the images are not aligned with the images now that there is border box padding all around each image. any ideas how to fix, @tuanphan? Have you solved yet? On 1/7/2020 at 6:50 PM, gemma1234 said: Hi everyone, I am having the same issue. I can add the on padding on the Flatiron template but the hover state does not match the size of the thumbnails. Does anyone have a solution to this? Big thanks in advance, Gemma Can you share link to your site? 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
hellostuart Posted January 10, 2020 Share Posted January 10, 2020 Hi @tuanphan I've used your code too which works (thank-you!) however the hover state is now not aligned as per above posts. Could you share any tips? My website is - www.stuartwalford.com and the password to view is reno20 Thanks, Stuart Link to comment
isissa Posted January 27, 2020 Author Share Posted January 27, 2020 @tuanphan, I have not yet resolved. I noticed that on Google Chrome it looks fine, but it is on Safari that this issue occurs. www.isissakomadajohn.com Link to comment
tuanphan Posted February 1, 2020 Share Posted February 1, 2020 On 1/10/2020 at 8:29 AM, hellostuart said: Hi @tuanphan I've used your code too which works (thank-you!) however the hover state is now not aligned as per above posts. Could you share any tips? My website is - www.stuartwalford.com and the password to view is reno20 Thanks, Stuart Have you fixed yet? On 1/27/2020 at 9:25 AM, isissa said: @tuanphan, I have not yet resolved. I noticed that on Google Chrome it looks fine, but it is on Safari that this issue occurs. www.isissakomadajohn.com I don't use Safari Need paid tool to check this... You can create a new question to ask this. 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
halker Posted February 3, 2020 Share Posted February 3, 2020 Hello, I'm trying your code below and whilst it works - some of my images are being stretched. anyone have any knowledge about this? They're fine without the padding but go all weird when I add it. Thanks, Hilary. www.hilarywalker.com.au #grid .item { padding: 20px !important; box-sizing: border-box; } Link to comment
tuanphan Posted February 3, 2020 Share Posted February 3, 2020 10 hours ago, halker said: Hello, I'm trying your code below and whilst it works - some of my images are being stretched. anyone have any knowledge about this? They're fine without the padding but go all weird when I add it. Thanks, Hilary. www.hilarywalker.com.au #grid .item { padding: 20px !important; box-sizing: border-box; } Did you fix? 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
halker Posted February 3, 2020 Share Posted February 3, 2020 Hi tuanphan, I made the site work by using this code instead: .homepage #grid .item a { width: 80%; height: 80%; } section#container { margin-left: 115px !important; margin-right: -40px !important; }/* Remove Share Buttons */ .squarespace-social-buttons { display: none !important; } But while the margins look fine on the desktop - they're all wrong on a mobile. Ideally I need even space around the images rather than space on left, bottom and right whereas this code puts space on bottom and left of each item... Cheers, hialry. Link to comment
halker Posted February 4, 2020 Share Posted February 4, 2020 I would also like my pages to be centre aligned as my index page is - but all seperate pages are left aligned (unless within the index) Any ideas!? Link to comment
ae12345 Posted November 24, 2020 Share Posted November 24, 2020 On 12/31/2019 at 6:29 PM, isissa said: Thanks @tuanphan that mostly worked! Except when I mouse over specific images in the index, and the color overlay happens, the color overlay is not covering the whole image, and some of the full-color image is peeking through on the right side of each. Also, the space around each image is not equal. Thanks for your help! Isissa @tuanphando you happen to have a solution for this? I'm running into the same problem. Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 On 11/25/2020 at 2:15 AM, ae12345 said: @tuanphando you happen to have a solution for this? I'm running into the same problem. Do you still need help on this? 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.