Slider Text Not Showing On Mobile

Hi jcmurray,

you can try to open your style.css then try to find the script of media screen for mobile. Then you need to chenge the font-size value at this line:

.text-slider .maintitle {
  font-size: 40px;
  line-height: 50px;
  padding-bottom: 10px;
}

you can change the value of font-size smaller than 40
see this capture https://prntscr.com/7h2mza

Looks like that did the trick!
Changed it to 30px and voila!
Thanks so much for your help:)

Never mind…the slider text is sitting over the menu drop down (viewing on iPhone 4s…how can I fix this without throwing it off for the rest of the devices?

Hi,
you can add margin-top: 90px; within your media max-width 479px > .text-slider so, your new code should be like this:

@media only screen and (max-width: 479px){
  ................. 

  .text-slider {
    display: block !important;
    margin-top: 90px;
  }

  ................
}

Thank you Awanrmb. That worked well for me.

Hey everyone,

I tried both your fixes and it didn’t change anything, my text still isn’t showing on my phone ??

Can anyone help me please ?

here’s my code below

THANKS !!

/* Media Queries
-------------------------------------------------------------- */
	@media only screen and (min-width: 1930px) {
		.parallax {
			background-size: cover;
		}
	}
	/* Smaller than standard 1200 */
	@media only screen and (max-width: 1199px) {
		.roll-icon-list .list-item {
			margin-bottom: 18px;
		}
		.roll-project.fullwidth .project-item {
			width: 25%;
		}
		.masonry-layout .hentry {
			width: 455px;
		}
	}
	/* Smaller than standard 980 */
	@media only screen and (max-width: 991px) {
		.site-header.fixed {
			position: absolute;
		}
		.parallax {
			background-size: cover;
			background-attachment: scroll;
			background-position: top center!important;
		}
		.roll-counter .numb-count {
			font-size: 24px;
		}
		.masonry-layout .hentry {
			width: 345px;
		}
		.header-wrap .col-md-8 {
			padding: 0;
		}
		.last {
			margin-bottom: 0 !important;
		}
		.margin-bottom-device {
			margin-bottom: 50px;
		}
		.margin-top-device {
			margin-top: 50px;
		}
		.content-area .post-wrap,
		.contact-form-wrap {
			padding-right: 0;
		}
		.contact-form-aside,
		.sidebar {
			margin-top: 50px;
		}
		.roll-icon-box {
			margin-bottom: 30px;
		}
		.roll-promobox.aside-style,
		.roll-promobox.aside-style .promo-wrap,
		.roll-promobox.aside-style .promo-content,
		.roll-promobox.aside-style .promo-controls {
			display: block;
			text-align: center;
			width: 100%;
		}
		.roll-promobox.aside-style .title {
			margin-bottom: 20px;
		}
		.roll-project.fullwidth .project-item {
			width: 33.3%;
		}
		.footer-widgets .widget {
			margin-bottom: 50px;
		}
	}
	@media only screen and (max-width: 1024px) {
		.slides-container .slide-item,
		.panel-row-style {
			background-attachment: scroll;
			background-position: center !important;
		}
		.panel-row-style.mob-pad-0 {
			padding: 0 !important;
		}
		.panel-row-style.mob-pad-15 {
			padding: 15px 0 !important;
		}
		.panel-row-style.mob-pad-30 {
			padding: 30px 0 !important;
		}
		.panel-row-style.mob-pad-45 {
			padding: 45px 0 !important;
		}
		#mainnav {
			display: none;
		}
		.btn-menu {
			display: block;
		}
	}
	@media only screen and (max-width: 780px) {
		.roll-client .client-item img {
			max-width: 100%;
  		}
  		.panel-grid-cell {
   			padding-left:15px !important;
    		padding-right:15px !important;
    		margin-bottom: 15px !important;
  		}
		h1 { font-size: 32px;}
		h2 { font-size: 28px;}
		h3 { font-size: 22px;}
		h4 { font-size: 18px;}
		h5 { font-size: 16px;}
		h6 { font-size: 14px;}
	}
	/* Tablet Landscape */
	 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
		.parallax {
			background-size: cover;
			background-attachment: scroll;
			background-position: top center!important;
		}
	}
	/* All Mobile Sizes */
	@media only screen and (max-width: 767px) {
		.posts-layout {
			max-width: 100%;
		}
		.masonry-layout .hentry {
			width: 100%;
			margin: 0 0 30px;
			padding: 0 15px;
		}
		.text-slider-section {
			min-height: 190px;
		}
		.text-slider .maintitle {
			font-size: 30px;
		    line-height: 50px;
		    padding-bottom: 10px;
		}
		.text-slider .subtitle {
		    font-size: 16px;
		    line-height: 24px;
		    padding: 20px 0 34px;
		}
		.roll-button {
			padding: 10px 30px;
		}
		.roll-project .project-item {
			width: 100%;
		}
		.roll-project.fullwidth .project-item {
			width: 50%;
		}
		.roll-counter {
			margin-bottom: 50px;
		}
		.single-post .author-post .author-avatar {
			float: none;
			margin-bottom: 20px;
		}
		.single-post .author-post .author-info {
			margin-left: 0;
			padding: 0;
		}
		.single-post .author-post ul.socials {
			position: static;
		}
		.single-post .author-post .intro {
			clear: left;
			padding-top: 10px;
		}
		.comment-list .children {
			margin-left: 75px;
		}
		.error-wrap .error-search {
			padding: 0 20px;
		}
		.aside-image .content-wrap {
			padding-left: 0;
			padding-right: 0;
		}
		.social-menu-widget a:before {
			font-size: 42px;
		}
		.btn-menu {
			float: none;
			margin: 30px auto 0;
		}
		.header-wrap {
			text-align: center;
		}
		#mainnav-mobi {
			top: auto;
		}
		.site-header.float-header {
			padding-top: 20px;
			padding-bottom: 20px;
		}
		.text-slider {
			display: none;
		}
        .text-slider-section {
			min-height: 0;
			top: auto;
			bottom: 10%;
		}
		.site-title {
			font-size: 26px !important;
		}
	}
	/* Mobile Portrait Size */
	@media only screen and (max-width: 479px) {
		.roll-project.fullwidth .project-item {
			width: 100%;
		.text-slider {
    		display: block !important;
    		margin-top: 90px;
  	}
		}
	}

Nevermind guys I found the solution !

thansk anyway ??

Working perfectly now, thanks ??

Segolini, can you please share how you fixed it? I’m viewing on iPhones (4, 6, 6+) and Samsung galaxy note 3 and the text is not showing on slider page, even with css alters to font size (29).

FYI: The demo shows text on the Samsung, not on the iPhones

Any help would be much appreciated!