Position and look of Button Label on slideshow

[Diamond0711]

Hi guys! 

How can I make this Button Label smaller and remove the annoying white background on mobile devices? 

 

My store: domercosmetics.com

password: domer

thanks! 

[ahsaniub123]

Hi @Diamond0711 

Please add this code in very bottom of theme.css file

@media only screen and (max-width: 749px) {
#shopify-section-161142297248858bad .slideshow__text-wrap--mobile {
    display: block;
    position: relative;
    top: -3rem;
    background-color: transparent;
}
}

[WinkyApps · Accepted solution]

Hi Diamond0711,

To remove the white background on mobile devices, login into your Shopify admin dashboard and navigate to Online Store > Themes > Actions > Edit Code

Search for the file theme.css and open it

In this file search for this below lines of code 

.slideshow__text-wrap--mobile {
  display: none; }
  @_media only screen and (max-width: 749px) {
    .slideshow__text-wrap--mobile {
      display: block;
      position: relative;
      top: -1.1rem;
      background-color: var(--color-bg);
      width: 85%;
      margin: 0 0 -1.1rem 7.5%;
      z-index: 8; } }

Replace it with the below

.slideshow__text-wrap--mobile {
  display: none; }
  @_media only screen and (max-width: 749px) {
    .slideshow__text-wrap--mobile {
      display: block;
      position: relative;
      top: -1.1rem;
      width: 85%;
      margin: 0 0 -1.1rem 7.5%;
      z-index: 8; } }

All we did here is that we removed the background-color entry to prevent the default white background. 

After making this change, save the theme.css file and check the entire store to see if everything is appearing clearly as needed.

Hope this helps.