Canvas Support

Missing banner text on mobile

7 replies · opened Jul 22, 2016

GGavinBaylisJul 22, 2016

The code for the banner text on a mobile phone does not appear ??

http://www.therundiary.co.uk/

			<div id="oc-images" class="owl-carousel owl-carousel-full news-carousel header-stick bottommargin-lg">

				  <div class="oc-item">
                    [

attachment
](#)
<div class="overlay">
<div class="text-overlay">

                            &lt;div class="text-overlay-title"&gt;
                                &lt;h2&gt;A run with a view&lt;/h2&gt;
                            &lt;/div&gt;
                            &lt;div class="text-overlay-meta"&gt;
                                &lt;span&gt;14th October 2015&lt;/span&gt;
                            &lt;/div&gt;
                                &lt;/div&gt;
SSemicolon WebSTAFFJul 25, 2016

Hello,

Please fine and delete the following code in the css/responsive.css File: 

.news-carousel .overlay { display: none; }

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

GGavinBaylisJul 25, 2016

Tried that and still no words on the pictures on Samsung Galaxy Android - tried a phone that had never called the page up, so not caching issues, unless at ISP

SSemicolon WebSTAFFJul 25, 2016

Hello,

We have just checked out your Website and the Code still does not seem to be removed. Please consider Trying Again. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

GGavinBaylisJul 26, 2016

Ok found out why - Site5 hosting changed server IP on my VPS over the weekend and I was changing the css on the old cached server !!!!

So have now made changes on the new server and have the words :)

So next question as does not look too good - can the font size / layout of the text be changed in responsive css so it looks way better ?

Many thanks

SSemicolon WebSTAFFJul 27, 2016

Hello,

Glad the issues were resolved. :)

This is Definitely Possible. You can simply add the following code to reduce the Size of the Font: 

@media (max-width: 767px) {

	.text-overlay-title h2 { font-size: 28px; }

	.text-overlay-meta { font-size: 13px; }

}

@media (max-width: 479px) {

	.text-overlay-title h2 { font-size: 28px; }

	.text-overlay-meta { font-size: 13px; }

}

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

GGavinBaylisJul 28, 2016

Thanks - where is the "read story" box css for the box padding and font please - I tried various buttons in responsive css but failed totally to find it :(

SSemicolon WebSTAFFJul 28, 2016

Hello,

The Buttons are fixed in size and not responsive. So you will need to use the Bootstrap Responsive Utilities: http://getbootstrap.com/css/#responsive-utilities to Show/Hide the Buttons on different Device Sizes.

Hope this Helps. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard