Button Label on desktop view is different from mobile view

Solved
LucID
New Member
2 0 0

Hey guys and gals, I have researched for hours and tried plugging in solutions from previous discussions but non have worked so I have no other option but to ask personally in the forums. 

 

My issue is that my button label on the slideshow in desktop view is completely different from mobile view

I provided some pics without exposing too much of my site.

(Desktop):

Example 1.png

 

 

 

 

button label on my desktop view is even between the site just roughly about in the middle.

(Mobile):

Mobile ViewMobile View

 

 

 

 

 

 

 

Annnnnnd boom, my button label took a poop and fell under my slideshow big and bulky not the same color and everything

 

Heres what I messed with 

 

example 3.png

 

 

 

 

And here is what's at the end of my code 

 

example 5.png

SUPER Thanks in advance

 

0 Likes
PeanutButter
Shopify Partner
330 65 136

Please share your site url and what theme you are using

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
LucID
New Member
2 0 0

Emailed it to you @ hello@peanutbutter.es

0 Likes
PeanutButter
Shopify Partner
330 65 136

This is an accepted solution.

Added this at the end of theme.scss.liquid to meat your requirements:

/*******************************************/
/******* Add customizations below **********/
/*******************************************/

/*
 * Slideshow button - show over slide in mobile
 * Author: https://peanutbutter.es
 */

// Make button smaller in mobile:
.hero__text-content .btn {
  @include at-query($max, $medium) {
  	padding: 8px 16px;
  }
}
// Hide button below slideshow
.hero__adapt-text-wrap {
  display: none !important;
}
// Prevent default hide of button over slideshow
.hero--adapt .hero__text-align {
  @include at-query($max, $medium) {
    display: table !important;
  }
}

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es