The image-with-text-overlay section in the Flex theme is great for banners, but it has some some shortcomings regarding mobile responsiveness.
In this tutorial we show you how to add a new section which makes it easier to configure this section for mobile view, allowing separate content for mobile and desktop ensuring your page looks greater on any device.
Steps to add this section
- Add the section below to your theme files. Watch video for instructions.
image-with-text-overlay-responsive.liquid
Transcript
Hey, it's Michael here with Jade Puma in this video, I'm going to show you how to make your image with text overlay sections in the flex theme more responsive. So let's take a look at the image with text overlay section. So here's an example, we're using it as the homepage banner on this store. And we have this background image with this blue area on the right, and that's where we're overlaying the text. Now, the problem with the original image with text overlay section. So here is the original one. Now we can control the position of this box, just fine on desktop. So we have this we can horizontal position left or right, and then we can control the width of the tax box here
So we can get it to fit nicely on desktop. The problem is then when we switch to mobile sometimes it's just impossible to to get it to fit where you want on mobile. So for example, on mobile here, our background image it has this blue area at the bottom that there's just no way with these settings to to fit this overlay into that box because we don't have individual control here over the text on mobile versus the desktop. So that's what we've fixed in our section. So let's go ahead and look at the settings available in this section, we made image with text overlay responsive. It's called. So here we have our, here it is. So here we have the desktop settings, which is our desktop image, all, all the desktop content, the same settings we had before, but now we also can come down here and we have we have our mobile settings. Now we choose our mobile image and we choose our mobile content so we can choose, you know, different content for desktop and mobile. We can also control the height of this text box. So let's to make that clear, let me just give the text box a background color. Let's give it white with some opacity.
Okay. So here we can see, this is the height of the text box. Now, if we want to make this a little bit shorter, just so it fits in right inside this blue area. Now we can control that directly on mobile. Perfect. And then we can also come in here and let's say we only wanna show this much text on mobile. We can do that.
And it won't affect the text, the displays on desktop. We still have the full paragraph on desktop. And then there's a couple more features here. If you're using this banner as you're the main homepage banner, you might wanna have this heading be H one element. So you can come down here to our H one setting. Yeah, use H one for heading here. Now, if you're using this banner lower down on your page, maybe you don't want it to be a H one. So you can unselect that and you have that option as well. So, so that's the section and I'm going to show you how to install now. So let's go over to our theme and install this section.
Okay. Now to install this theme you just want to come over to our blog article. So if you're watching this video on YouTube, you'll find a link in the description to the blog article. And you'll find this code here. So you just scroll down to the bottom and it's all one file. So we just wanna select this entire file, click on view raw and copy all that code. And then we just wanna come back into our theme code here. Oh yeah. So by the way, you want to click on actions. So your live theme or the theme, you wanna install it in, click on actions, edit code, and that'll give you access to all your theme files here.
And now we want to go to sections. So let's find the sections folder here and then click on, add a new section. Let's call this responsive image with text and then dot liquid at the end and create section. So now we have a new section that's clear out the existing code and then paste all that code we got from the blog article and then just hit save. And that's all you need to do. Now, you will have access to the new section in your customizer, and it's going to be called. It's going to be called image with text overlay responsive. So thanks for watching. And if you have any questions about that just send us an email here at Jade Puma, or leave a comment below this video.