Hey guys, I am trying to increase the size of my icons in my footer for the PATCH theme, and have tried tons of various code from other threads and themes on this subject. Can’t find a solution that works, and am not really a coder. Trying mostly code inserts in the CSS panel instead of adjusting the theme files. Thanks in advance for any help!
Site url: Campmanifest.com
could you share your store url?
Shared above, campmanifest.com
Thanks for taking a look!
lol, i just saw you had already posted that.
ok, this is kind of a no no usually, but since i cant actually access your site. you will need to add !imporant decorators to the css.
.social-icons__wrapper svg.social-icons__icon,
.footer-utilities__icons svg {
width: 40px !important;
height: 40px !important;
}
give that a try..
Unfortunately nothing with that added. Can you explain why it would be a no-no usually? I mean I get that it’s more of a front-end overwrite, secondary command that has to process over the themes original commands, but otherwise?
generally bad practice, because !important breaks CSS’s natural specificity system, making styles harder to override, debug, and maintain.
so i usually add border: 1px solid red; to any containers of elements i am trying to control. it gets to the bottom of things pretty easy.
for instance. if you did that to the “p“ tag it would make all paragraphs, have a red border. in this case try putting a border on `social-icons__wrapper`. once you do, do you see a red border? This can help you isolate the elements you are trying to update. Also, you could try adding a
.social-icons__wrapper svg.social-icons__icon, .social-icons__wrapper .social-icons__icon, .social-icons__icon.icon-default, svg.social-icons__icon {
width: 40px !important;
height: 40px !important;
}
block in the head of your index page. if that makes sense.
sorry, that should be wrapped in a <style></style> element
The red border seems to correctly identify that area on the social icons, but no change in their size. If you have an idea of the style sheet I should be looking at for those, I can send some screenshots, or copy the original code to this google doc below.
Here’s a google link with copied code from three theme files, named in the tabs on the left side of the doc: Patch Theme File Code - Google Docs
Sorry that screenshot isn’t paticularly helpful, I didn’t mean to attach that, but it was what came up when I right clicked the social icons and clicked open code…
try adding this at the very bottom of the social-links.liquid file (after line 146), but still inside the {% stylesheet %} block:
:root {
–icon-size-lg: 40px !important;
}
or
.social-icons__wrapper {
–icon-size-lg: 40px;
}
if you dont want to affect other icons.
Can you try this in your Edit theme, Footer section, Custom CSS setting
.social-icons__icon-wrapper:has(.social-icons__icon path) {
width: 2.5rem;
height: 2.5rem;
}
And adjust values.
That --icon-size-lg is defined as 1.5rem and it is targeting several icons, not just one in footer so this change should be OK.
Just bigger gaps between icons, no change in icon size
My bad, it is Policies and links section and this code should work
.social-icons__icon-wrapper:has(.social-icons__icon path),
.social-icons__icon {
width: 2.5rem;
height: 2.5rem;
}
it shouldnt be nested, try putting it at the very top right below {% stylesheet %}
{% stylesheet %}
:root { --icon-size-lg: 40px !important; }
This worked! Thank you so much!
sweet! glad to help.
