Genesis slider does not fit widget space

[sandercomputerservices]

Hi, I am currently rebuilding my site (http://syrupsaturdays.info/). I am using Genesis Streamline Pro. I am trying to use the Genesis slider as a primary sidebar widget. The slider does not fit within the widget. I know I can resize it (and I have) but it looks like the widget has a reserved space on the page and the slider fits below and to the right of where it should be. I would like the slider to use the exact space that the widget is in. I can make this better by editing the padding around it as shown in firebug but it does not fix the real problem. What should I do differently?

Thanks in advance

[jbergen]

Hi,

I'd be happy to try to help, but I'm getting a 403 Forbidden error when I click on your link.

Jamie

---

Jamie @ Ladebug Studios

[sandercomputerservices]

jbergen, I went ahead and tried to move it to where it will stay in the host's directory structure. When It is back up In will reply in this topic.

Thanks for your looking into it

[sandercomputerservices]

jbergen, I have moved my site to where it will stay - so it is in 'production'. The issue I have with the slider has changed a bit for the better. It does not seem to be offset like it used to be. I don't know why that changed. I still would prefer it take up the whole of the space on the page that appears to be there for it. If you are able to make a suggestion for that I would appreciate it. The new and permanent URL is http://sandercomputerservices.com/.

Thanks

[jbergen]

Hi,

The first thing that can improve the slider's positioning is to remove the 10px margin set by the CSS for the genesis slider.

This is where the margin is set:

style.css, line 42 (CSS file for genesis slider)

html > body .slide-excerpt-border {
    background: none repeat scroll 0% 0% transparent;
    border: 1px solid #DDD;
    display: inline;
    float: left;
    margin: 10px; ***want to change this ***
    padding: 14px;
    position: relative;
    z-index: 8;
}

To override this, you can add this to the child theme's style.css:

html > body .slide-excerpt-border {
    margin: 0 !important;
}

However, it still won't be exactly centered. To fix that, you can add this to your child theme's style.css:

.slide-excerpt {
	margin: 0 !important;
}

And that should at least get everything to fit properly.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[sandercomputerservices]

Jamie

I assume I made the two changes to the child theme’s style.css but there has been no change. So I am not editing the correct style.css or I am doing it wrong. The child theme I am using is Streamline-Pro so I made the two changes to the style.css file found in the root of /wp-content/themes/streamline-pro. I am adding the two changes to the end of the file like below.

	.header-image .site-header .site-title a {
		background-size: contain !important;
	}
	
	.responsive-menu {
		display: none;
	}
	
	#responsive-menu-icon {
		display: block;
	}
	
	html > body .slide-excerpt-border {
    margin: 0 !important;
	}

	.slide-excerpt {
	margin: 0 !important;
	}

}

I did play around with the CSS file for genesis slider where you mentioned the problem is and removed a small border. I am happy with that change. I would like the slider to fit the whole of the area the slider is in.

Thanks for your help.

[jbergen]

Hi,

You'll want to make all of your CSS changes in your child theme's style.css file, which is found in the root of /wp-content/themes/streamline-pro (just like you said). To be sure you're in the right file, you can check that it has the following at the top:

