home slider on minimum pro?

[ianmatt]

Hey all, I am just getting into my first ever genesis them design. I am familiar with css and wordpress. SOOOO loving genesis. I just added a full screen slider to Minimum. Wonder if you guys can look at this for me. After the first slide there is a slight JUMP down on the nave arrows and the height somewhere and I can't find what it is. Bugging the hell out of me. ALSO I followed this tutorial to add the slider. Is there a better way of just adding a standard slider and not full width?

tutorial: http://sridharkatakam.com/how-to-replace-background-image-in-minimum-pro-with-responsive-slider/

my page: http://www.daydreamit.com/dev/milpond-2/

Thanks so much for the help. I am looking forward to learning tons.

http://www.daydreamit.com/dev/milpond-2/

[Tonya]

Hi,

You are seeing the jump because on :hover, there is another background-position in the style.css, which shows the same icon. To get rid of the "jump", you want to comment this out in your style.css file:

line 185 - notice how I commented out the back

.flex-direction-nav li .next {
	background-position: -52px 0; 
	right: -60px;
}

/* .flex-direction-nav li .next:hover {
	background-position: -52px -50px;
} */

.flex-direction-nav li .prev {
	left: -60px;
}

/* .flex-direction-nav li .prev:hover {
	background-position: 0 -50px;
}*/

With this edit, the next/prev icons stay on the page and do not change.

I hope this helps.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[ianmatt]

Thanks so much for the prompt response Tonya YOU RULE!!! So just before seeing this I had decided to try the backstretch slider plugin. Kinda wishing I would have waited for a response but this plugin is not doing what I want. I may redo the other one. Can you recommend a good free plugin or option for getting a standard ( doesnt have to be full screen ) slideshow into Minimum Pro? I would love to have a few cool options too such as titles and maybe even vimeo displays. Some of the unlimited site prices are kinda pricey HAHA... thanks a ton Tonya.

[Tonya]

You're very welcome.

Honestly, it's difficult to recommend a plugin that gives you all the options that you want, especially a free one. The Studiopress folks have a responsive one, which I believe is a flexslider. We use flexslider for the majority of our sliders, although we build a custom plugin around it.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[ianmatt]

Hey Tonya I am not seeing these in my style.css

.flex-direction-nav li .next:hover

&

.flex-direction-nav li .prev:hover

Are those what I am looking for to comment out? I dont think I understood correctly sorry.

[ianmatt]

Just one other thing. Why is the slider being displayed behind the header and not inline? It is not doing this on the demo site for the tutorial. I'm SOOO close haha, thanks again for the help.

[ianmatt]

ACTUALLY I have noticed it is not jumping now that I have redone the slider all together. Now I just have my inline behind the header issue and I am good to go. It works fine when I scale the window down. Just at full width it pops behind the header. Almost there.

[Tonya]

Good. As your header is fixed position, you need to add margin-top:

.home-slider {
     clear: both;
     margin-top: 93px;
}

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[ianmatt]

That DID work thank you. I actually added that last night too during my first shot at this. However the problem ( unlike the demo site ) is when you slim the browser window... the nav pops under the logo perfectly but the slider now has a big gap above it. its killing me. For the life of my cannot figure out how to fix this. And my funny little nav button jump is back I just noticed. I'm not clear on the css to comment that out. So close I can barely take it hahaha. thanks again

[Tonya]

Ok, let me give you a few developer secrets to help you out:

1. You will use @media queries to modify how your site appears in different browser sizes (i.e. mobile responsiveness)
2. You can use Firefox to test locally
3. In addition, I use Nuts and Bolts Media to view a site the different mobile devices. Then (I work in Chrome mostly), right click on the item you want to inspect and then select "Inspect Element". From there you can modify the HTML, javascript, and CSS live to achieve the look you want. Then take those changes back to your child theme for implementation.

With those tips in mind, what you want to do is go to the Nuts and Bolts site, for each device modify the margin-top value, and then add those changes back into your child theme. You'll find the @media queries at the bottom of the style.css.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[ianmatt]

OH My GOSH you are amazing. If you were anywhere close to Loveland CO I would buy you a beer. Thank you so much. I use chrome too but havnt used the nuts n bolts. I am adding that now. I still didnt understand the commenting out css for the slider jump that you instructed me on. wow you are amazing.

[Tonya]

Always glad to help. We all help one another, which is the beauty of the WordPress and Genesis Communities.

Silly me, the CSS edits I made here actually in the responsive plugin's css. Duh on my part.

Add this after line 1566 in your child theme's style.css file:

/*
Responsive Slider
---------------------------------------------------------------------------------------------------- */
.flex-direction-nav li .next:hover {
	background-position: -52px 0 !important; 
}

.flex-direction-nav li .prev:hover {
	background-position: 0 0 !important;
}

I'm not a fan of !important at all; however, in this case, it's needed.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[ianmatt]

I LOVE THE NUTS AND BOLTS MEDIA!!!. Where has this been all my life? I totally fixed my issue with the @media. Its displaying perfectly. So I am having to use the admin in wordpress right now for the css edits. Its there a way to get the line count number in there? Kinda surprised they dont include that already.

[Tonya]

Be very careful when editing using the admin Editor. I recommend that you work offline and then transfer the file(s) to your hosting server, to ensure you can quickly recover when an oops occurs.

I'm unaware of way to display line numbers in the editor.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[ianmatt]

I still cant get rid of that pesky little jump. Are you seeing it? I added that css.

[Tonya]

No, I don't see it on any of my devices in either Chrome or Firefox. It may be your browser's cache. Whenever you make changes to the child theme, you want to increment the CHILD_THEME_VERSION number. I typically do 1.0.1 the latter number ticked up one for minor changes. You'll find this in your functions.php file.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[ianmatt]

Howdy Tonya, thank a million for all of you help earlier today. I have tried to no end to get the slight jump out of the slider. I think it is happening at the end of the 3rd slide and there are only 3 slides. I was curious if you could peek one last time before I try something completely different. The skip seems even more extreme on smaller screens. thanks a ton.
http://www.daydreamit.com/dev/milpond-2/

[Tonya]

The Studiopress team offers Genesis Responsive Slider. It will give you titles and excerpts.

However, to add additional options and show videos, you are going to want to either purchase a responsive slider or build one. We build a flexslider with the options that are required. Here are some examples to give you some inspiration: Z2T, eventXchange, and carousel slider.

A slider that I used on our biz site for the portfolio and testimonials is Royal Slider (this is a paid one though).

I hope this helps.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Sorry for the delay. It's been a crazy, crazy day.

I do see the jump but only on my iPad and not on my desktop or laptop. What I did to stop it was to change your .flexslider max-height to height and then you want to adjust that height for each of the mobile devices. For example, on the iPad I set it to height: 380px;.

Give it a go and let me know if that takes care of it for you.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[ianmatt]

Thanks a ton Tonya, I'll try it out.

[Author]

Posts