fivefeettall Posted March 19, 2013 Share Posted March 19, 2013 How do I remove the padding around images? I inserted two little social media icons and they are miles apart because of the image padding. I added this to the CSS for the page but it didn’t change anything, http://organizegr.com/contact/ .sqs-block.image-block { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } In the Config Editor all i see is the code i’ve added, none of the existing code, which strikes me as weird. Similarly, on the main page, I’d like to have the bottom image flood to the side. But when i change the page padding the text and rule lines also flood to the sides. Can I change it for just the image? Or add padding into the text block manually? http://organizegr.com Link to comment
fivefeettall Posted March 19, 2013 Author Share Posted March 19, 2013 I was able to solve my bottom image problem by just adding it to the footer. it was a work around but it will do. Link to comment
fivefeettall Posted March 19, 2013 Author Share Posted March 19, 2013 I was able to solve my bottom image problem by just adding it to the footer. it was a work around but it will do. Link to comment
Alan-Squareflair Posted March 19, 2013 Share Posted March 19, 2013 To override some core CSS, you may need to add !important to certain elements. The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document,that is — considering it’s the correct element Caution:If you’re wanting to adjust .sqs-block.image-block in your custom CSS, you’re going to effect everything on the site using the same style, which in this case would be any image block you insert. … but if you want to play, try this: .sqs-block.image-block { padding: 0 !important } If that doesn’t work, it could be because they are linked elements, so try: .sqs-block.image-block a { padding: 0 !important } Maybe an easier thing to do on the site — to add social network icons would be to use the built-in social blocks, which you can configure here: Using the Social Links Block Also see: Connecting Social Accounts Link to comment
fivefeettall Posted March 19, 2013 Author Share Posted March 19, 2013 Using the social network icons that are provided by squarespace was an easy fix. Thanks! Link to comment
squareology Posted February 27, 2014 Share Posted February 27, 2014 You could also try this: .sqs-block-image { padding-bottom: 0 !important } Link to comment
BerlinFrank Posted June 25, 2014 Share Posted June 25, 2014 Did you find a solution for the padding? I would like to have the same for the links section at www.franktschoepe.com I don’t want any padding betweeen the 3 pictures. Link to comment
Guest Posted September 19, 2015 Share Posted September 19, 2015 this worked a treat on marquee template! thanks! Link to comment
elshark0 Posted December 28, 2015 Share Posted December 28, 2015 having trouble getting this done. Can anyone please provide some assistance. thank you. Link to comment
elshark0 Posted December 28, 2015 Share Posted December 28, 2015 having trouble getting this done. Can anyone please provide some assistance. thank you. Link to comment
Anderswaltz Posted July 5, 2016 Share Posted July 5, 2016 Thanks this worked perfectly on the Flatiron Theme. I didn't need the left / right paddings so I just deleted those. Link to comment
Anderswaltz Posted July 5, 2016 Share Posted July 5, 2016 Thanks this worked perfectly on the Flatiron Theme. I didn't need the left / right paddings so I just deleted those. Link to comment
Anderswaltz Posted July 5, 2016 Share Posted July 5, 2016 Thanks this worked perfectly on the Flatiron Theme. I didn't need the left / right paddings so I just deleted those. Link to comment
Anderswaltz Posted July 5, 2016 Share Posted July 5, 2016 Thanks this worked perfectly on the Flatiron Theme. I didn't need the left / right paddings so I just deleted those. Link to comment
Guest iamme123 Posted February 8, 2017 Share Posted February 8, 2017 Honestly, this is the solution I like best for my site, but I have Image Blocks and Text Blocks offset from one another: .sqs-block.image-block { margin-top: -8px; margin-bottom: -8px; padding: 0; } This allows my Image Block corners to touch when they're in different rows, without overlapping any of the content (see screenshot). Link to comment
DylanSG Posted September 21, 2020 Share Posted September 21, 2020 I've tried many different codes and I can't seem to get the padding off from the top and bottom. Here's one of the codes and a screenshot (they're all essentially the same it seems). I'd like to achieve a photo wall with no padding between images. .sqs-block.image-block { margin-top: 0px !important; margin-bottom: 0px !important; padding: 0; } Link to comment
tuanphan Posted September 22, 2020 Share Posted September 22, 2020 On 9/22/2020 at 2:26 AM, DylanSG said: I've tried many different codes and I can't seem to get the padding off from the top and bottom. Here's one of the codes and a screenshot (they're all essentially the same it seems). I'd like to achieve a photo wall with no padding between images. .sqs-block.image-block { margin-top: 0px !important; margin-bottom: 0px !important; padding: 0; Can you share link to page in screenshot? We can help easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.