Pitch formula details section - image width

[INFRA]

Hi!

I would like the image to take up exactly 50% of the page, without any padding at the top or sides. This is on the product pages.

site

password: mcc

i tried below but that did not work, so would love a nudge in the right direction Thanks!

.image-block--AeCtaYlUvczBYYVJ1R__image_8ky3Ee {
  width: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.image-block--AeCtaYlUvczBYYVJ1R__image_8ky3Ee .image-block__image {
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  object-fit: cover;
}

[MandasaTech]

Hey!

You’re super close — the issue isn’t your CSS, it’s that Shopify’s online store editor wraps most product-page blocks inside a parent container that already has padding + a max-width. So even if you force the image itself to be 50%, the container around it keeps squeezing it.

To fix it properly, you need to override the container and the image block.

Try this instead:

/* Remove container limits for this specific image block */
.image-block--AeCtaYlUvczBYYVJ1R__image_8ky3Ee {
  width: 50vw !important;          /* Takes exactly half the viewport width */
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Make the actual image fill that 50% space */
.image-block--AeCtaYlUvczBYYVJ1R__image_8ky3Ee .image-block__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
}

Also you can share your store’s theme so we can send you a exact code for this.

[Small_Task_Help]

Hi,

Hope this will help

Add CSS in base.css or theme.css

CSS example

.pitch-formula-section .image-with-text__media,
.pitch-formula-section .image-with-text__media img {
    width: 50% !important;
    max-width: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pitch-formula-section .image-with-text {
    padding: 0 !important;
}

Replace .pitch-formula-section with the actual class or ID of your section.
Check for mobile overrides if layout behaves differently.

[tim_1]

Try this code in “Custom CSS” setting of this section:

.section-content-wrapper {
  --padding-block-end:  0 !important;
}

@media (max-width: 749px) {
  .image-block {
    margin: 0 calc( -1 * var(--page-margin));
    width: calc( 100% + 2 * var(--page-margin));
  }
}

@media (min-width: 750px) {
  .section-content-wrapper {
    --padding-block-start:  0 !important;
    --padding-block-end:  0 !important;
    --gap: var(--page-margin) !important;
  }
  .custom-section-content {
    grid-column: 2 / -1;
  }
  .image-block {
    flex-basis: calc( 50% + 2 * var(--page-margin));
  }
}

And remove the code you already have there.

[INFRA]

this worked perfectly, thank you!