Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
}
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
Hello There,
Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.
Hello,
Here are the screenshots, the website is still under dev stage now.
Share me preview link.
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;
}
}
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!
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;
}
}
Pallavi, THANK YOU VERY MUCH!!
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024