Remove Padding around the image module

SlimSr2003 — Wed, 30 Jun 2021 13:53:25 GMT

I have created this page: https://info.yeshealth.com/hta and I have used an Image module grouped with a rich text module to make a row. I have used the code blow my signiture to center the text and the image module in the row. The issue I am having is that the image(s) have padding/margins around them and I would like them to go to the edge of the page and ideally fill the area on that side of the row.

Any thoughts?

Thanks

Scott

Code used to center Text and Image in Row:

.rowVertcenter > .row-fluid-wrapper > .row-fluid {
display: flex;
}
.textVertcenter>div {
display: flex !important;
align-items: center;
justify-content: center;
height: 100%;
}
.textVertcenter>div>span {
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 768px) {
.rowVertcenter > .row-fluid-wrapper > .row-fluid {
flex-direction: column;
}
/* If you want to re-order the text so it's above the images on mobile add this */
.rowVertcenter > .row-fluid-wrapper > .row-fluid > .span6:not(.textVertcenter) {
order: 2;
}

Re: Remove Padding around the image module

piersg — Wed, 30 Jun 2021 15:42:42 GMT

Your spans wrapping the images has a width of 90%. You need to change that to 100%

.textVertcenter>div>span { /*width: 90%;*/ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }

Re: Remove Padding around the image module

SlimSr2003 — Wed, 30 Jun 2021 18:02:57 GMT

Piersg,

Thank you that fixed it. Simple solution!

Scott

topic Re: Remove Padding around the image module in CMS Development

Remove Padding around the image module

Re: Remove Padding around the image module

Re: Remove Padding around the image module