Resize Responsive Slider

[adm]

I know how to reduce the image size, but need to reduce the wrap. When I adjust the wrap, it affects the entire site. How can I adjust the wrap (or white area) around just the slider on the home page.

Thanks!

http://198.143.132.50/~eckert2/wp/

[bmaven]

Hi there,

Have you tried using

`.home #content {
max-width: 600px;
}`

?

---

Blogging growth strategist & revenue coach at The Blog Maven, fearless leader of 3 preschoolers…tweeting it up @theblogmaven

[adm]

That works, needs some css work, but won't this affect all of the home page content? I havn't added any of the widgets yet, but don't want to restrict that to the same size as the slider. Also, what would this snippet do to affect responsiveness?

 

Thanks!

[bmaven]

Yes, it would affect all of the home page content - I didn't know there was more coming. 🙂 Your best bet is to create widgetized areas on the home page so that you can target the individual widget areas. E.g., a "Home Featured" widget area at the top to contain your slider and other widget areas below. Several child themes have examples of this. And then you could put the background on just the Home Featured area instead of the whole content column.

Jeni

---

Blogging growth strategist & revenue coach at The Blog Maven, fearless leader of 3 preschoolers…tweeting it up @theblogmaven

[adm]

Im using outreach, so there are widget areas to include the home featured, etc. And I know how to manipulate those fields, but that still leaves me with the wrap issue that I have yet to resolve  :/

V

[bmaven]

I looked at the Outreach child theme, and it looks like it's structured so that the Content section is completely separate from those bottom widget areas. They're inside a separate div ID called #home-sections. I think you should try adding everything to the page (including the images for the bottom) and see if you can just target the slider through the .home #content.

Jeni

---

Blogging growth strategist & revenue coach at The Blog Maven, fearless leader of 3 preschoolers…tweeting it up @theblogmaven

[adm]

That works. Thanks! Know how I can center the slider without distorting the responsiveness?

V

[bmaven]

Sure:

`.home #content {
float: none;
}`

---

Blogging growth strategist & revenue coach at The Blog Maven, fearless leader of 3 preschoolers…tweeting it up @theblogmaven

[adm]

It's still floating left with that line.

[bmaven]

Undo that last change, then try adding this to line 183:

`.home #content {
display: block;
margin: 0 auto;
}`

---

Blogging growth strategist & revenue coach at The Blog Maven, fearless leader of 3 preschoolers…tweeting it up @theblogmaven

[adm]

nope 🙁

I had tried the margin line before but it didn't change anything.

[bmaven]

On line #638 you have a float:left that is cancelling out that line. You can either try placing your .home #content code below that line, or add a float: none !important; to your .home #content. The first method is preferred.

---

Blogging growth strategist & revenue coach at The Blog Maven, fearless leader of 3 preschoolers…tweeting it up @theblogmaven

[adm]

which float: left is that?

 

[bmaven]

After your last changes, it's now line #636:

`#content {
background-color: #FFFFFF;
float: left;
padding: 30px 40px;
width: 450px;
}`

Place this below that line:

`.home #content {
display: block;
margin: 0 auto;
float: none;
}`

---

Blogging growth strategist & revenue coach at The Blog Maven, fearless leader of 3 preschoolers…tweeting it up @theblogmaven

[adm]

Great! Not done a full responsive test, but good on an iphone 🙂

Thanks so much! You rock 🙂 Happy Saturday!

V

[Author]

Posts