A Shopify store owner needs help customizing their slideshow banner for mobile devices. Specifically, they want to:
Requested Changes:
Solution Provided:
A PageFly support representative (Victor) provided custom CSS code to implement these changes. The solution involves:
The code adjusts font sizes to 30px, changes text colors to white, modifies button styling (white background, black text), and centers elements using flexbox properties.
Outcome:
The original poster confirmed the solution worked and thanked the support representative. Issue resolved.
I need help changing the heading and sub-heading text to white and bigger for mobile. I also want the button colors to be white and the text button to be black for mobile. Also if possible to center everything for mobile.
Website: https://gripmags.myshopify.com/
Password: password
Hi @GripMags
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.scss.css.
Step 3: Paste the below code at bottom of the file → Save
@media screen and (max-width: 767px){
h3.SectionHeader__SubHeading.Heading.u-h6 {
font-size: 20px !important;
color: white !important;
}
h2.SectionHeader__Heading.SectionHeader__Heading–emphasize.Heading.u-h1 {
font-size: 30px !important;
color: white !important;
}
header.SectionHeader, .ButtonGroup {
display: flex;
flex-direction: column !important;
align-items: center;
}
#section-slideshow .Button {
color: black !important;
border-color: unset !important;
}
#section-slideshow .Button::before {
background-color: white !important;
}
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
Thank you so much.
You are welcome @GripMags 
