How to Add Text Box (Please Help)

New Member
4 0 0

Hello All,

 

I'm trying to accomplish something like the following (without the changing text): https://causebox.com/

 

Simply put: I'd like to be able to add a text box over an image and have both the text and the box remain proportional to one another regardless of the screen size.

 

Currently, the Image with Text Overlay section seems to be broken in Shopify. For instance, if the screen size is too small then the text will simply spill over the  image or end up outside of it completely.`

 

Spill-over.pngText spilling over

no-spill-over.pngNo spill-over

The more I look at the causebox page, it looks like the text box is not auto-resizing at all until it gets to be mobile size. Then it jumps to a mobile size. So maybe the answer is stopping my Image with Text Overlay sections to NOT auto-resize? I already have a mobile section version of the Image with Text Overlay section,  so switching to mobile is no problem.

Anyway, I'm no CSS expert but I can follow direction pretty easily. Can anyone help here? My password is "temp".

0 Likes

Hello there,

 

Can you share your site URL so that I can share  css with you because you have to use  too many  CSS for this to handle in desktop,mobile and tab. 

 

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
4 0 0
Hi Pallavi,

Can’t believe I forgot to add it.
URL: pickleandchip.com
Password: temp
0 Likes
New Member
4 0 0

Hi Pallavi,

 

Can't believe I forgot to leave the URL.

 

URL: pickleandchip.com

password: temp

0 Likes
Highlighted
Astronaut
952 116 218

A handy trick that I've learned to prevent text from overflowing like that is to set the font-size attribute to a viewport width measurement, this requires only 1 media query for when you swap out your images. Your subtitle is in a container though where I usually work full width, so the font get's a little smaller than I'd actually prefer. I would add a class name to that container div called "preg-banner" and then target the subtitle class and the p element. So your html looks like this:

 

<div class="flex-caption">
              <div class="container">
                <div class="columns  nine offset-by-one  align_left">
                  
                    <h1 class="headline">
                      Desktop
                    </h1>
                  
                  
                    <div class="subtitle">
                      <p>This is a short subheading for your banner image</p>
                    </div>
                  
                  
                </div>
              </div>
            </div>

I would go into the code and find that section, probably in the sections folder, and add a class name to that container div:

 

<div class="flex-caption">
              <div class="container preg-banner">
                <div class="columns  nine offset-by-one  align_left">
                  
                    <h1 class="headline">
                      Desktop
                    </h1>
                  
                  
                    <div class="subtitle">
                      <p>This is a short subheading for your banner image</p>
                    </div>
                  
                  
                </div>
              </div>
            </div>

Up there I added preg-banner as an additional class name for the div. Then go into your CSS and target your subtitle like this:

 

.preg-banner .subtitle p {
font-size: 1.4vw
}

So that will scale your text proportionately to the viewport width. This will work, but like I said, since it's in a container it's set to a max width of 1200 px, the text scales smaller than I'd like. So I would make that container width 100%

 

.container .preg-banner {
width: 100%;
}

This is up to you though, you can make these changes in the DevTools to see if you like them by right-clicking your webpage and clicking "Inspect". You can make HTML edits on the fly so you can see what the changes will do. These do not effect your website and will be gone when you refresh.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes