Resize Responsive Slider

Community Forums Forums General Discussion Resize Responsive Slider

This topic is: not resolved

This topic contains 14 replies, has 2 voices, and was last updated by  adm 1 year, 2 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #41445

    adm
    Participant
    Post count: 12

    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/
    #41460

    bmaven
    Participant
    Post count: 44

    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

    #41466

    adm
    Participant
    Post count: 12

    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!

    #41467

    bmaven
    Participant
    Post count: 44

    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

    #41468

    adm
    Participant
    Post count: 12

    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

    #41469

    bmaven
    Participant
    Post count: 44

    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

    #41470

    adm
    Participant
    Post count: 12

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

    V

    #41481

    bmaven
    Participant
    Post count: 44

    Sure:

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


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

    #41486

    adm
    Participant
    Post count: 12

    It’s still floating left with that line.

    #41489

    bmaven
    Participant
    Post count: 44

    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

    #41494

    adm
    Participant
    Post count: 12

    nope :(

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

    #41496

    bmaven
    Participant
    Post count: 44

    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

    #41497

    adm
    Participant
    Post count: 12

    which float: left is that?

     

    #41499

    bmaven
    Participant
    Post count: 44

    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

    #41504

    adm
    Participant
    Post count: 12

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

    Thanks so much! You rock :) Happy Saturday!

    V

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.