News Pro/Responsive Slider – How to show post title on mobile

[jmack]

I'm using the Genesis Responsive Slider on News Pro. I'm having problems getting the post title to appear in a vertical view on the phone. It overlays on a horizontal view however. Any ideas on what I need to change in the css in media query or responsive slider. I've pasted it all in below. The site is linked but in progress. Thanks!

/* Genesis Responsive Slider
--------------------------------------------- */
.news-pro-home .content #genesis-responsive-slider,
.news-pro-home .content .genesis_responsive_slider li {
border: none;
}

.news-pro-home .content .genesis_responsive_slider li:before {
content: "";
margin: 0;
}

.news-pro-home .content .genesis_responsive_slider .slide-excerpt,
.news-pro-home .content .genesis_responsive_slider .slide-excerpt-border {
background: transparent;
border: none;
margin: 0;
}

.news-pro-home .content .genesis_responsive_slider .slide-excerpt {
padding: 24px;
}

.news-pro-home .content #genesis-responsive-slider,
.news-pro-home .content .genesis_responsive_slider .slides li,
.news-pro-home .content .genesis_responsive_slider .flex-direction-nav li {
margin: 0;
padding: 0;
}

.news-pro-home .content .genesis_responsive_slider .flex-control-nav {
line-height: 1;
margin-top: -30px;
}

.news-pro-home .content .genesis_responsive_slider .flex-control-nav li {
margin-bottom: 0;
padding-bottom: 0;
}

.news-pro-home .content .genesis_responsive_slider .flex-direction-nav li a {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}

.news-pro-home .content .genesis_responsive_slider h2 a {
background: rgba(255,0,0,0.6);
color: #fff;
display: inline-block;
font-weight: 700;
line-height: 1.2;
margin: -20px, 5px, 0;
padding: 24px;
position: relative;
z-index: 9;
}

.news-pro-home .content .genesis_responsive_slider a:hover {
color: #fff;
}

.news-pro-home .content .genesis_responsive_slider p {
background: rgba(0,0,0,0.9);
color: #fff;
font-size: 14px;
font-weight: 700;
margin: -10px 0;
padding: 12px 24px;
position: relative;
z-index: 9;
}

.news-pro-home .content .genesis_responsive_slider .flex-direction-nav li a {
background: url(images/icon-direction-nav.png) no-repeat -50px 0;
background-size: 100px 98px;
height: 49px;
outline: none;
right: -25px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
width: 50px;
}

.news-pro-home .content .genesis_responsive_slider .flex-direction-nav li a:hover {
background-position: -50px -49px;
}

.news-pro-home .content .genesis_responsive_slider .flex-direction-nav li a.prev {
background-position: 0 0;
bottom: 10px;
left: auto;
right: 62px;
top: auto;
}

.news-pro-home .content #genesis-responsive-slider .flex-direction-nav li a.next {
bottom: 10px;
left: auto;
right: 10px;
top: auto;
}

.news-pro-home .content #genesis-responsive-slider .flex-direction-nav li a:hover.prev {
background-position: 0 -49px;
}

.widget-title {
border-top: 3px solid #000;
border-bottom: 1px solid #e3e3e3;
color: #000;
font-size: 16px;
font-weight: 700;
margin-bottom: 24px;
padding: 16px;
text-align: center;
text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
.five-sixths,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4,
.footer-widgets-5,
.footer-widgets-6,
.four-sixths,
.home-middle-left,
.home-middle-right,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
.genesis-nav-menu.responsive-menu {
display: none;
}

.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}

.genesis-nav-menu.responsive-menu .menu-item {
margin: 0;
}

.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu.responsive-menu li.current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu li a,
.genesis-nav-menu.responsive-menu li a:hover {
background: none;
border: none;
color: #000;
display: block;
line-height: 1;
padding: 20px;
text-transform: none;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f132";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 18px 20px;
right: 0;
text-align: right;
z-index: 9999;
}

.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f460";
}

.genesis-nav-menu.responsive-menu .sub-menu {
background-color: rgba(0,0,0,0.05);
border: none;
left: auto;
opacity: 1;
position: relative;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}

.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
margin: 0;
}

.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 20px;
position: relative;
text-transform: none;
width: 100%;
}

.content #genesis-responsive-slider .flex-direction-nav li .next,
.content #genesis-responsive-slider .flex-direction-nav li .prev,
.content .slide-excerpt

.home-middle-left {
border: none;
}

.header-image .site-header .site-title a {
background-size: contain !important;
}

.entry-title {
font-size: 26px;
}
}

http://chinafilm.wpengine.com

[katr3na]

Hi there. It doesn't matter which theme you are using, the Genesis Responsive Slider isn't 100% responsive on a cell phone. I emailed them recently about the same concern and received the following:

The child theme has code that is hiding the excerpt for the slider on mobile devices since the text needs to be so small to display correctly on mobile. You can edit the child themes style.css file and remove the code that is hiding the excerpt, but you will also need to add code to reduce the size of the text so it displays correctly.

Design changes to your website are made via the style.css file of your child theme. To locate the right area to target, I recommend using a tool called Firebug. This way you can see the existing design code of your site and make live changes until you have the customization just right: http://www.studiopress.com/tips/using-firebug.htm

If you are using chrome I suggest using the inspector to help with design changes: https://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/

You will need to look for the following code in your child themes style.css file in the media queries near the bottom. You can comment it out or delete it. Make sure to make note of the code so you can add it back in if you like.

.content #genesis-responsive-slider .slide-excerpt {
display: none;
}

If you need further assistance with making the design changes, I would recommend to post your question in our community forum as another user may have done something similar to what you are trying to achieve and would be willing to share their code and process with you: http://studiopress.community

[Author]

Posts