Not showing title and content on mobile

I have the same problem. Anyone have thoughts on this?

@worm77 Your Foodie Pro theme includes some CSS that hides the slider title at screen widths under 420px (line 2699, style.css):

.slide-excerpt {
	display: none;
	visibility: hidden;
}

You could remove or comment out that code to have the title appear at all screen widths.

@sallyinstc The issue will likely be the same with your site if you use Foodie Pro. If not, please feel free to share a link – I’m happy to take a look.

I’m using the Outreach Pro theme. Right now it’s on my dev server, so there’s not a link yet. I found .slide-excerpt in the style.css, but commenting out did not work for me.

@sallyinstc For Outreach Pro, this code is responsible for hiding the text and arrows at smaller screen widths (line 2235):

.content #genesis-responsive-slider .flex-direction-nav li .next,
.content #genesis-responsive-slider .flex-direction-nav li .prev,
.content .slide-excerpt {
	display: none;
}

You may need to add additional CSS to rearrange the text layout or font size at smaller widths if you remove the above code, though. (The reason it’s hidden at all is because longer excerpts and titles don’t tend to fit inside the image area on smaller screens.)

I have the same problem with the Genesis News child theme. I also commented out the .slide-excerpt line in the stylesheet style.css file to no effect. I can’t find any code that refers to #genesis-responsive-slider, so any help would be appreciated.

Thanks in advance.

@caghaedul001 Please can you link to your site?

Here’s the link: https://www.nicklaus.comom

@caghaedul001 Thanks! You can force the slider title and excerpt to appear at mobile widths by placing this in your theme’s stylesheet:

.slides .slide-excerpt {
	display: block !important
}

Thank you so much for that quick response.

Can you be more specific about where it should go in the stylesheet or doesn’t it matter? There are three sections that mention .slide-excerpt: Responsive Design, Home Pop-up Mobile, and Slider. I changed “display: none” to “display: block” where I found it and haven’t seen any change in Safari on an iPhone. I assume I need to add the lines you posted above.

Jerry

@caghaedul001 You’re welcome!

It doesn’t matter where the code goes in this particular case. You could place it after your existing slider code:

It worked! I shouldn’t be so surprised, of course.

I think I need to add specs for the type size, since it takes up too much space, but the text is there.

Thank you again.

Great! Glad that helped.

If you’re a StudioPress customer, there’s a list of community resources here should you need extra help with your other planned custom theme alterations: https://my.studiopress.com/community/

Hey there! I’ve got the same problem with genesis executive pro theme. Here’s the link:
https://www.dori-ielts.com.
Here’s what is shown in the custom.css file:
.content .genesis_responsive_slider .slide-excerpt {
background-color: #556270;
}

.content .genesis_responsive_slider h2, .content .genesis_responsive_slider h2 a {
color: #fff;
font-size: 30px;
}

Thanks in advance!

Hi, @dori83!

It’s a little more complex with Executive Pro because you also need to reposition the excerpt area so the content still fits at mobile screen sizes. You could try this at the bottom of your custom CSS as a starting point:

@media only screen and (max-width: 1023px) {
	.content #genesis-responsive-slider .slide-excerpt {
		background-color: #556270;
		background-color: rgba(85, 98, 112, 0.8);
		display: block;		
		height: 60%;	
		width: 100%;	
		overflow: auto;
		font-size: 13px;
		padding: 3% 3% 0;
		bottom: 0;
		top: auto;		
	}

	.content .genesis_responsive_slider h2, 
	.content .genesis_responsive_slider h2 a {
		font-size: 20px;		
	}
}

@media only screen and (max-width: 801px) {
	.content #genesis-responsive-slider .slide-excerpt {
		height: 100%;		
	}

	.content #genesis-responsive-slider .slide-excerpt p {
		margin-bottom: 10px;
	}

	.content .genesis_responsive_slider p a {
		margin-top: 6px;
	}
}

@modernnerd Thank you very much for that; You’re the best!