I just had this issue with image with text, but since im still useless with code, need help to fix the same problem. this code is still in my shop, but its not working for one particular section, as you can see on my site.
.image-with-text.collapse-corners:not(.image-with-text–overlap) .grid:not(.image-with-text__grid–reverse) .image-with-text__media img {
border: 4px solid #4f8b78;
}
That’s the code that worked previously perfectly.
https://greenroomcoffee.co.uk
Please scroll down to the blog post section to see the problem,
Thank you in advance!
I see you’re trying to target the “img” element with that img selector at the end.
- If you want to target all the sections “image with text” on your site, you can use:
.image-with-text img {
border: 4px solid #4f8b78;
}
- If you want to target specific sections on your site, consider attaching the section id (you can grab the section id by using inspector developer tools on your browser):
#shopify-section-template--19901764600106__4ee162c2-c68c-4258-96e7-bdb8fcf2c9b1 img {
border: 4px solid #4f8b78;
}
- note: if the css does not get applied, means there is a priority default setting for it. You need to add “!important” at the end, before the semicolon, ie:
border: 4px solid #4f8b78 !important;
Hiya! So maybe what Im asking for is a bit unclear. I want the whole page to be the green colour, so I don’t want that white border around the image with text section, does this make sense?
What white border on images? I don’t see any, screenshot?
Try this - it will target ALL the elements (divs, imgs) past this “image-with-text” selector:
.image-with-text * {
border: unset !important;
}
Otherwise… “the whole page to be” green background, then use:
.shopify-section {
background: #4f8b78 !important;
}
