Community Forums › Forums › Archived Forums › Design Tips and Tricks › Full Width for Genesis Responsive Slider in Outreach Pro theme
Tagged: full-width slider, Outreach Pro
- This topic has 17 replies, 5 voices, and was last updated 9 years ago by Tim Squires.
-
AuthorPosts
-
October 20, 2014 at 8:34 pm #128549aniccaMember
Dear all, Would you please let me know how do I set full width for the Genesis Responsive Slider in the Home Top widget of this theme? I tried to change the slider size and image size, but there remains the background on the two sides of the slider as shown in the demo version.
http://my.studiopress.com/themes/outreach/#demo-full
Thank you very much.
http://localOctober 20, 2014 at 8:44 pm #128550DougParticipantI would like to know also.
October 22, 2014 at 8:22 am #128742bhaynet1MemberYes - please share the answer - I need this too.
Thanks!
October 22, 2014 at 8:55 am #128750Genesis DeveloperMemberI think that it is very easy. You 'll setup the slider width and height (like 1900px X 450px whatever you want) in Slider's settings page.
Next add the following css in your style.css file
.home .site-inner .wrap{ width: 100%; max-width: 100%; }
I did not test it. But you can try and please let me know if it is working for you.
October 22, 2014 at 9:06 am #128751bhaynet1MemberHi -
Thank you for responding - I added your code to the CSS - however it unfortunately didn't work.
Here's a link:
http://www.hiddenpondtreefarm.com/HP_NEW_SITE/
The image is 1850 x 498 (which I desire) - I have the Genesis Slider setting set to that width and height too.
However it did pull in the image - but it is now "shrunk" to fit the 1140 container i think?
What should I change please?
Thank yo.
PS _ I just ran Regenerate Thumbnails but alas - this also didn't work
October 22, 2014 at 9:17 am #128753Genesis DeveloperMemberI am not getting my CSS. Are you using cache plugin? Please flush the cache. it'll work
October 22, 2014 at 9:43 am #128756Genesis DeveloperMember@bhaynet1 I checked your css file. There have some issue. closing bracket is not there. Please use my code
@media only screen and (max-width: 480px) { .content { padding: 30px; } .content #genesis-responsive-slider .flex-control-nav { display: none; } .home-bottom .widget:nth-of-type(2n), .home-bottom .widget { margin: 0; width: 100%; } .header-image .site-title a { background-size: contain !important; } } .outreach-pro-home #genesis-responsive-slider { max-width: 100%; } .outreach-pro-home .flexslider { max-width: 100%; } .outrach-pro-home .flexslider .slides img { width: 100%; } .outreach-pro-home .flexslider .slide-image { max-height: 100%; } .home .site-inner .wrap{ width: 100%; max-width: 100%; }
October 22, 2014 at 10:02 am #128760bhaynet1MemberThanks so much - it did work!
But now there's a bit of white space on the right side - how do I get rid of that please?
October 22, 2014 at 10:06 am #128761Genesis DeveloperMemberi am not getting white spaces. I am checking on 15 Inch laptop.
October 22, 2014 at 10:31 am #128764bhaynet1MemberAHa - it's ok on my 15 in laptop too -
but there's a 1/2 white space on my 21 in iMac: - here's a shot:
So should the image be either centered or enlarged?
Thank you.
October 22, 2014 at 10:45 am #128766Genesis DeveloperMemberthen upload 2200px image.
October 22, 2014 at 10:50 am #128767bhaynet1MemberThank you so much!
October 22, 2014 at 4:58 pm #128795DougParticipantbhaynet1 - what's the countdown plugin called? I need something like that for my site (need it to display along the top like yours).
October 22, 2014 at 6:38 pm #128800aniccaMemberThank you all guys, esp genwrock - your simple CSS trick works perfectly for my case.
October 22, 2014 at 8:31 pm #128804Genesis DeveloperMemberOctober 23, 2014 at 12:31 pm #128869bhaynet1MemberHi cabrzama -
Yes - the plugin at the top of the page is: DW Promobar.
It's free in the WP plugins directory. You can change colors, fonts & even lets you add that nifty countdown timer - which can automatically disappear when the date has been reached.
And a BIG THANK YOU to genwrock for his kind assistance!!!
October 31, 2014 at 4:58 am #129980aniccaMemberSorry that I have to open this topic again.
Is there any trick to put the slideshow in the center of the website? My client has the habit of zoom out her browser to 50%, which make the overal web layout become tiny, and the slideshow is often on the left side. We can't always have the mega big photo to fit her demand. I tried with 2560px but still cannot cover her screen. Possibly, the best way is to put the slideshow full-width but in the centre.
Please kindly help. Thank you very much.
April 18, 2015 at 5:12 am #148318Tim SquiresMember -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.