Align and group the masthead image on home page with copy

[codeN734]

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. 

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

Site: www.WearTheCosmos.in

Regards,

-VAD

[Mehran_Ali]

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:

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!

[codeN734]

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. 

Regards,

-VAD

[Mehran_Ali · Accepted solution]

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!

[codeN734]

Thanks, this worked perfectly 

[DaisyVo]

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

[codeN734]

Thanks.. this worked for responsive view.