How do I reduce the maximum width of these banner image subtitles?

Technical Q&A
1

Hello,

https://empiricalwater.com/

Please scroll down to the banner images where you find the text:

“with Empirical Water v1.4: coffee/tea edition”

How do I reduce the maximum width of those lines of text on mobile only?

2

Hi @empiricalarby

This is Henry 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 base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.banner__box.content-container.content-container–full-width-mobile.color-accent-2.gradient {

padding: 0 !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Thanks, but as much as I reduced the max width, I wasn’t actually able to make it small enough that it would read like this:

with Empirical Water v1.4:

Coffee/Tea Edition

Instead, it currently says,

with Empirical Water v1.4: Coffee/Tea

Edition

The other issue I’m encountering is that the “Buy Now” and “Learn Stuff” buttons on the tea banner are side by side. They are supposed to be one atop the other, just like the coffee banner buttons, on mobile. Let me know if you have a solution for that. Thanks!

4

Also, is there a way to change the font size of those subtitle lines mentioned?