Jump to content

CSS for increasing size of title & description box on slideshows

Recommended Posts

Site URL: http://www.sisunaturals.com

Hello! I've created a title and description on a slideshow image on my homepage, but when I go to the mobile version it squishes the font into a tiny box. I would like to widen the space it allows the text to fit in so that the words are on the same line. I am using version 7.0 in the Brine family . 

the home page is www.sisunaturals.com 

I would like the text on the mobile version to look like:

WHERE NATURE MEETS NURTURE
products for natural and sustainable living

Right now it looks like:

WHERE NATURE
MEETS NURTURE
products for natural
and sustainable living

 

Thanks!!

Emily

Link to comment

Try decreasing the "Title Padding" of this block.

it's set to be very small (see screenshot > max size of the container is around 500px

1397735388_Bildschirmfoto2021-02-09um10_57_08.thumb.png.703e8994687d458a961e5ec3085abc62.png
820113078_Bildschirmfoto2021-02-09um10_55_06.png.a3c9fe366dd07c648bf062b685ea8f52.png


Are you a bit familiar with CSS?


Something like

.meta-inside
{max-width: 1000px !important) 

but probably more to fine-tune it on all devices

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

Link to comment
3 hours ago, ArminB said:

Try decreasing the "Title Padding" of this block.

it's set to be very small (see screenshot > max size of the container is around 500px

1397735388_Bildschirmfoto2021-02-09um10_57_08.thumb.png.703e8994687d458a961e5ec3085abc62.png
820113078_Bildschirmfoto2021-02-09um10_55_06.png.a3c9fe366dd07c648bf062b685ea8f52.png


Are you a bit familiar with CSS?


Something like


.meta-inside
{max-width: 1000px !important) 

but probably more to fine-tune it on all devices

Thanks Armin. Copying that code into the custom CSS section didn't seem to change anything. When I inspect on the page, I can't see the any of the text that you've shown in the screenshot. I'm not sure where to find it 

Developer Sisu Naturals.jpg

Link to comment
On 2/10/2021 at 7:40 AM, ArminB said:

Dear @sisunaturals looks like you figured it out? well done!

Yes! Thank you. I played around with it and figured it out. For anyone new coming to the thread, my codes were:

.sqs-block-gallery .sqs-gallery-block-slideshow 
.meta { .meta-inside  {}
    max-width: 1000px !important;
    padding: 5px 5px;
  }
  @media screen and (max-width:480px) {
    .sqs-block-gallery .sqs-gallery-block-slideshow 
.meta { .meta-inside  {}
    max-width: 900px !important;
    padding: 3px 0px;
    }}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.