How can I adjust banner size and convert image text to actual text on my website?

[Jina]

Hi,

I have two questions about shopify design:

1. I'm having trouble finding a way to adjust the website banner size. 

Our website URL is alexcarro.com and you'll see the banner size doesn't increase when you make the window wider. (see attached screenshot) 

I'd like the banner image to adjust/fit on the window size. 

2. Where it says: "Small-batch local skincare from Barcelona. All-natural.......with soul.", it's an image file but can we make this to text? 

Our website is built by a 3rd person and it's quite customized, so I'd like to know if there's a way to change the image section to text section. 

Let me know if you have any questions, thank you so much for your time. 

I'll be looking forward to hearing from you.

Best regards,

Jina 

[g33kgirl]

Hi @Jina, for 1. Can you please attach the pic in the post so it's easier to see what you want as I cannot find anything wrong with the banner. 

2. I'm not sure which widgets your theme supports but you can use Rich Text or Custom Content to type the text and then use CSS to design it like that. 

[Jina]

Hi,

Thanks for your response.

1. If you open the attached file, you'll see the banner image (blue sea)
does not extend till the end of the window. I marked it with red lines, can
you see that?
[image: Screenshot 2021-08-04 at 18.44.14.png]


2. I tried to find Section to include the custom content but cannot find
any option like that. Here are all our section options in Shopify customize
setting.

[image: Screenshot 2021-08-04 at 18.47.01.png][image: Screenshot 2021-08-04
at 18.47.12.png]


Let me know if you have any questions. Thank you so much!

Best,

[g33kgirl]

@Jina, unfortunately, I cannot view the screenshots. They are coming up as text in your post. Please can you repost the screenshots again? 

[Jina]

Hi, 

That's strange! Can you see them now?

1. Screen shot of banner img 

 

2. Screenshot of our shopify adding 'section' options

[g33kgirl]

Hi @Jina yes I can see the screenshots now. 

For the image issue, you can add this code at the end of your CSS file:

#shopify-section-1592320527412 .full-banner .banner-img img {
    width: 100%;
}

For your second issue, I'd recommend you to get in touch with the developers of the theme as they will be able to guide you better. 

[Jina]

I introduced that to the CSS but it seems like the space has gotten slightly smaller in Chorme. 

In safari, the image is extending as much as I change the window size. 

[g33kgirl · Accepted solution]

@Jina update the previous code to this:

#shopify-section-1592320527412 .full-banner .banner-img img,
.banner-img a {
    width: 100%;
}

[Jina]

It worked! Thank you so much!