Solved

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

brigabcor
Tourist
10 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;
  }
}

 

Accepted Solutions (2)
ZestardTech
Shopify Expert
5393 970 1291

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

View solution in original post

ZestardTech
Shopify Expert
5393 970 1291

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

View solution in original post

Replies 9 (9)

ZestardTech
Shopify Expert
5393 970 1291

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
brigabcor
Tourist
10 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

  

ZestardTech
Shopify Expert
5393 970 1291

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
ZestardTech
Shopify Expert
5393 970 1291

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
brigabcor
Tourist
10 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

  

ZestardTech
Shopify Expert
5393 970 1291

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
brigabcor
Tourist
10 0 4

Pallavi, THANK YOU VERY MUCH!!

ZestardTech
Shopify Expert
5393 970 1291

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