How do I edit position and align the text on Hero Banner?

Store Design
1

Hi!

I currently have a problem aligning and keeping the text responsive based on mobile and desktop view. The words “VIEW THE COLLECTION” is working fine, but I can’t make it happen to the words “RISE & SHINE”

Does anybody have a code for this? I’ve attached photos for reference, and also the code I used for the VIEW THE COLLECTION button.

Thanks!

Brian

CURRENT CODE FOR “VIEW THE COLLECTION”
h1.hero__text-title {
text-align: right!important;
}

@media (min-width: 768px){
.hero__content-centered{
text-align:right!important;
}
}

.hero__content-centered a.btn {
margin-top: -35%;
}

@media only screen and (max-width: 767px){
.hero__content-centered a.btn {
margin-bottom: auto!important;
}
}

a.hero__cta {
margin-bottom: 280px;
}

@media (max-width: 767px){
a.hero__cta {
margin-bottom: 360px;
}
}

CURRENT CODE FOR “RISE & SHINE”

h1.hero__text-title, .hero__text-title.h1 {
font-family: “Harbour-Regular.woff”! important;
font-size: 26px ! important;
text-transform: none ! important;
}

@media (min-width: 768px){
h1.hero__text-title, .hero__text-title.h1 {
text-align:right!important;
}
}

2

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

3

Hello,

Here are the screenshots, the website is still under dev stage now.

Screen Shot 2021-07-20 at 7.52.21 PM.png
Screen Shot 2021-07-20 at 7.52.21 PM.png924×568 230 KB

Screen Shot 2021-07-20 at 7.52.09 PM.png
Screen Shot 2021-07-20 at 7.52.09 PM.png671×554 153 KB

4

Share me preview link.

5

https://www.episodesupply.com/?_ab=0&_fd=0&_sc=1&key=b347f95fee752a9d53329695c86624584e9b029f264496a182652b66d1e6e81f

Is this the preview link?

6

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

div#shopify-section-slideshow .hero__content-wrapper .hero__content h1.hero__text-title {
padding: 0px 30px;
}
@media screen and (max-width:767px){
div#shopify-section-slideshow .hero__content-wrapper .hero__content h1.hero__text-title {
text-align: center !important;
}
}
7

Thank you! That put the RISE & SHINE in the middle but there are still some issues,
For Mobile View: RISE & SHINE overlaps with VIEW THE COLLECTION, can it be under VIEW THE COLLECTION?

For Desktop: Can we position RISE & SHINE right below VIEW THE COLLECTION?

THANK YOU!

Screen Shot 2021-07-20 at 8.24.28 PM.png
Screen Shot 2021-07-20 at 8.24.28 PM.png944×534 229 KB

Screen Shot 2021-07-20 at 8.24.20 PM.png
Screen Shot 2021-07-20 at 8.24.20 PM.png448×552 148 KB

8

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

div#shopify-section-slideshow .hero__content-wrapper .hero__content h1.hero__text-title {
        margin-top: -13vw !important;
}
div#shopify-section-slideshow .hero__content-wrapper .hero__content a.btn {
    margin-top: -14vw !important;
}
@media screen and (max-width: 1080px){
    div#shopify-section-slideshow .hero__content-wrapper .hero__content a.btn {
        margin-top: -22vw !important;
    }
}
@media screen and (max-width: 767px){
    div#shopify-section-slideshow .hero__content-wrapper .hero__content a.btn {
        margin-bottom: 80px !important;
    }
}
9

Pallavi, THANK YOU VERY MUCH!!

10

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

If helpful then please Like and Accept Solution