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

Solved
brigabcor
New Member
9 0 4

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;
  }
}

 

0 Likes
Pallavi
Shopify Expert
2170 353 463

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
brigabcor
New Member
9 0 4

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.09 PM.png

  

0 Likes
Pallavi
Shopify Expert
2170 353 463

Share me preview link.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Pallavi
Shopify Expert
2170 353 463

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
brigabcor
New Member
9 0 4

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.20 PM.png

  

Pallavi
Shopify Expert
2170 353 463

This is an accepted solution.

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;
    }
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
brigabcor
New Member
9 0 4

Pallavi, THANK YOU VERY MUCH!!

Pallavi
Shopify Expert
2170 353 463

This is an accepted solution.

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing