Shape 5

We built a recent client site on General Contractor and it was working fine up until a few days ago.  Now, the mobile phone view does not show the slideshow, it shows up as a line.  It was resizing fine but now is not.  I updated the Vertex framework, the template and tried 2 other slideshows and nothing fixes the issue.  The site is located here:  http://idealplasticssystems.com/index.php.  I have included a picture of how it looks on the phone.  Please advise how to fix this asap.  Thank you.  Dawna

Hello,

I do see the issue but you are using a 3rd party slideshow module. If you can post the URL with the S5 Image and Content Fader I can take a look and see why its not resizing properly.

I'm having a similar issue on my site where the pics and text in the content fader aren't responsive.

dev2.commandconstructioninc.com

In regards to the text it is responsive, you'll see it adjust to the screen width and it doesn't spill outside of the web browser.

As for the images the look good to me, you can try setting them to "cover" in the admin area of the image and content fader. But remember the aspect ratio is changing from widescreen width to narrow width and tall height for the mobile version so there is no way to show the entirety of each image as they are all wide screen or width images.

I'm not as worried about the pictures as I am the text.  I have 3 images/texts sets.  In the first 2, the text runs off the page and is split.  In the 3rd, it's fine and centered correctly.  Any thoughts?

Oh ok I see the issue now, some of the words are longer and thus not breaking to the next line. Adding this CSS to the bottom of your custom.css file will cause the letters to break and fall to the next line when there is not enough horizontal space:

Thanks.

But is there anyway to have a bit of CSS code so that it shrinks the font so the words don't break?

Sure you would just use something like the following:


And add it in your s5_responsive.css file with a max screen width of when you want it to show and use the above code.

Thanks for the response.  I've tried including that, but the font doesn't seem to be changing.  I removed the word break code from the custom.css file and included it with the font size code.  I even reduced the font size down to 8px.  Font doesn't change, but the word break works.  If I remove the word break code, the text goes back to normal:  off the screen.  When I put it back in, it wraps the words on the screen and breaks them.  So...I know I have the code in the right place, it's just not reading the font size.  Thoughts?

Ah sorry I forgot to mention the !important that needs to be on this to force an override to whatever is currently set as the font size:

Perfect!

That did the trick!

Thanks.