Align and group the masthead image on home page with copy

Store Design
, , ,

Topic summary

Aligning the homepage masthead image and adjacent copy in a Shopify theme’s slideshow section. The goal: center the text block and buttons beside the image to match a provided mockup (screenshots supplied).

Initial fix: Add CSS to center-align the slideshow text wrapper, enlarge the heading (≈90px), and center buttons. This achieved the desired desktop layout.

Issue: Mobile layout broke after the desktop CSS changes. The request was to keep mobile unchanged while updating desktop.

Update for desktop-only: Wrap the desktop styles in a media query @media (min-width: 768px) to limit changes to larger screens.

Additional mobile adjustments: Via Theme Settings > Custom CSS, add @media (max-width: 768px) rules to set the slideshow section’s height to unset and reduce the heading font size to 40px for better responsiveness (specific selector for the slideshow section used).

Outcome: The desktop alignment and grouping were fixed; mobile view preserved and improved. User confirmed the solution works for responsive view. Resolution: solved. Technical note: used CSS media queries to target desktop vs. mobile layouts; screenshots were central to illustrate expected/actual results.

Summarized with AI on December 14. AI used: gpt-5.
1

Hi Shopify community,

I am seeking help from you on aligning and grouping the landing page image with the copy displayed beside it. At this time I tried doing some CSS customisations but due to how the slideshow component works, I could go some extend.

codeN734_0-1732115316882.png
codeN734_0-1732115316882.png1334×889 144 KB

What I am looking to do is the following: (its an image):

codeN734_1-1732115419799.png
codeN734_1-1732115419799.png2520×1800 412 KB

Site: www.WearTheCosmos.in

Regards,

-VAD

2

Hi @codeN734

You can achieve this by adding this simple CSS code

You just need to follow these steps:

  1. Go to the Online Store
  2. Edit Code
  3. Find theme.css / base.css

And past that CSS Code:

.slideshow__text-wrapper { align-items: center !important; }
.slideshow__text-wrapper .banner__box.content-container .banner__heading {font-size: 90px;text-align: center;}
.slideshow__text-wrapper .banner__buttons { width: 100%; justify-content: center; }

Result:

Mehran_Ali_0-1732117100350.png
Mehran_Ali_0-1732117100350.png1892×796 142 KB

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

3

Hi,

This worked for desktop. However, the mobile view is broken. Is there a way that we can keep the mobile view as is but update only the desktop version.

codeN734_0-1732122391591.png
codeN734_0-1732122391591.png535×813 98.3 KB

Regards,

-VAD

4

Yes sure you can replace the css with this updated one

@media(min-width:768px){
    .slideshow__text-wrapper {align-items: center !important; }
    .slideshow__text-wrapper .banner__box.content-container .banner__heading {font-size: 90px;text-align: center;}
    .slideshow__text-wrapper .banner__buttons { width: 100%; justify-content: center; }
}

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

5

Hi @codeN734

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
div#Slider-template--18451460358370__slideshow {
    height: unset !important;
}
}
@media screen and (max-width: 768px){
div#Slider-template--18451460358370__slideshow {
    height: unset !important;
}
.slideshow__text-wrapper .banner__box.content-container .banner__heading {
    font-size: 40px !important;
}
}

Here is the result: https://prnt.sc/Lf5KJbVttY_j

I hope this helps

Best,

Daisy

1 Like
6

Thanks.. this worked for responsive view.

7

Thanks, this worked perfectly

1 Like