/*
	Theme Name: Streamline Pro Theme
	Theme URI: http://my.studiopress.com/themes/streamline/
	Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
	Author: StudioPress
	Author URI: http://www.studiopress.com/
	Version: 3.0.1

I would recommend moving the following modification you made to the Genesis slider's CSS sheet (see below) to your child theme stylesheet because there are likely to be updates to the plugin, and that will remove your customizations. (Updates to child themes are much less likely, and they don't automatically update, so it's generally safe to add custom CSS to the child theme's custom.css file.)

html > body .slide-excerpt-border {
    margin: 0 !important;
}

I'm not sure where the other modification is (the one below), but that should also go in the child theme's style.css.

.slide-excerpt {
	margin: 0 !important;
}

When I added those two modifications, the slider was centered, although there was still a sizable gray border around it. If you want to remove all of that gray border space, you can remove the 40px padding that's set on style.css, line 1526. Then you'll need to change the settings of your slider to make each slide fill the entire width.

Jamie

---

Jamie @ Ladebug Studios

[sandercomputerservices]

Thanks

Two questions:
1) Do I remove the 40px padding that’s in the style.css by setting it to 0px or do I remove the line?
2) To make the two modifications to the style.css file by adding them to the bottom of the file as showed in my last email? Or do I add them somewhere else?

Also, I am pretty sure I am in the correct style.css file. I do see the code at the top that you said to check. The only thing is the 40px padding in the style.css is not on line 1526. It might be on line 1565. I am opening the file in Notepad++ and have been doing that all along with your suggestions and I don't think the line numbers have matched what you said. I can't figure out how I am misreading them.

Thanks again.

[sandercomputerservices]

Jamie
I found that I had two sliders installed and they each work differently when the other is disabled. I was using the Genesis Slider and now I am using the Genesis Responsive Slider. I think I should have used that all along because I have a responsive theme as I understand it. I can't say I'm satisfied with what I am looking at now. It still does not fit the whole of the space, there seems to be a shadow title a little above the proper title and there is still a grey border. I tried to make the changes you mentioned and it is different but I'm not sure all of the changes are showing up.

Sorry for the mistake

[jbergen]

Hi!

Sorry it took me a while. Anyway, try putting the following CSS into your child theme's style.css. I think it should make the slider look much better.

Jamie

.slide-image {
	display: none;
}
.slide-excerpt {
	position: relative !important;
	margin: 0 10px !important;
}
.flexslider {
	margin: 0 10px !important;
	max-height: 400px;
}
.slide-excerpt-border {
	border: none !important;
	padding: 0px !important;
	margin: 0 !important;
	margin-right: 20px !important;
}

.flexslider .slides > li {
	margin-top: -20px;
}
.genesis_responsive_slider .sd-title, 
.genesis_responsive_slider .sd-button, 
.genesis_responsive_slider .sd-content {
	display:none !important;
}
.genesis_responsive_slider {
	margin-left: 10px;
	margin-right: 10px;
}

---

Jamie @ Ladebug Studios

[sandercomputerservices]

Jamie

I don't see a change. I pasted what you gave me at the end of style.css of my child theme. I copied the bottom of my css file after pasting your code into it. I included the previous last line for reference. Could I have added it wrong? I'm not familiar enough with editing css files. I don't understand if formatting makes a difference or not.

Thanks again for you help.

#responsive-menu-icon {
		display: block;
	}
	
	.slide-image {
	display: none;
	}
	.slide-excerpt {
	position: relative !important;
	margin: 0 10px !important;
	}
	.flexslider {
	margin: 0 10px !important;
	max-height: 400px;
	}
	.slide-excerpt-border {
	border: none !important;
	padding: 0px !important;
	margin: 0 !important;
	margin-right: 20px !important;
	}

	.flexslider .slides > li {
	margin-top: -20px;
	}
	.genesis_responsive_slider .sd-title, 
	.genesis_responsive_slider .sd-button, 
	.genesis_responsive_slider .sd-content {
	display:none !important;
	}
	.genesis_responsive_slider {
	margin-left: 10px;
	margin-right: 10px;
	}

}

[sandercomputerservices]

Jaime The previous last line is actually in line with the other code. My paste does not show it.

Thanks

[jbergen]

You don't actually want to put it at the very end of your child theme's style.css. Currently, it's actually inside of a media query (which is special CSS code that only applies when the screen is a certain width). That's why you don't see any changes. I'd remove all of it from there and paste it on line 878, which is a section of the style.css where plugins are styled. (There's no "correct" place to put it, but it just makes sense to put it with other plugins.)

Jamie

---

Jamie @ Ladebug Studios

[sandercomputerservices]

Jamie Thanks - That looks great. I really appreciate all the time you spent on this.

Greg

[Author]

Posts