Slideshow Header not showing on mobile - Origin Theme

Store Design
,
1

Hello all,

I’m having a problem with the header text and buttons not showing up on mobile. They work perfectly on desktop, but not on mobile. I have no idea how to make the slideshow header text and buttons show on mobile… There is no option to add/remove such text from mobile view.

Please contact me privately for the website URL.

Thank you very much.

2

Hello @shapewear ,

Here is a general guide you can try to follow:

  • Go to Online Store → Themes → Actions → Edit code

  • Go to Sections → header.liquid file

  • Wrap your slideshow header text and buttons in a container element with a specific class or ID like this:


  # Slideshow Header
  • Add CSS styles to hide the container element by default on smaller screens like this example:
.slideshow-header {
  display: none;
}

@media (max-width: 767px) {
  .slideshow-header {
    display: block;
  }
}
  • Go to Assets folder → base.css file → add this following code at the bottom of page:
@media (max-width: 767px) {
  .slideshow-header {
    display: block;
    text-align: center;
    background-color: #f2f2f2;
    padding: 10px;
  }
  
  .slideshow-header h1 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .slideshow-header button {
    font-size: 14px;
    padding: 5px 10px;
    margin: 5px;
  }
}

Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

3

Thanks for your reply, but I don’t think that’s what I’m looking for. When trying that code, it added a whole new section, but maybe I’m inserting the code wrong.

Let me clarify:
I took a screenshot of the desktop vs mobile view of two slideshow sections on the homepage. The desktop view shows the button and slideshow header perfectly, the mobile view does not.

How can I simply enable the mobile version to show the same exact text/buttons as the desktop view?

Please view the .mp4 I uploaded.

Thanks in advance.