Debut Theme - Change Subheading Color on Mobile + Increase Product Feat. Header Size + Filter Table

Solved
Highlighted
New Member
11 0 0

Hello Friends, 

I currently have debut theme on my business. Looking for support on three things: 

1. I have a image slider at the top of my page with a heading and subheading. On web version font is white for both. On Mobile version font changes to black on heading but stays white on subheading. Need to make the font black for the subheading on mobile version as it disappears with white background. No changes for web version - needs to stay white. Please see below pics:

Web Version Slide Image

web version header.PNG

Mobile Version Slide Image - subheader text stays white and 'disappears'

mobile version header.PNG

2. For Product Features -> Content 

- How can I make the Heading text larger than the Text Body? Currently both heading and text are same size. 

3. Filter Table  

Under my Shipping Policy page, I've provided a table which shows shipping lead times by country. This is a pretty long table (60+ Countries/rows with 2 columns) and does not look good given length.

Below is sample image for the first few countries.

How can I create a filter table where the customer can type in their country in a "search box" and as they type their country would appear and populate the lead time?

For example, if you start typing "Bel" - Belgium Country option would appear, and you would select Belgium, and it would show you the lead time of "09-18 Days"

The total data would be hidden so the massive table isnt there (60+ rows), but just a search bar that populates after you type your Country then shows you the single lead time once you select a country. 

shipping table.PNG

URL: https://bestrong-af.com/

Thanks,

rad1ant

0 Likes
Highlighted
Shopify Partner
674 109 148

Hello @rad1ant, Protected Password? 

0 Likes
Highlighted
New Member
11 0 0
Click to expand...
password has been removed 
0 Likes
Highlighted
New Member
11 0 0

please try now

0 Likes
Highlighted
Shopify Partner
674 109 148

This is an accepted solution.

@rad1ant,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

 

@media screen and (max-width: 451px){
span.mega-subtitle.slideshow__subtitle.slideshow__subtitle--mobile p {
    color: black !important;
}
}
.product-single__description.rte>strong {
    font-size: 22px;
}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes
Highlighted
New Member
11 0 0

That worked perfectly! Thank you

0 Likes
Highlighted
New Member
11 0 0

Would you know how to fix the second and third things?

2. For Product Features -> Content 

- How can I make the Heading text larger than the Text Body? Currently both heading and text are same size. 

3. Filter Table  

Thanks,

rad1ant

0 Likes