Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS for increasing size of title & description box on slideshows


sisunaturals

Question

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 post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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  {}     m

Posted Images

4 answers to this question

Recommended Posts

  • 0

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

Link to post
  • 0
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 post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...