Community Forums › Forums › Archived Forums › Design Tips and Tricks › News Pro/Responsive Slider – How to show post title on mobile
Tagged: responsive slider
- This topic has 1 reply, 2 voices, and was last updated 8 years, 7 months ago by katr3na.
-
AuthorPosts
-
September 11, 2015 at 11:03 am #165234jmackMember
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 {
http://chinafilm.wpengine.com
font-size: 26px;
}
}September 15, 2015 at 2:55 pm #165629katr3naMemberHi 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.