Community Forums › Forums › Archived Forums › Design Tips and Tricks › Enterprise Pro Slider images float to the left on larger screens
- This topic has 4 replies, 2 voices, and was last updated 7 years, 5 months ago by Jonger.
-
AuthorPosts
-
November 1, 2016 at 12:45 pm #195599JongerMember
Hi I am using the Genesis Responsive Slider on the Enterprise Pro Theme, but on larger screens, it is aligned left leaving a lot of white space. I thought it was set at 100%. can anybody help please?
Jon
http://awaywithwine.eu/November 1, 2016 at 2:30 pm #195608carasmoParticipantThere are embedded styles that need to be replaced with the following or use !important after each value.
Replace the relevant embedded styles:.slide-excerpt { width: 100%; } .slide-excerpt { bottom: 0; } .slide-excerpt { right: 0; } .flexslider { max-width: none; max-height: none; } .slide-image { max-height: none; } #genesis-responsive-slider .slide-image img { width: 100%; }
Or add this to the bottom of your style sheet:
.slide-excerpt { width: 100%!important; } .flexslider { max-width: none; max-height: none!important; } .slide-image { max-height: none!important; } #genesis-responsive-slider .slide-image img { width: 100%!important; }
November 4, 2016 at 4:21 pm #195745JongerMemberI tried the bottom one but that didn't work.
Where o I put the first lot of code?
Thanks for your help carasmo.
Jon
November 6, 2016 at 6:40 am #195783carasmoParticipantYou put it it in the wrong place:
You have at the very bottom of your style sheet the following incorrect:
.slide-excerpt { width: 100%!important; } .flexslider { max-width: none; max-height: none!important; } .slide-image { max-height: none!important; } #genesis-responsive-slider .slide-image img { width: 100%!important; }
This means that your mobile styles are now not going to work correctly because you have a parse error.
In those last blocks, remove all but save the very last bracket so that the CSS for the MEDIA query has that last closing bracket }.
It should look like this again. Read the code, the closing brackets for declarations inside declarations (the media query) are indented and then the closing bracket for the Media query needs to close.
.genesis-nav-menu.responsive-menu .sub-menu .sub-menu, .nav-primary .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { background-color: transparent; margin: 0; padding-left: 25px; } }
Then when you have the media query correct again, paste the following OUTSIDE of the closing bracket of that media query. Add the following CSS, which is the same but with greater CSS specificity:
Do not put this in a media query. Use a FTP to get your style.css file and a code editor to edit it. Use correct indentation.
.enterprise-pro-home .slide-excerpt { width: 100%!important } .enterprise-pro-home .flexslider { max-width: none!important; max-height: none!important; } .enterprise-pro-home .slide-image { max-height: none!important } .enterprise-pro-home #genesis-responsive-slider .slide-image img { width: 100%!important }
November 23, 2016 at 10:47 am #196517JongerMemberThanks. I have done all the above. Will I have resize the slider images as there is still a gap on the right hand side?
Really appreciate all your help here.
Jon
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.