How can I align a section fully to the left on a desktop homepage?

Store Design
, ,

Topic summary

A user seeks help aligning a homepage section so that:

  • The image starts flush from the left edge (like their banner)
  • The text extends close to the right side

A web designer provides a CSS solution involving two main modifications:

For desktop screens (767px+):

  • Set object-position: left on the image-with-text media element to anchor the image to the left

Additional styling:

  • Remove right padding from the content container
  • Adjust section padding and set max-width to 100%

The code snippets target specific Shopify theme classes (.image-with-text__media, .image-with-text__content) and should be added to the Base.css file. The solution remains open-ended as the original poster has not confirmed whether the fix resolved their alignment issue.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi can you please help me align this section fully to the left in my home page, with the picture starting from the left like the banner and then the text reaching all the way close to the right. thank you

Pass: biangu

Url: www.matibrnd.com

MT27_0-1711969972472.png
MT27_0-1711969972472.png2364×1138 252 KB

2

Add This Css in your Base.css File

@media screen and (min-width:767px){
    .image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media img   {
        object-position: left;
    }
}   
.image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--18448488431883__image_with_text_8mt88M-padding {
    max-width: 100%;
    padding: 26px 0;
    margin: 0;
}
.image-with-text__content.image-with-text__content--top {
    padding-right: 0;
}