Place The Text On My Home Page In The Center

Store Design
, ,

Topic summary

A user seeks help centering text over a homepage image across different desktop screen sizes. Currently, the text shifts downward as the screen becomes smaller, rather than remaining centered on the photo.

Proposed Solution:
A web designer suggests adding CSS code to the base.css file:

  • Apply align-items: center to the image-with-text grid container
  • Add margin: 0 !important to specific content sections

The solution targets the theme’s image-with-text component to maintain vertical centering regardless of viewport width. The user provided store access credentials and reference images showing the current misalignment versus the desired centered layout.

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

Hi can you help place the text on my home page in the center of the photo for every desktop size (like 2nd image) ? As you can see when the screen becomes smaller the text goes very down. Thank you

Pass: biangu

Url: www.matibrnd.com

MT27_0-1712655612075.png
MT27_0-1712655612075.png400×209 46.5 KB

MT27_1-1712655612292.png
MT27_1-1712655612292.png400×154 40.5 KB

2

Add This css In your base.css File

.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet {
    align-items: center;
}
#shopify-section-template--18448488431883__image_with_text_8mt88M .image-with-text__content.image-with-text__content--top{
    margin:0 !important;
}